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=/

---

• 場景：

  • 完全不同源的網站，需要視窗通訊

• 方案：

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

---

• 場景：

  • AJAX請求非同源地址

• 方案：

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

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