关于跨域的理解及方法

作者：黄家兴
链接：https://www.zhihu.com/question/26376773/answer/244453931
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

比较经典的问题了。

看看我们之前的文章

大转转FE - 跨域的那些事儿

前言

最近做项目的时候遇到了一些跨域问题，虽然网上对于跨域的问题分享还挺多的。不过当我实际遇到的时候还是有点懵。趁项目刚上线完，写篇文章总结下。

造成跨域的两种策略

浏览器的同源策略会导致跨域，这里同源策略又分为以下两种

DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。
XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。

只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操作。

为什么要有跨域限制

了解完跨域之后，想必大家都会有这么一个思考，为什么要有跨域的限制，浏览器这么做是出于何种原因呢。其实仔细想一想就会明白，跨域限制主要是为了安全考虑。

AJAX同源策略主要用来防止CSRF攻击。如果没有AJAX同源策略，相当危险，我们发起的每一次HTTP请求都会带上请求地址对应的cookie，那么可以做如下攻击：

用户登录了自己的银行页面 http://mybank.com，http://mybank.com向用户的cookie中添加用户标识。
用户浏览了恶意页面 http://evil.com。执行了页面中的恶意AJAX请求代码。
http://evil.com向http://mybank.com发起AJAX HTTP请求，请求会默认把http://mybank.com对应cookie也同时发送过去。
银行页面从发送的cookie中提取用户标识，验证用户无误，response中返回请求数据。此时数据就泄露了。
而且由于Ajax在后台执行，用户无法感知这一过程。

DOM同源策略也一样，如果iframe之间可以跨域访问，可以这样攻击：

做一个假网站，里面用iframe嵌套一个银行网站 http://mybank.com。
把iframe宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何差别。
这时如果用户输入账号密码，我们的主网站可以跨域访问到http://mybank.com的dom节点，就可以拿到用户的输入了，那么就完成了一次攻击。

所以说有了跨域跨域限制之后，我们才能更安全的上网了。

跨域的解决方式

> 跨域资源共享

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。对于这个方式，阮一峰老师总结的文章特别好，希望深入了解的可以看一下http://www.ruanyifeng.com/blog/2016/04/cors.html。

这里我就简单的说一说大体流程。

对于客户端，我们还是正常使用xhr对象发送ajax请求。
唯一需要注意的是，我们需要设置我们的xhr属性withCredentials为true，不然的话，cookie是带不过去的哦，设置： xhr.withCredentials = true;
对于服务器端，需要在 response header中设置如下两个字段:
Access-Control-Allow-Origin: http://www.yourhost.com
Access-Control-Allow-Credentials:true
这样，我们就可以跨域请求接口了。

> jsonp实现跨域

基本原理就是通过动态创建script标签,然后利用src属性进行跨域。

这么说比较模糊，我们来看个例子:

// 定义一个fun函数 function fun(fata) {     console.log(data); }; // 创建一个脚本，并且告诉后端回调函数名叫fun var body = document.getElementsByTagName('body')[0]; var script = document.gerElement('script'); script.type = 'text/javasctipt'; script.src = 'demo.js?callback=fun'; body.appendChild(script);

返回的js脚本，直接会执行。所以就执行了事先定义好的fun函数了，并且把数据传入了进来。

fun({"name": "name"})

当然，这个只是一个原理演示，实际情况下，我们需要动态创建这个fun函数，并且在数据返回的时候销毁它。

因为在实际使用的时候，我们用的各种ajax库，基本都包含了jsonp的封装，不过我们还是要知道一下原理，不然就不知道为什么jsonp不能发post请求了~

> 服务器代理

浏览器有跨域限制，但是服务器不存在跨域问题，所以可以由服务器请求所要域的资源再返回给客户端。

服务器代理是万能的。

> document.domain来跨子域

对于主域名相同，而子域名不同的情况，可以使用document.domain来跨域这种方式非常适用于iframe跨域的情况，直接看例子吧比如a页面地址为 http://a.yourhost.com b页面为 http://b.yourhost.com。这样就可以通过分别给两个页面设置 document.domain = http://yourhost.com 来实现跨域。之后，就可以通过 parent 或者 window[‘iframename’]等方式去拿到iframe的window对象了。

使用window.name进行跨域

window.name跨域同样是受到同源策略限制，父框架和子框架的src必须指向统一域名。window.name的优势在于，name的值在不同的页面(或者不同的域名)，加载后仍然存在，除非你显示的更改。并且支持的长度达到2M.

//a页面的代码 <script type="text/javascript">    iframe = document.createElement('iframe');    iframe.style.display = 'none'; var state = 0;     iframe.onload = function() { if(state === 1) { var data = iframe.contentWindow.name;          console.log(data);          iframe.contentWindow.document.write('');          iframe.contentWindow.close();          document.body.removeChild(iframe);      } else if(state === 0) {          state = 1;          iframe.contentWindow.location =           'http://m.zhuanzhuan.58.com:8887/b.html';      }    };    document.body.appendChild(iframe); </script>

//b页面代码 <script type="text/javascript">    window.name = "hello"; </script>

> location.hash跨域

location.hash方式跨域，是子框架具有修改父框架src的hash值，通过这个属性进行传递数据，且更改hash值，页面不会刷新。但是传递的数据的字节数是有限的。

//a页面的代码 <script type="text/javascript">    iframe = document.createElement('iframe');    iframe.style.display = 'none'; var state = 0;     iframe.onload = function() { if(state === 1) { var data = window.location.hash;          console.log(data);          iframe.contentWindow.document.write('');          iframe.contentWindow.close();          document.body.removeChild(iframe);      } else if(state === 0) {          state = 1;          iframe.contentWindow.location =           'http://m.zhuanzhuan.58.com:8887/b.html';      }    };    document.body.appendChild(iframe); </script>

//b页面代码 <script type="text/javascript">    parent.location.hash = "world"; </script>

> 使用postMessage实现页面之间通信

信息传递除了客户端与服务器之前的传递，还存在以下几个问题：

页面和新开的窗口的数据交互。
多窗口之间的数据交互。
页面与所嵌套的iframe之间的信息传递。

window.postMessage是一个HTML5的api，允许两个窗口之间进行跨域发送消息。这个应该就是以后解决dom跨域通用方法了，具体可以参照MDN。

补充：其实还有一些方法，比如window.name和location.hash。就很适用于iframe的跨域，不过iframe用的比较少了，所以这些方法也就有点过时了。

写了一些简单的小demo，可以快速入门跨域。跨域demo包括CORS、JSONP、Proxy后端代理、html5新特性postMessage、window.name、location.hash、document.domain、websocket。

https://github.com/FatDong1/cross-domain

这些就是我对跨域的了解了，实际情况下，一般用cors，jsonp等常见方法就可以了。不过遇到了一些非常规情况，我们还是需要知道有更多的方法可以选择的

标签

iframe

脚本

ajax

contentwindow