- 同源政策由网景公司引入浏览器，目前所有浏览器都实行这个政策。
- 同源指“三个相同”：
- 协议相同
- 域名相同
- 端口相同
- 非同源有三种行为受限制：
- Cookie、LocalStorage和IndexDB无法读取；
- DOM无法获得
- AJAX请求不能发送
- 同源政策保护了用户信息安全，防止恶意网络窃取数据，是必要的，但有时也会影响合理用途，所以有时可以采取规避方法：
- 两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置
document.domain共享Cookie。
例如，A网页是http://w1.example.com/a.html，B网页是http://w2.example.com/b.html，设置相同
document.domain
document.domain = 'example.com';
A网页通过脚本设置一个Cookie
document.cookie = "test1=hello";
B网页就可以读到这个Cookie
- 注意，该方法只适用于Cookie和iframe窗口，LocalStorage和IndexDB不行。
另外，也可以指定Cookie的所属域名为一级域名，这样二、三级域名不做设置都可以读取这个Cookie：
Set-Cookie: key=value;domain=.example.com;path=/
- 对于完全不同源的网站，目前有三种方法解决跨域窗口的通信问题：
i. 片段识别符（fragment identifier）
ii. window.name
iii. 跨文档通信API（Cross-document messaging）
2.1 片段识别符是URL#号后面的部分，只改变片段识别符，页面不会刷新。
// 父窗口把信息写入子窗口的片段识别符
var src = originURL + '#' +data;
document.getElementById('myIFrame').src = src;
// 子窗口通过监听hashchange事件得到通知
window.onhashchange = checkMessage;
function checkMessage() {
var message = window.location.hash;
//...
}
// 同样子窗口也可以改变父窗口的片段识别符
parent.location.href = target + "#" +hash;
2.2 浏览器窗口有window.name属性，特点是无论是否同源，只要在同一个窗口，前一个网页设置了该属性，后一个网页就可以读取它。
// 父窗口
2.3 HTML5引入一个新的API：跨文档通信API（Cross-document messaging）。这个API为window对象新增一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。
// 父窗口打开一个子窗口
var popup = window.open('http://bbb.com','title');
// 父窗口向子窗口发消息
popup.postMessage('Hello Worlad!','http://bbb.com');
postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源(origin)，即“协议+域名+端口”，也可以设为“*”，表示不限域名，向所有窗口发送。
// 子窗口向父窗口发消息也类似
window.opener.postMessage('Hi!','http://aaa.com');
// 父窗口和子窗口都可以通过message事件监听对方消息
window.addEventListener('message',function(e) {
console.log(e.data)
},false)// 默认false，false表示句柄在冒泡阶段执行，true表示句柄在捕获阶段执行。
message事件的参数是事件对象event，提供三个属性：
i. event.source：发送消息的窗口
ii. event.origin：消息发向的窗口
iii. event.data：消息内容
- AJAX
同源政策，AJAX请求只能发给同源网址，否则报错。
除了架设服务器代理（浏览器请求同源服务器，再由后者请求外部服务），有三种方法规避这个限制：
i. JSONP
ii. WebSocket
iii. CORS
- JSONP
JSONP是服务器与客户端跨源通信的常用方法，简单适用，老浏览器也支持。
基本思想是，通过<script>向服务器请求JSONP数据，不受同源政策限制；服务器受到请求后，将数据放在指定名字的回调函数传回来。
首先，网页动态插入<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)
}
- WebSocket
WebSocket是通信协议，协议前缀有ws://(非加密)和wss://(加密)，不实行同源政策，可以跨源通信。 - CORS
CORS(Cross-Origin Resource Sharing)，跨源资源分享，是W3C标准，属于跨源AJAX请求的根本解决方法。JSONP只能发GET请求，CORS允许任何类型请求。
