zoukankan      html  css  js  c++  java
  • 同源策略以及跨域的解决方案

     源(origin)就是协议、域名和端口号

    同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

    跨域:受前面所讲的浏览器同源策略的影响,不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是就需要跨域。

    跨域的实现形式 

      • 降域 document.domain
        同源策略认为域和子域属于不同的域,如:
        child1.a.com 与 a.com,
        child1.a.com 与 child2.a.com,
        xxx.child1.a.com 与 child1.a.com
        两两不同源,可以通过设置 document.damain='a.com',浏览器就会认为它们都是同一个源。想要实现以上任意两个页面之间的通信,两个页面必须都               设置documen.damain='a.com'。
        此方式的特点:
          1. 只能在父域名与子域名之间使用,且将 xxx.child1.a.com域名设置为a.com后,不能再设置成child1.a.com。
          2. 存在安全性问题,当一个站点被攻击后,另一个站点会引起安全漏洞。
          3. 这种方法只适用于 Cookie 和 iframe 窗口。
      • JSONP跨域
        JSONP和JSON并没有什么关系!
        JSONP的原理:(举例:a.com/jsonp.html想得到b.com/main.js中的数据)在a.com的jsonp.html里创建一个回调函数xxx,动态添加<script>元素,向服务器发送请求,请求地址后面加上查询字符串,通过callback参数指定回调函数的名字。请求地址为http://b.com/main.js?callback=xxx。在main.js中调用这个回调函数xxx,并且以JSON数据形式作为参数传递,完成回调。我们来看看代码:
    • // a.com/jsonp.html中的代码

    复制代码
     1 function addScriptTag(src) { 
     2 •    var script = document.createElement('script'); 
     3 •    script.setAttribute("type","text/javascript"); 
     4 •    script.src = src; 
     5 •    document.body.appendChild(script);
     6 •    }
     7 •    window.onload = function () { 
     8 •    addScriptTag('http://b.com/main.js?callback=foo');
     9 •    } //window.onload是为了让页面加载完成后再执行
    10 •    function foo(data) { 
    11 •    console.log(data.name+"欢迎您");
    12 •    };
    复制代码

      //b.com/main.js中的代码
      foo({name:"hl"})
      这样便实现了跨域的参数传递。

      采用jsonp跨域也存在问题:
        1. 使用这种方法,只要是个网站都可以拿到b.com里的数据,存在安全性问题。需要网站双方商议基础token的身份验证,这里不详述。
        2. 只能是GET,不能POST。
        3. 可能被注入恶意代码,篡改页面内容,可以采用字符串过滤来规避此问题。

      • CORS
        CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
        它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
      刚才的例子中,在b.com里面添加响应头声明允许a.com的访问,代码:
      Access-Control-Allow-Origin: http://a.com
      然后a.com就可以用ajax获取b.com里的数据了。
      注意:此方法IE8以下完全不支持,IE8-10部分支持。详见caniuse-CORS

      • 其它方法
        1. HTML5的postMessage方法
        2. window.name
        3. location.hash

  • 相关阅读:
    Java并发编程:如何创建线程?
    Java并发编程:volatile关键字解析
    Java并发编程:深入剖析ThreadLocal
    Java并发编程:同步容器
    Java ConcurrentModificationException异常原因和解决方法
    Java并发编程:并发容器之ConcurrentHashMap
    Java并发编程:并发容器之CopyOnWriteArrayList
    Java并发编程:Callable、Future和FutureTask
    rest-framework频率组件
    rest-framework的权限组件
  • 原文地址:https://www.cnblogs.com/yaoyao-/p/10873531.html
Copyright © 2011-2022 走看看