同源策略

什么是同源策略

同源策略的含义是指，A页面的cookie，B页面不能打开，除非这两个页面同源，所谓“同源”指的是“三个相同”

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

同源策略的目的

同源策略的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据
设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？
很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。
由此可见，"同源政策"是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。

同源策略限制范围

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

Cookie、LocalStorage和indexDB无法访问
DOM无法获得
AJAX请求不能被发送
虽然这些限制是必要的，但是有时很不方便，合理的用途也受到影响。

破解同源策略的方案

jsonp （利用script不受同源策略限制的特性）
iframe （window.PostMessage + iframe）
WebSocket (不受同源策略的限制)
cors 跨资源分（主要在与服务器的支持）

不受同源策略的限制的html标签

img标签
link标签
script标签
css的background等等也可以跨域（xss攻击）

一级页面相同，二级页面不同，如何共享Cookie

虽然同源策略规定协议、端口、域名必须相同，但是浏览器允许使用document.domain来共享Cookie信息
例如：A页面http://a.xxx.com B页面http://b.xxx.com 只要两个页面设置相同的document.domain就可以共享cookie
这种方法只适用于cookie和iframe窗口，lockSLocalStorage和indexDB不能使用，规避同源策略需要使用PostMessage API

window.PostMessage 方法规避同源策略

为了解决同源策略，HTML5引入了一个全新的APICross-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），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送

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

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

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

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

修改LocalStorage,子窗口将父窗口发来的消息，写入自己的LocalStorage。

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

jsonp

网页通过添加一个script元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

WebSocket

WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。

CORS

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。