浏览器的同源限制解决方案

2019独角兽企业重金招聘Python工程师标准>>>

1.对于不同的二级域名中的cookie共享
php中的setcookie函数的第四个参数，只写一级域名即可，如：

 setcookie('key', $value, $ttl, '.baidu.com');

2.网页中用iframe嵌入一个不同源的网页
不同源则双方无法拿到对方的dom,即下面的语句会报错：

document.getElementById("myIFrame").contentWindow.document;

方法一：利用js设置document.domain 实现跨域，前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则会报"参数无效错误。"。
比如在：aaa.com的一个网页(a.html)里面利用iframe引入了bbb.com里的一个网页(b.html)。
这时在a.html里面可以看到b.html里的内容，但是却不能利用javascript来操作它。因为这两个页面属于不同的域，在操作之前，js会检测两个页面的域是否相等，如果相等，就允许其操作，如果不相等，就会拒绝操作。
这里也不可能把a.html与b.html利用JS改成同一个域的。因为它们的基础域名不相等。(强制用JS将它们改成相等的域的话会报"参数无效错误。")
有另一种情况，两个子域名：
　　aaa.xxx.com
　　bbb.xxx.com
aaa里的一个网页(a.html)引入了bbb 里的一个网页(b.html)，这时a.html里同样是不能操作b.html里面的内容的。因为document.domain不一样，一个是aaa.xxx.com，另一个是bbb.xxx.com。这时我们就可以通过Javascript，将两个页面的domain改成一样的，需要在a.html里与b.html里都加入代码如下:

document.domain = "xxx.com";

这样这两个页面就可以互相操作了。也就是实现了同一基础域名之间的"跨域"。

方法二：如果只是想在两个窗口间传递数据，可以利用url中的hash
父窗口可以把信息，写入子窗口的hash中：

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

子窗口通过监听hashchange事件得到通知，获取数据：

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

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

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

 

方法三：利用html5提供的接口方法window.postMessage，在跨窗口通信中，允许这两个窗口不同源。
父窗口http://aaa.com向子窗口http://bbb.com发消息，调用postMessage方法就可以了：

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

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

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

父窗口和子窗口都可以通过message事件，监听对方的消息：

    window.addEventListener('message', function(e) {
      console.log(e.data);
    },false);
    //message事件的事件对象event，提供以下三个属性:
    //event.source：发送消息的窗口
    //event.origin: 消息发向的网址
    //event.data: 消息内容

3.通过ajax向不同的源请求数据
方法一：JSONP
它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。但是它只能发送GET请求。
首先，网页动态插入<script>元素，由它向跨源网址发出请求：

    function addScriptTag(src) {
      var script = document.createElement('script');
      script.setAttribute("type","text/javascript");
      script.src = src;
      document.body.appendChild(script);
    }

    window.onload = function () {
      addScriptTag('http://example.com/ip?callback=foo');
    }

    function foo(data) {
      console.log('Your public IP address is: ' + data.ip);
    };

服务器收到这个请求以后，会将数据放在回调函数的参数位置，以字符串的形式返回：

    echo 'foo({
      "ip": "8.8.8.8"
    })';

由于<script>元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了foo函数，该函数就会立即执行。

方法二：CORS

比较复杂 http://www.ruanyifeng.com/blog/2016/04/cors.html

转载于:https://my.oschina.net/codespring/blog/715725