WEB学习笔记PHP学习笔记PHP实战

JSONP跨域总结

2019-02-14  本文已影响200人  赵客缦胡缨v吴钩霜雪明

什么是跨域

更详细的说明可以看下表：

URL 说明 是否允许通信
http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许
http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名，不同端口 不允许
http://www.a.com/a.js https://www.a.com/b.js 同一域名，不同协议 不允许
http://www.a.com/a.js http://70.32.92.74/b.js 域名和域名对应ip 不允许
http://www.a.com/a.js http://script.a.com/b.js 主域相同，子域不同 不允许
http://www.a.com/a.js http://a.com/b.js 同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js http://www.a.com/b.js 不同域名 不允许

跨域解决方案之 JSONP

Jsonp （JSON with Padding） 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

由于跨域的存在，使资源交互在不同域名间变的复杂和安全。对于跨域数据传输，当数据长度较小(get的长度内)，jsonp是一种较好的解决方案。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为浏览器同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。

Jsonp的原理是利用 <script> 元素的开放策略，网页可以得到从其他来源动态获取的 JSON 数据，数据被包裹在一个JavaScript 函数中。

jsonp的js端调用

主要功能：通过jsonp向服务器，调用相应接口，获应数据；根据获取数据结果做出相应回调。

<script type="text/javascript">
    $(function () {
        alert("start...");
        $.ajax({
            type: "get",
            // 这个就是不同于当前域的一个URL地址
            url: "http://your_site_url", 
            dataType: "jsonp",
            //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
            jsonp: "callback",  
            //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
            // jsonpcallback与上面的jsonp值一致
            jsonpCallback:"success_jsonpCallback",
            data: "name=admin",  
            success : function(json){//返回的json数据
                console.log(josn.message);//回调输出
                alert('success');
            },
            error:function(){
                alert('fail');
            }
        });
    alert("end...");
});
</script>

jsonp 服务器端 (php)

<?php
$data = ".......";
$callback = $_GET['callback'];
echo $callback.'('.json_encode($data).')';
exit;
?>

Jsonp使用注意事项

1.安全问题

JSONP可能会引起 CSRF(Cross-site request forgery 跨站请求伪造)攻击或 XSS (Cross Site Scripting 跨站脚本攻击)漏洞。

对于支持 JSONP的接口，写接口时数据可能会被篡改，读接口时数据可能会被劫持。

XSS示例：

输出 JSON 时，没有严格定义好Content-Type（Content-Type: application/json）直接导致了一个典型的 XSS 漏洞：

http://127.0.0.1/getUsers.php?callback=<script>alert(/xss/)</script>

2.传值问题

使用Jsonp进行跨域请求，只能通过GET请求传值！！！

可以从Josnp的原理来理解：

JSONP的最基本的原理是动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。
可以说jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的，因为他的原理实际上就是 使用js的script标签 进行传参，那么必然是get方式的了，和浏览器中敲入一个url一样。

预先定义callback函数

function myfunc(data) {
   console.log(data)
}

dom中插入script标签

<!-- callback参数对象对应上面callback函数名 -->
<script src="//example.com/jsonp.js?callback=myfunc"></script>

浏览器请求//example.com/jsonp.js?callback=myfunc, 得到内容

myfunc({"foo": "bar"}) //数据传入到了callback函数

本质上是通过script标签获取数据, script标签是只支持GET的。

总结

上一篇下一篇

猜你喜欢

热点阅读