本文github鏈接：https://github.com/sky0014/blog/blob/main/cross-origin-isolation.md
Chrome92開始，如想使用SharedArrayBuffer對象，需對網站進行跨域隔離（Cross Origin Isolation），本文將描述如何進行跨域隔離及對其的一些思考。
開啟跨域隔離
在HTML Document請求返回中，增加兩個header：
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
此時即對當前頁面開啟了跨域隔離，可以通過如下代碼檢測：
if (self.crossOriginIsolated) { // 成功開啟，可以使用SharedArrayBuffer等API } else { // 未開啟 }
這就完了嗎？事情當然沒有那么簡單。一般情況下，此時你的頁面上會報出大量的跨域相關錯誤，js/css/png等各種都有，只要是第三方域名鏈接的地址，都可能報錯。
處理這些跨域錯誤，才是真正麻煩的地方，也是最容易導致故障的地方。
在devtool中，發生跨域錯誤的請求，會有如下展示：
處理跨域報錯
要解決這個問題，無論是何種鏈接，都可以按照下面的方法處理，以js為例：
-
聲明為跨域資源，有兩種操作方式，任取其一：
- 在html tag上增加
crossorigin屬性<!--before--> <script src="a.js"></script> <!--after--> <script src="a.js" crossorigin></script> - 在資源http返回頭中增加：
cross-origin-resource-policy:cross-origin
- 在html tag上增加
-
資源增加跨域頭
// 使用*允許所有域名，或者只允許你需要的域名，只能寫一個域名，不能有通配符，如有多個域名可通過腳本控制返回
Access-Control-Allow-Origin:https://www.example.com
這個大家應該都很熟悉了，只不過以前js/css/png這些資源都是不檢測跨域的，但是如果開啟了跨域隔離，這些資源都會變得跟其他資源一樣需要進行跨域檢測。
這也就意味着，需要梳理所有頁面上可能引用到的第三方資源地址，並在客戶端或服務端都進行上述處理，對於現代大型網站來說，這是一項非常艱巨的工作，特別是可能還大量的使用了雲、CDN等資源，溝通處理起來會更麻煩。
個人理解
18年1月，著名的Spectre和Meltdown安全漏洞被公布，他們利用的是CPU架構上的漏洞進行攻擊，不更新硬件很難解決。
在網頁中，可以利用高精度計時器和SharedArrayBuffer發起攻擊，因此，Chrome曾經禁用過相關API一段時間，避免遭受攻擊。
現在，他們通過跨域隔離，嘗試在提供相關API能力的同時，又能解決安全問題。
假如網站evil.com想要發起攻擊，那么首先他需要聲明自己進行跨域隔離，跨域隔離之后，訪問所有的第三方資源都需要對方服務器的授權，如第三方未授權，則無法訪問，因此也無法收到攻擊。但是假如第三方跨域頭配置的是*號（很常見），則仍然有可能遭受攻擊。
跨域隔離簡單來說就是對當前頁面進行強約束，所有第三方資源都需要授權，從而保障自身有比較高的安全性，這種安全環境下，允許開發者使用SharedArrayBuffer等API。