跨域 - 浏览器的同源政策及其规避方法 - 《JavaScript》

1. 概述
2. Cookie
3. iframe
4. AJAX
5. 实现跨域

浏览器安全的基石是“同源政策”（same-origin policy），很多开发者都知道，但了解的不全面。

本文详细介绍“同源政策”的各个方面，以及如何规避它。

本文引自：浏览器同源政策及其规避方法

1. 概述

1.1 含义

1995 年，同源政策由 NetScape 公司引入浏览器。目前所有的浏览器都实行这个政策。

最初，它的含义是指，A 网页设置的 Cookie，B网页不能打开，除非这两个网页“同源”。所谓“同源”指的是：

协议相同
域名相同
端口相同

举例来说，http://www.example.com/dir/page.html 这个网址，协议是 http://，域名是 www.example.com，端口是 80（默认端口可以省略）。

1.2 目的

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？

很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。

由此可见，”同源政策”是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。

1.3 限制范围

随着互联网的发展，“同源政策”越来越严格。目前，如果非同源，共有三种行为受到限制。

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

2. Cookie

Cookie 是服务器写入浏览器的一小段信息，只有同源的网页才能共享。但是，两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置 document.domain 共享 Cookie。

举例来说，A 网页是 http://wl.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 无法通过这种方法，规避同源政策，而要使用下文介绍的PostMessage API。

另外，服务器也可以在设置Cookie的时候，指定Cookie的所属域名为一级域名，比如.example.com。

Set-Cookie: key=value; domain=.example.com; path=/

这样的话，二级域名和三级域名不用做任何设置，都可以读取这个Cookie。

3. 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。

对于完全不同源的网站，目前有三种方法，可以解决跨域窗口的通信问题。

片段标识符（fragment identifier）
window.name
跨文档通信 API（Cross-document messaging）

3.1 片段标识符

片段识别符指的是，URL 的 # 号后面的部分，比如 http://example.com/x.html#fragment 的 #feagment。如果只是改变片段标识符，页面不会重新刷新。

父窗口可以把信息写入子窗口的片段标识符。

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;

3.2 window.name

浏览器窗口有 window.name 属性。这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页就可以读取它。

父窗口先打开一个子窗口，载入一个不同源的网页，该网页将信息写入 window.name 属性。

window.name = data;

接着，子窗口调回一个与主窗口同源的网址。

location = 'http://parent.url.com/xxx.html';

然后，主窗口就可以读取子窗口的 window.name 了。

var data = document.getElementById('myFrame').contentWindow.name;

这个方法的优点是，window.name 容量很大，可以放置非常长的字符串；缺点是必须监听子窗口 window.name 属性的变化，影响网页性能。

3.3 window.postMessage

上面两种方法都属于破解，HTML5 为了解决这个问题，引入了新的 API：跨文档通信 API（Cross-document messageing）。

这个 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 see you', 'http://aaa.com');

父窗口和子窗口都可以通过 message 事件，监听对方的消息。

window.addEventListener('message', function(e) {
  console.log(e.data);
},false);

message 事件的事件对象 event，提供以下三个属性。

event.source：发送消息的窗口
event.origin: 消息发向的网址
event.data: 消息内容

下面的例子是，子窗口通过event.source属性引用父窗口，然后发送消息。

window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
  event.source.postMessage('Nice to see you!', '*');
}

event.origin 属性可以过滤不是发给本窗口的消息。

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);
  }
}

3.4 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.getElementsByTagName('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);
};

4. AJAX

同源政策规定，AJAX 请求只能发给同源的网址，否则会报错。

5. 实现跨域

JSONP
WebSocket
CORS
postMessage
document.domain
window.name
location.hash
http-proxy
nginx