jsonp的使用

jsonp的原理,应用场景,优缺点


在开发测试中,难免会在不同域下进行跨域操作,出于安全性考虑,浏览器中的同源策略阻止从一个域上加载的脚本获取或者操作

另一个域下的文档属性,这时需要进行跨域的方式进行解决,如:使用jsonp ,iframe等

1.jsonp的原理
jsonp,即json+padding,动态创建script标签,利用script标签的src属性可以获取任何域下的js脚本,通过这个特性(也可以说漏洞),服务器端不在返货json格式,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域.

2.应用场景
在网上经常看到别人的blog中在用jsonp模仿360和百度进行跨域拿数据,这两者就是典型的跨域请求案例.又比如在近期开发中前端部分用的是vue.js进行开发,所以跟后台进行交互的时候就可以通过跨域进行通信,正好用的jsonp(折腾 一番之后,最终没有用这种方式,后面会说到),另外,qq空间大部分用的都是jsonp./

3.优缺点
jsonp优点:
完美解决在测试或者开发中获取不同域下的数据,用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。简单来说数据的格式没有发生很大变化


jsonp缺点:

这里主要讲jsonp的缺点,也就是我上面说的没有用这个的原因

1.jsonp只支持get请求而不支持post请求,也即是说如果想传给后台一个json格式的数据,此时问题就来了,浏览器会报一个http状态码415错误,告诉你请求格式不正确(在登录注册中需要给后台传一大串数据),如果都用参数的形式拼接在url后面的话不太现实,后台取值也会显得繁琐,

2.在登录模块中需要用到session来判断当前用户的登录状态,这时候由于是跨域的原因,前后台的取到的session是不一样的,那么就不能用session来判断.

3.由于jsonp存在安全性问题(不知qq空间的跨域是怎么解决的,还是另有高招?)

后来考虑到上面的一系列问题,采用的是后台进行设置允许跨域请求(但还是存在缺陷的,实质上还是跨域,如上面说的session问题)

.Header set Access-Control-Allow-Origin * 

为了防止XSS攻击我们的服务器, 我们可以限制域,比如

Access-Control-Allow-Origin: http://blog.csdn.net


安全防范:

1.防止callback参数意外截断js代码,特殊字符单引号双引号,换行符存在风险.

2.防止callback参数恶意添加script标签,造成xss漏洞

3.防止跨域请求滥用,阻止非法站点恶意调用
 

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Java中使用JSONP主要是通过使用跨域请求来获取JSON数据。JSONPJSON with Padding)是一种跨域请求技术,它实际上是通过在页面中动态创建一个`<script>`标签来加载远程的JSON数据,并通过回调函数来处理返回的数据。 下面是一个简单的Java JSONP的示例代码: ```java import javax.ws.rs.GET; import javax.ws.rs.Path; import javax.ws.rs.Produces; import javax.ws.rs.QueryParam; import javax.ws.rs.core.MediaType; @Path("/jsonp") public class JSONPService { @GET @Path("/data") @Produces(MediaType.APPLICATION_JSON) public String getJSONPData(@QueryParam("callback") String callback) { // 构造要返回的JSON数据 String jsonData = "{\"name\":\"John\", \"age\":30}"; // 将返回的数据包装成JSONP格式 String jsonpData = callback + "(" + jsonData + ")"; return jsonpData; } } ``` 上面的代码使用了JAX-RS(Java API for RESTful Web Services)来创建一个简单的RESTful服务。通过访问`/jsonp/data?callback=callbackFunction`,可以获取到如下格式的JSONP数据: ``` callbackFunction({"name":"John", "age":30}) ``` 在前端页面中,可以使用类似下面的代码来处理返回的JSONP数据: ```javascript function callbackFunction(data) { // 处理返回的JSON数据 console.log(data.name); console.log(data.age); } var script = document.createElement('script'); script.src = 'http://example.com/jsonp/data?callback=callbackFunction'; document.body.appendChild(script); ``` 以上代码中,通过动态创建`<script>`标签,设置`src`属性为请求JSONP数据的URL,并指定回调函数名字为`callbackFunction`。当服务器返回数据时,会调用该回调函数来处理返回的数据。 需要注意的是,JSONP存在一些安全性问题,因为它允许在页面中执行任意的JavaScript代码。因此,在使用JSONP时需要谨慎处理返回的数据,以防止潜在的安全漏洞。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值