一. 概述
- 含义
1995年，同源政策由Netscape公司引入浏览器。目前所有浏览器都实行这个政策。
最初,它的含义是指，A网页设置的cookie,B网页不能访问，除非它们同源。同源指的是协议，域名，端口都相同 - 目的
同源策略的目的，是为了保护用户的信息安全，防止恶意网站窃取数据。
设想一种清空，A网站是一家银行，用户登录后，又去浏览其他的网站，如果其他网站可以读取A网站的Cookie，会发生什么？很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。
由此可见，同源策略是必须的，否则cookie可以共享，互联网就毫无安全可言了。 - 限制范围
随着互联网的发展，同源策略越来越严格，目前，如果非同源，共有3中行为受到限制。
1. Cookie,LocalStorage,IndexDB 无法读取
2. DOM无法获取
3. AJAX请求不能发送
虽然这些限制是必要的，但是有时很不方便，合理的用途也受到影响。如何规避上面三种限制呢？
二. Cookie
Cookie是服务器写入浏览器的一小段信息，同源页面可以共享。但是，两个网页一级域名相同，二级域名不同,浏览器允许通过设置 document.domain来共享 Cookie
举例 A网页是 http://w1.example.com/a.html，B网页是 http://w2.example.com/b.html，只要设置相同的document.domain，两个网页就可以共享Cookie
document.domain = 'example.com'
A网页设置Cookie
document.cookie = 'test1=hello'
B网页就可以获取到这个Cookie
var allCookie = document.cookie
注意这种方法只适用于Cookie和iframe窗口，LocalStorage和IndexDB无法通过这种方式规避同源政策，而要使用下边要介绍的 PostMessageAPI
另外，服务器在设置Cookie的时候，也可以指定Cookie的所属域名为一级域名。比如.example.com
Set-Cookie :key=value;domain=.example.com;path=/
这样的话，二级域名和三级域名不用做任何设置，都可以读取整个cookie
三. iframe
如果两个网页不同源，就无法拿到对方的DOM，典型的例子就式 iframe窗口和window.open打开的窗口，它们无法与父窗口通信。
比如，父窗口运行下面的命令，如果iframe窗口不是同源，就会报错。
document.getElementById('myIframe').contentWindow.document
// Uncaught DOMException: Blocked a frame from accessing a cross-origin frame.
上面命令中，父窗口想要获取子窗口的DOM，因为跨域导致报错。
反之亦然，子窗口想要获取父窗口的DOM，也会报错
window.parent.document.body
如果两个窗口，一级域名相同，二级域名不同，那么设置document.domain就可以规避同源政策。拿到DOM
对于完全不同源的网站，目前有3种方法，可以解决跨域通信的问题
1. 片段识别符（fragment identifier）
2. window.name
3. 跨文档通信API（Cross-document messaging）
- 片段识别符
片段识别符指的是URL #后边的部分，比如 http://example.com/x.html#fragment的#fragment。如果知识改变片段标识符，页面不会重新刷新。
父窗口可以把信息，写入子窗口的片段标识符
var src = originURL+ '#' + data
document.getElementById('myiframe').src = src
子窗口通过监听hashchange事件得到通知
window.onhashchange = checkMessage
function checkMessage(){
var message = window.location.hash
// ...
}
同样，子窗口也可以改变父窗口的hash
parent.location.href = target+ '#' + hash
- window.name
浏览器窗口，有window.name属性。这个属性最大的特点是，无论是否同源，只要在同一个窗口里，前一个页面设置了这个属性，后一个页面可以读取它
父窗口先打开已给子窗口，载入一个不同源的网页，该网页将信息写入window.name属性
window.name = data
接着子窗口跳回一个与主窗口同域的网址。
location =' http://parent.url.com/xxx.html'
然后主窗口，就可以读取子窗口的 window.name了
var data = document.getElementById('myiframe').contentWindow.name
这种方法的优点是，window.name的容量很大，可以放置非常长的字符串；缺点是必须监听子窗口的window.name属性的变化，影响网页性能
- window.postMessage
上面两种方式都属于破解，HTML5为了解决这个问题，引入了一个全新的API：跨文档通信 API（Cross-document messaging）
这个API，为window对象新增了一个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 meet you','http://aaa.com')
父窗口和子窗口，都可以通过message事件，来监听对方的信息
window.addEventListener('message',function(e){
console.log(e.data)
},false)
message事件的事件对象 event,有以下3个属性
1. event.source 发送消息的窗口
2. event.origin 消息发向的网址
3. event.data 消息内容
下面的例子是，子窗口通过event.source属性引用父窗口，然后发送消息。
window.addEventListener('message',receiveMessage)
function receiveMessage(event){
if(event.origin !== 'http://aaa.com') return;
if(event.data === 'hello world '){
event.source.postMessage('hello',event.origin)
}else {
console.log(event.data)
}
}
- LocalStorage
通过window.postMessage，读写其他窗口的LocalStorage也成为了可能
下面是一个例子，主窗口写入iframe子窗口的 localStorage
window.onmessage = function(e){
if(e.origin !== 'http://bbb.com') {
return
}
var payLoad = JSON.parse(e.data)
localStorage.setItem(payLoad.key,JSON,stringify(payLoad.data))
}
上面代码中，子窗口将父窗口发来的消息，写入自己的LocalStorage。
父窗口发送消息的代码如下。
var win = document.getElementByTagName('iframe')[0].contentWindow
var obj = {name:'jack'}\
win.postMessage(JSON.stringify({key:'storage',data:obj}),'http://bbb.com')
加强版的子窗口接收消息的代码如下。
window.onmessage = function(e) {
if (e.origin !== 'http://bbb.com') return;
var payload = JSON.parse(e.data);
switch (payload.method) {
case 'set':
localStorage.setItem(payload.key, JSON.stringify(payload.data));
break;
case 'get':
var parent = window.parent;
var data = localStorage.getItem(payload.key);
parent.postMessage(data, 'http://aaa.com');
break;
case 'remove':
localStorage.removeItem(payload.key);
break;
}
};
加强版的父窗口发送消息代码如下。
var win = document.getElementsByTagName('iframe')[0].contentWindow;
var obj = { name: 'Jack' };
// 存入对象
win.postMessage(JSON.stringify({key: 'storage', method: 'set', data: obj}), 'http://bbb.com');
// 读取对象
win.postMessage(JSON.stringify({key: 'storage', method: "get"}), "*");
window.onmessage = function(e) {
if (e.origin != 'http://aaa.com') return;
// "Jack"
console.log(JSON.parse(e.data).name);
};
四. AJAX
同源政策规定，AJAX请求只能发送给同源的网址，否则就报错。
除了架设服务器代理(浏览器请求同源服务器，然后再由后者请求外部服务器),还有3种方法规避同源政策的限制
1. JSONP
2. WebSocket
3. CORS
- JSONP
JSONP是服务端和客户端跨源通信的常用方法。最大的特点是简单适用，老式浏览器全部支持，服务器改造非常小
它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策的限制。服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
首先，网页动态插入<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)
}
上面代码通过动态添加<script>元素，向服务器example.com发出请求。注意，该请求的查询字符串有一个callback参数，用来指定回调函数的名字，这对于JSONP是必需的。
服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。
foo({
"ip":"8.8.8.8"
})
由于<script>元素请求的脚本，直接作为代码运行。这时只要浏览器定义了 foo函数，该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象，而不是字符串。因此避免了使用JSON.parse的步骤
- WebSocket
WebSocket是一种通信协议，使用ws://非加密和wss://加密作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨域通信。
下面是一个例子，浏览器发出 WebSocket请求的头信息
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com
上面代码中，有一个字段是Origin，表示该请求的请求源（origin），即发自哪个域名。
正是因为有了Origin这个字段，所以WebSocket才没有实行同源政策。因为服务器可以根据这个字段，判断是否许可本次通信。如果该域名在白名单内，服务器就会做出如下回应。
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
- CORS
CORS跨域资源共享（Cross-Origin Resource Sharing）的缩写。它是W3C的标准，是跨域AJAX请求的根本解决方法，相比JSONP只能发GET请求，CORS允许任何类型的请求
From：阮一峰的网络日志
网友评论