FE.B-理解瀏覽器的同源策略與跨域方案

同源

概念：協議，域名，端口 相同。
目的：保證用戶信息的安全，防止惡意的網站竊取數據。
限制的行爲：

• Cookie、LocalStorage 和 IndexDB 沒法讀取。
• DOM 沒法得到。
• AJAX 請求不能發送。

跨域

1. 資源跳轉： A連接、重定向、表單提交
2. 資源嵌入： <link>、<script>、<img>、<frame>等dom標籤，還有樣式中background:url()、@font-face()等文件外鏈
3. 腳本請求： js發起的ajax請求、dom和js對象的跨域操做等

解決方案

• 場景：

  • 兩個網頁一級域名相同，二級域名不一樣，須要共享 Cookie
  • iframe窗口和window.open的窗口，須要與父窗口通訊。

• 方案：

  • 瀏覽器設置一級域名。document.domain = 'example.com';
  • 服務器設置一級域名。Set-Cookie: key=value; domain=.example.com; path=/
  • MessageChannel

---

• 場景：

  • 徹底不一樣源的網站，須要窗口通訊

• 方案：

  • 父子窗口（互相）寫location.hash,（互相）監聽hashchange
  • 子窗口寫window.name後跳回同域,父窗口讀window.name
  • 瀏覽器跨文檔通訊 window.postMessage

---

• 場景：

  • AJAX請求非同源地址

• 方案：

  • 架設服務器代理
  • JSONP
  • WebSocket
  • CORS

參考資料
瀏覽器同源政策及其規避方法 - 阮一峯
前端常見跨域解決方案（全）
跨域幾種方式