- 什么是浏览器的同源策略？浏览器为什么要做这个限制？
同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。
怎么区分origin？
同个协议（http,https），同个主机(域名)，同个端口
该方案叫做 协议/主机/端口元组，或者直接叫 元组
如果没有这个限制会发生啥?
A网站的Cookie会共享给其他网站
三种行为受到限制
1.Cookie,LocalStorage和IndexDB无法读取
2.DOM无法获得
3.AJAX请求不能发送
允许嵌入跨源资源的示例
1.<script src="..."></script> 标签嵌入跨域脚本
2.<link rel="stylesheet" href="...">标签嵌入CSS
3.img
4.video\audio
5.object\embed\applet嵌入的插件
6.@font-face引入的字体
7.通过iframe载入任何资源（当然有办法禁止，X-Frame-Options消息头）
Cookie
Cookie是服务器写入浏览器的一小段信息，只同源的网页才能共享。
如果两个页面，一级域名是相同的，只是二级域名不同，可以通过修改document.domain共享Cookie,
注意修改完，端口号也自动变成null
这样这两个页面就同源了，并且共享Cookie.
只适用于Cookie和iframe窗口，LocalStorage和IndexDB无法通过这个方法规避同源政策
也能在服务端设置Cookie的时候，指定Cookie所属域名，domain=.example.com
iframe
如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open打开的窗口，他们与父窗口无法通信。
iframe，当父窗口与子窗口不同源时，两个窗口之间想获取dom会报错
父=》子 document.getElementById('myIframe').contentWindow.document // 报错
子=》父 window.parent.document.body // 报错
解决方法：
1.如果两个窗口跟上面Cookie一样，是相同的一级域名，只是二级域名不同，那么设置document.domain
2.片段标识符
改URL#后面的部分
只改变片段标识符，页面不会重新刷新
子窗口可以通过 hashChange 事件得到通知 window.onhashchange = function(){}
子窗口也可以改变父窗口的片段标识符 parent.location.href = target + '#' + hash;
3.window.name
window.name有个特点，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。并且，容量很大，可以放置非常长的字符串，缺点是必须监听子窗口window.name属性的变化，影响性能。
contentWindow.name
4.跨文档通信API(window.postMessage)
var popup = window.open('http://bbb.com', 'title');
popup.postMessage('Hello World', 'http://bbb.com');
第一个参数是信息内容，第二个参数为接受消息的窗口的源（限制域名，值为*则向所有窗口发送）
接收事件
window.addEventListener('message', function(e) {....}, false)
LocalStorage
还是借助了postMessage
子窗口
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);
};
AJAX
1.架设服务器代理(浏览器请求同源服务器，再由后者请求外部服务)
2.JSONP
3.WebSocket
4.CORS
JSONP
这是利用了script允许跨源
网页发出请求并带上回调函数名（callback=函数名）：
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);
};
服务器接收请求后，将数据放在回调函数的参数位置返回
foo({"ip":"8.8.8.8"});
WebSocket
WebSocket是一种通信协议，使用ws://(非加密)和wss://(加密)作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com
因为有了Origin这个字段，表示该请求的请求源，即发自哪个域名。所以WebSocket才没有实行同源政策。服务器可以根据这个字段，判断是否许可本次通信。
CORS
CORS是跨源资源分享（Cross-Origin Resource Sharing）
总结：
1.同源：同协议，同主机，同端口
2.不同源禁止的行为：DOM,AJAX,COOKIE,LocalStorage
3.允许的嵌入：script,link,video,audio,object,img,iframe
4.iframe,cookie解决方法：(1)window.name(2)hash,onhashchange(3)window.postMessage,window.addEventListener('message')
5.ajax解决方法：(1)代理(2)jsonp(3)webscoket(4)CORS
转载来源
