学习来自阮一峰的文章,本文只作为自己的总结和复习用.

概述

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

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

它的含义是指，A 网页设置的 Cookie，B 网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"。

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

例如:http://www.example.com/dir/page.html

  • http://www.example.com/dir2/other.html：同源
  • http://example.com/dir/other.html：不同源（域名不同）
  • http://v2.www.example.com/dir/other.html：不同源（域名不同）
  • http://www.example.com:81/dir/other.html：不同源（端口不同）

限制范围

目前，如果非同源，共有三种行为受到限制

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

A 网页是http://w1.example.com/a.html， B 网页是http://w2.example.com/b.html， 那么只要设置相同的 document.domain，两个网页就可以共享 Cookie。

document.domain = 'example.com';
1

注意，这种方法只适用于 Cookie 和 iframe 窗口，LocalStorage 和 IndexDB 无法通过这种方法，规避同源政策，而要使用下文介绍的 PostMessage API。

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

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

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

iframe 和窗口不同源

如果两个网页不同源，就无法拿到对方的 DOM。典型的例子是 iframe 窗口和 window.open 方法打开的窗口，它们与父窗口无法通信。

比如，父窗口运行下面的命令，如果 iframe 窗口不是同源，就会报错。

document.getElementById('myIFrame').contentWindow.document;
// Uncaught DOMException: Blocked a frame from accessing a cross-origin frame.
1
2

反之亦然，子窗口获取主窗口的 DOM 也会报错。

window.parent.document.body;
// 报错
1
2

document.domain

如果两个窗口一级域名相同，只是二级域名不同，那么设置上一节介绍的 document.domain 属性，就可以规避同源政策，拿到 DOM。

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

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

片段识别符(hash)

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

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

var src = originURL + '#' + data;
document.getElementById('myIFrame').src = src;
1
2

子窗口通过监听 hashchange 事件得到通知。

window.onhashchange = checkMessage;

function checkMessage() {
  var message = window.location.hash;
  // ...
}
1
2
3
4
5
6

同样的，子窗口也可以改变父窗口的片段标识符。

parent.location.href = target + '#' + hash;
1

window.name

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

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

window.name = data;
1

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

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

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

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

这种方法的优点是，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');
1
2

postMessage 方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送。

子窗口向父窗口发送消息的写法类似。

window.opener.postMessage('Nice to see you', 'http://aaa.com');
1

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

window.addEventListener(
  'message',
  function(e) {
    console.log(e.data);
  },
  false
);
1
2
3
4
5
6
7

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

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

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));
};
1
2
3
4
5
6
7

上面代码中，子窗口将父窗口发来的消息，写入自己的 LocalStorage。

父窗口发送消息的代码如下。

var win = document.getElementsByTagName('iframe')[0].contentWindow;
var obj = { name: 'Jack' };
win.postMessage(
  JSON.stringify({ key: 'storage', data: obj }),
  'http://bbb.com'
);
1
2
3
4
5
6

加强版的子窗口接收消息的代码如下。

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;
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

加强版的父窗口发送消息代码如下。

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);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

AJAX 不同源

除了架设服务器代理（浏览器请求同源服务器，再由后者请求外部服务），有三种方法规避 AJAX 跨域。

  • JSONP
  • WebSocket
  • CORS

AJAX 跨域另起文章详细总结

TOC