浏览器同源政策及其规避方法

 

参考资料

概念

• 协议相同
• 域名相同
• 端口相同

http://www.example.com/dir/page.html这个网址，协议是http://，域名是www.example.com，端口是80

 

限制

（1） Cookie、LocalStorage 和 IndexDB 无法读取。

（2） DOM 无法获得。

（3） AJAX 请求不能发送。

 

一级域名相同的情况下

当一级域名相同的情况下（域名分类）

Cookie

可以设置document.domain为同一个值，那么两个网址都可访问到cookie

 

A网页是http://w1.example.com/a.html，B网页是http://w2.example.com/b.html

 

设置document.domain='example'

 

那么在A页面设置的cookie在B页面也能获取

 

 

iframe

当一级域名相同的情况下，设置window.domain的值为相同时

ifame就可与获取到同意窗口下的iframe的内容（dom或者是其他）

 

 

完全不同源的网站

1，片段识别符

原理：url添加#后修改不会刷新，我们可以通过把对应值放到这里，来实现数据通讯

实现：

var src = originURL + '#' + data;
document.getElementById('myIFrame').src = src;

子窗口通过监听hashchange事件得到通知。

window.onhashchange = checkMessage;

function checkMessage() {
  var message = window.location.hash;
  // ...
}

同样的，子窗口也可以改变父窗口的片段标识符。

parent.location.href= target + "#" + hash;

 

 

2，window.name

1）每个窗口都有独立的window.name
2）在窗口被关闭前，窗口载入的所有页面同时共享一个window.name，每个页面对window.name都有读写的权限；
3）window.name一直存在与当前窗口，即使是有新的页面载入也不会改变window.name的值；
4）window.name可以存储不超过2M的数据，数据格式按需自定义。

<script>
    function load () {
        var iframe = document.getElementById('iframe');
        iframe.onload = function () {
            var window = iframe .contentWindow;
            console.log(window.name);
        }
        iframe.src = 'about:blank'; //让url地址改变，与当前页面同源,可以任意写，保持同源就好
    }
</script>
<iframe id="iframe" src="https://xxx.github.io/xxx/" onload="load()"></iframe>

　　

 

 

3，window.postMessage

 父向子

 postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送。

var popup = window.open('http://bbb.com', 'title');
popup.postMessage('Hello World!', 'http://bbb.com');

 

 

 子向父

 

window.opener.postMessage('Nice to see you', 'http://aaa.com');

 

 

 父子窗口监听通讯

window.addEventListener('message', function(e) {
  console.log(e.data);
},false);