美文网首页
同源策略、跨域、jsonp

同源策略、跨域、jsonp

作者: 尹萨萨 | 来源:发表于2016-10-10 10:41 被阅读0次
    1.同源策略

    是指浏览器普遍默认的一种安全策略;

    例如:
    一个恶意网站的页面通过iframe嵌入了银行的登录页面(二者不同源),如果没有同源限制,恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。

    • 同源:
      即是指URL具有相同的协议、域名、端口;可以理解为当前域名下的脚本,只能读写当前域名下的数据资源,而无法获取其他资源;
    2.跨域以及跨域有几种实现形式

    通过一些方法,突破同源策略的限制
    实现方式包括

    • 降域
      (当域名有相同后缀时可使用,使用不多,容易产生安全问题,一个子页面收到攻击,所有数据都存在泄漏的风险)
      在当前域名及调用数据内部都添加
    document.domain=XXXX...
    XXX只能设置为当前域名的上一级~上N级域名、
    可以继续向下修改,不能向上进行修改
    
    • JSONP
    • CORS
    3.JSONP的原理

    在当前域创建一个函数XXX,创建一个动态script标签,并将想要调用数据的域名设置为script的src值,且需要添加一个参数值callback=xxx,与之前创建的函数,声明一致。这样获取到了需要的数据,并且在当前域执行xxx(data);

    <script>
    window.newfun=function(data ){   //当前域声明一个函数
     alert()
    }
    <script>
     var script=document.createElement('script');  //创建一个动态script标签
     script.src='//abc.com/ac.js?callback=newfun' //向服务器请求callback数据
    document.body.appendChild('script'); //添加到页面
    <script>
    </script>
    //后台服务器写法
    var callback=this.query.newfun;
    this.body=callback+'(data)';
    
    • 缺点:
      如果a.com可以访问b.com,那么完全可以让c.com也访问b.com,解决方法有要么用正则过滤掉不应该出现的字符串,要么约定好一套数据,比如cookies来互相匹配
      不能用post只能get

    参考资料

    4.CORS

    Cross Origin Rescource Sharing 跨域资源共享
    在调用数据文档内加入响应头,在当前域名直接用ajax调用即可

    this.set('Access-Control-Allow-Origin','当前域名')
    

    缺点是IE8,9兼容存在问题

    更多其他跨域解决方法

    本地模拟同源策略

    首先找到系统的hosts文件(windows系统的路径 C:\Windows\System32\drivers\etc)默认情况下,只有localhost指向本地IP 127.0.0.1,在hosts文件中我们可以为其添加多个域名


    模拟同源策略
    • JSONP
       window.newfun=function(data){
          alert(data);}
        var script=document.createElement('script');
        script.type='text/javascript';
        script.src='//b.com/task31/data.php?callback=newfun';
        document.body.appendChild(script);
        </script>
    //后台
    newfun('我是数据');
    
    JSONP
    • CORS
        $.ajax({
          url:'//b.com/task31/data.php',
          type:'get',
          datatype:'json',
          // jsonp:'callback',
          success:function(data){
            console.log(data);
          },
          error:function(){
            console.log('there is problem');
          }
        })
    //后台
    <?php
        header('Access-Control-Allow-Origin:http://a.com');
        $data='i am data';
        echo json_encode($data);
    ?>
    
    CORS

    相关文章

      网友评论

          本文标题:同源策略、跨域、jsonp

          本文链接:https://www.haomeiwen.com/subject/coxuyttx.html