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 通信.

跨域

绕过”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那显然是会报错地！

绕过“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");[/code]