JavaScript跨域总结

背景

浏览器有一个很重要的概念——同源策略(Same-Origin Policy)。

同源策略是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。实际上，这种策略只是一个规范，并不是强制要求，各大厂商的浏览器只是针对同源策略的一种实现。它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

同源策略规定：不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下，不能读写对方的资源。

什么是同源

定义 ：域名，协议，端口相同。
下表给出了相对http://store.company.com/dir/page.html同源检测的示例:

URL 结果 原 因 http://store.company.com/dir2/other.html 成功 同源 http://store.company.com/dir/inner/another.html 成功 同源 https://store.company.com/secure.html 失败 协议不同 http://store.company.com:81/dir/etc.html 失败 端口不同 http://news.company.com/dir/other.html 失败 主机名不同

特别注意：
在同源问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

需要了解的是浏览器存在2中同源策略:
1. “DOM 同源策略” 负责在不同窗口下通过 DOM 进行读写的部分.
2. “XmlHttpRequest 同源策略”负责不同窗口间的 Ajax 通信.

跨域

1. 绕过”DOM 同源策略”跨域

   • 利用iframe和location.hash

     
     这个办法比较绕，但是可以解决完全跨域情况下的脚步置换问题。原理是利用location.hash来进行传值。在url： http://a.com#helloword中的‘#helloworld’就是location.hash，改变hash并不会导致页面刷新，所以可以利用hash值来进行数据传递，当然数据容量是有限的。
     
     假设域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html传递信息，cs1.html首先创建自动创建一个隐藏的iframe，iframe的src指向cnblogs.com域名下的cs2.html页面，这时的hash值可以做参数传递用。cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据（由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值，所以要借助于a.com域名下的一个代理iframe；Firefox可以修改）。同时在cs1.html上加一个定时器，隔一段时间来判断location.hash的值有没有变化，一点有变化则获取获取hash值。
     
     代码如下：
     先是a.com下的文件cs1.html文件：

     function startRequest(){var ifr = document.createElement('iframe');ifr.style.display = 'none';ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo';document.body.appendChild(ifr);}function checkHash() {try {    var data = location.hash ? location.hash.substring(1) : '';    if (console.log) {        console.log('Now the data is '+data);    }} catch(e) {};}setInterval(checkHash, 2000);

     
     cnblogs.com域名下的cs2.html:
     //模拟一个简单的参数处理操作

     switch(location.hash){case '#paramdo':    callBack();    break;case '#paramset':    //do something……    break;}function callBack(){try {    parent.location.hash = 'somedata';} catch (e) {    // ie、chrome的安全机制无法修改parent.location.hash，    // 所以要利用一个中间的cnblogs域下的代理iframe    var ifrproxy = document.createElement('iframe');    ifrproxy.style.display = 'none';    ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata';    // 注意该文件在"a.com"域下    document.body.appendChild(ifrproxy);}}

     a.com下的域名cs3.html
     因为parent.parent和自身属于同一个域，所以可以改变其location.hash的值

     parent.parent.location.hash = self.location.hash.substring(1);

     优劣
     当然这样做也存在很多缺点，诸如数据直接暴露在了url中，数据容量和类型都有限.

   • window.name实现的跨域数据传输

     
     有三个页面：
     a.com/app.html：应用页面。
     a.com/proxy.html：代理文件，一般是一个没有任何内容的html文件，需要和应用页面在同一域下。
     b.com/data.html：应用页面需要获取数据的页面，可称为数据页面。
     实现起来基本步骤如下：
     应用页面（a.com/app.html）中创建一个iframe，把其src指向数据页面（b.com/data.html）。
     数据页面会把数据附加到这个iframe的window.name上。
     
     data.html代码如下：

     window.name = 'I was there!';    

     这里是要传输的数据，大小一般为2M，IE和firefox下可以大至32M左右数据格式可以自定义，如json、字符串.
     
     在应用页面（a.com/app.html）中监听iframe的onload事件，在此事件中设置这个iframe的src指向本地域的代理文件（代理文件和应用页面在同一域下，所以可以相互通信）。
     
     app.html部分代码如下：

     var state = 0, iframe = document.createElement('iframe'),loadfn = function() {    if (state === 1) {        var data = iframe.contentWindow.name;    // 读取数据        alert(data);    //弹出'I was there!'    } else if (state === 0) {        state = 1;        iframe.contentWindow.location = "http://a.com/proxy.html";    // 设置的代理文件    }  };iframe.src = 'http://b.com/data.html';if (iframe.attachEvent) {    iframe.attachEvent('onload', loadfn);} else {    iframe.onload  = loadfn;}document.body.appendChild(iframe);

     获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）。

     iframe.contentWindow.document.write('');iframe.contentWindow.close();document.body.removeChild(iframe);

     ***优劣***iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。

   • 使用HTML5 postMessage

     
     HTML5中最酷的新功能之一就是 跨文档消息传输Cross Document Messaging。下一代浏览器都将支持这个功能：Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 。 Facebook已经使用了这个功能，用postMessage支持基于web的实时消息传递。
     
otherWindow.postMessage(message, targetOrigin);

     otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性；window.open的返回值；通过name或下标从window.frames取到的值。
     message: 所要发送的数据，string类型。
     targetOrigin: 用于限制otherWindow，“*”表示不作限制

   • document.domain+iframe的设置

     
     对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。具体的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别加上document.domain = ‘a.com’；然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以“交互”了。代码如下：www.a.com上的a.html

     document.domain = 'a.com';var ifr = document.createElement('iframe');ifr.src = 'http://script.a.com/b.html';ifr.style.display = 'none';document.body.appendChild(ifr);ifr.onload = function(){var doc = ifr.contentDocument || ifr.contentWindow.document;alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);};

     script.a.com上的b.html

     document.domain = 'a.com';

     优劣
     当然这种办法只能解决主域相同而二级域名不同的情况，例如用于{www.kuqin.com, kuqin.com, script.kuqin.com, css.kuqin.com}中的任何页面相互通信， 如果你异想天开的把script.a.com的domian设为alibaba.com那显然是会报错地！

2. 绕过“XmlHttpRequest 同源策略”跨域

   • 使用jsonp

     同源策略下，某个服务器是无法获取到服务器以外的数据，但是html里面的img,iframe和script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。而JSONP就是通过script节点src调用跨域的请求。
     当我们向服务器提交一个JSONP的请求时,我们给服务传了一个特殊的参数,告诉服务端要对结果特殊处理一下。这样服务端返回的数据就会进行一点包装，客户端就可以处理。举个例子，服务端和客户端约定要传一个名为callback的参数来使用JSONP功能。比如请求的参数如下:

     http://www.example.net/sample.aspx?callback=mycallback

     如果没有后面的callback参数，即不使用JSONP的模式，该服务的返回结果可能是一个单纯的json字符串，比如：

     { foo : 'bar' }

     如果和服务端约定jsonp格式，那么服务端就会处理callback的参数，将返回结果进行一下处理，比如处理成：

     mycallback({ foo : 'bar' })

     可以看到，这其实是一个函数调用，比如可以实现在页面定义一个名为mycallback的回调函数：

     mycallback = function(data)     {        alert(data.foo);     };

     现在，请求的返回值回去触发回调函数，这样就完了了跨域请求。
     优劣
     JSONP跨域方式比较方便，也支持各种较老的浏览器，但是缺点很明显，他只支持GET的方式提交，不支持其他Post的提交，Get方式对请求的参数长度有限制，在有些情况下可能不满足要求。

   • 表单提交

     通过将需要post的内容写入content的input中，然后点击提交，将form的action设置为目标服务器的url，target设置为iframe的名称，这样就可以实现无刷新的跨域post了，但是由于浏览器防止重复提交的功能，所以如果直接提交到iframe的话，后面你刷新页面的话，浏览器就会提示是否要重复提交，所以这里我们监听iframe的onload事件，当iframe成功load之后，就将iframe的src指向空白页，从而浏览器认为已经跳转到新页面了，刷新也就不会提示重复提交的弹出框了。
     这里我们还可以在iframe load成功的时候，通过contenWindow属性来获取服务器的响应，从而可以判断post是否成功。因为这里要先判断post是否成功，所以在取得了服务器返回的数据之后再设置iframe的src为空白页面，并且将iframe的onload事件取消，否则iframe每次src设置为about：blank都会触发onload事件。

   • 服务端设置

     Access Control是比较超越的跨域方式，目前只在很少的浏览器中得以支持，这些浏览器可以发送一个跨域的HTTP请求（Firefox, Google Chrome等通过XMLHTTPRequest实现，IE8下通过XDomainRequest实现），请求的响应必须包含一个Access-Control-Allow-Origin的HTTP响应头，该响应头声明了请求域的可访问权限。例如www.a.com对www.b.com下的asset.php发送了一个跨域的HTTP请求，那么asset.php必须加入如下的响应头：

     header("Access-Control-Allow-Origin: http://www.a.com");