同源政策学习笔记

来自：阮一峰：浏览器同源政策及其规避方法

• 同源政策由网景公司引入浏览器，目前所有浏览器都实行这个政策。
• 同源指“三个相同”：

1. 协议相同
2. 域名相同
3. 端口相同

• 非同源有三种行为受限制：

1. Cookie、LocalStorage和IndexDB无法读取；
2. DOM无法获得
3. AJAX请求不能发送

• 同源政策保护了用户信息安全，防止恶意网络窃取数据，是必要的，但有时也会影响合理用途，所以有时可以采取规避方法：

1. 两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置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=/

2. 对于完全不同源的网站，目前有三种方法解决跨域窗口的通信问题：
   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

1. 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)
}

2. WebSocket
   WebSocket是通信协议，协议前缀有ws://(非加密)和wss://(加密)，不实行同源政策，可以跨源通信。
3. CORS
   CORS(Cross-Origin Resource Sharing)，跨源资源分享，是W3C标准，属于跨源AJAX请求的根本解决方法。JSONP只能发GET请求，CORS允许任何类型请求。