浏览器的同源政策及其规避方法

含义

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

限制范围

• Cookie、LocalStorage 和 IndexDB 无法读取
• DOM 无法获得
• AJAX 请求不能发送

---

document.domain

• 一级域名相同，二级域名不同

Cookie

• 只有同源的网页才可以共享
• 两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置 document.domain 共享 Cookie
• 适用于 Cookie 和 iframe
• 例
  A 网页：http://w1.example.com/a.html
  B 网页：http://w2.example.com/b.html
  设置相同的 document.domain
  
  A 网页设置一个 Cookie
  
  B 网页读取这个 Cookie
  

iframe

• 如果两个网页不同源，就无法拿到对方的 DOM
• iframe 窗口和 window.open 方法打开的窗口，无法与父窗口通信
• 如果两个窗口一级域名相同，只是二级域名不同，可以通过 document.domain 属性，就可以规避同源政策，拿到DOM
• 用 document.domain + iframe实现跨域

---

完全不同源

片段标识符

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

  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;
  

window.name

• 无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它
• window.name + iframe 解决跨域问题

window.postMessage

使用 window.postMessage 解决窗口间通信

webSocket 解决跨域问题

• WebSocket解决跨域问题

Ajax跨域