浏览器同源策略

同源策略

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

同源策略的目的

保护用户信息的安全，防止恶意的网站窃取信息

同源策略主要有三种行为受到限制

1. cookie、localstorage、indexDB无法读取
2. 无法操作DOM
3. AJAX请求不能发送

合理的用途也受到限制，如何规避上述三种限制

一、cookie

Cookie 是服务器写入浏览器的一小段信息，只有同源的网页才能共享。但是，两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置document.domain共享 Cookie。
注意：这个方法只适用于cookie和iframe窗口，localstorage和indexDB无法通过这种方法，规避同源策略，而要使用postMessage API。
另外，服务器也可以在设置cookie的时候，指定cookie的所属域名为一级域名。这样的话，二级域名和三级域名不用做任何设置，都可以读取这个cookie

三、iframe

如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。
如果两个窗口一级域名相同，只是二级域名不同，那么设置上一节介绍的document.domain属性，就可以规避同源政策，拿到DOM。
对于完全不同源的网站，目前有三种方法，可以解决跨域窗口的通信问题。

1. 片段识别符（fragment identifier）
   片段标识符（fragment identifier）指的是，URL的#号后面的部分，比如http://example.com/x.html#fragment的#fragment。如果只是改变片段标识符，页面不会重新刷新
2. window.name
   浏览器窗口有window.name属性。这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。
   这种方法的优点是，window.name容量很大，可以放置非常长的字符串；缺点是必须监听子窗口window.name属性的变化，影响网页性能。
3. 跨文档通信API（Cross-document messaging）
   上面两种方法都属于破解，HTML5为了解决这个问题，引入了一个全新的API：跨文档通信 API（Cross-document messaging）。
   这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。
   postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送。
   message事件的事件对象event，提供以下三个属性。

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

四、AJAX

同源策略规定，AJAX请求只能发送给同源的网址，否则就报错
除了假设服务器代理（浏览器请求同源服务器，再由后者请求外部服务），有三种方法规避这个限制

• JSONP
• WebSocket
• CORS
  1、JSONP
  JSONP是服务器与客户端跨源通信的常用方法。最大特点是简单适用，老式浏览器全部支持，服务器改在非常小
  它的基本思想是，网页通过添加一个