浏览器跨域

浏览器同源策略：

    是浏览器最核心也是最基本的安全功能，web是构建在同源策略基础上的，浏览器只是同源策略的一种实现。

    同源指：域名，协议，端口。

    同源策略的目的是保护用户的信息安全，防止恶意网站的信息窃取。（提交表单不受同源限制）。

    非同源限制：cookie，localStorage，indexedDB不能读取。DOM无法获得，AJAX请求不能发送。

1.CROS跨域（Cross-Origin Resource Sharing 跨源资源共享）:

    一种即为url静态请求：（不受同源策略限制）

    另一种通过ajax请求来动态请求跨域：

注：服务器需设置：“Access-Control-Allow-Origin“即可访问域（必需）。

        https-资源的SSL证书需为信任，否则用户将被阻止加载这些资源（可更换http）。

 

2.JSONP(利用script标签跨域)

    ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

    即在需要跨域的页面通过script标签的src属性请求，请求返回js语句（例如：fn(kuaYuData);）,以此来实现跨域信息的传递。

3.H5-postMessage

    浏览器兼容性：

        window.postMessage() 方法被调用时，会在所有页面脚本执行完毕之后向目标窗口派发一个  MessageEvent 消息。 

        该MessageEvent消息有四个属性需要注意：

            message 属性表示该message 的类型； 

            data 属性为 window.postMessage 的第一个参数；

            origin 属性表示调用window.postMessage() 方法时调用页面的当前状态； 

            source 属性记录调用 window.postMessage() 方法的窗口信息。

     otherWindow.postMessage(message, targetOrigin, [transfer]);

            otherWindow : 其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。

            message : 将要发送到其他 window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。

           targetOrigin : 通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；例如，当用postMessage传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的origin属性完全一致，来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的targetOrigin，而不是*。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。

            transfer (可选) : 可选是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

       otherWindow通过监听message来获取数据：

            otherWindow.on("message",function(data,origin,source){}):

                data：浏览器发送来的数据。

                origin：调用 postMessage  时消息发送方窗口的 origin . 这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。请注意，这个origin不能保证是该窗口的当前或未来origin，因为postMessage被调用后可能被导航到不同的位置。

                source：对发送消息的窗口对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。

4.window.name

        窗口的名称主要用于设置超链接和窗体的目标。它也被用于一些提供跨域消息传递，作为比JSONP更安全的替代方案，但是，托管敏感数据的现代Web应用程序不应该依赖于Window.name跨域消息传递，而应该使用postMessage API。