登录开启 Cross-Origin Isolation 后，我的网站"社会性死亡"了
最近在折腾 AudioWorklet + SharedArrayBuffer 的极致优化，被迫卷入了浏览器最底层的 Spectre 漏洞防御机制。MDN 说开启 COOP/COEP 是"最佳实践"，Chrome 控制台也在疯狂警告——不开就用不了 SharedArrayBuffer。于是我就开了。
然后网站炸了。
OAuth 登录白屏。Google Analytics 静默死亡。CDN 图片全黑屏。不是 Bug，是隔离的物理代价。
如果你也在折腾 Next.js 性能优化或者 SharedArrayBuffer，这篇避坑指南可能会帮你省下 3 天的排查时间。
0. 动机
我在做 AudioWorklet + SharedArrayBuffer 的无锁通信。SAB 是唯一能让主线程和音频线程共享内存的原生方案——没有它，每帧都要 postMessage 序列化，延迟直接翻倍。
但 SAB 有个前提：浏览器要求页面必须开启 Cross-Origin Isolation。也就是在响应头里加上：
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
MDN 说这是"最佳实践"。Chrome 的控制台也在疯狂警告你不开就用不了 SAB。于是我就开了。
然后网站炸了。
1. 社会性死亡现场
1.1 OAuth 登录阵亡
GitHub OAuth 弹窗登录，点完授权，回调页面白屏。window.opener 是 null。
原因很简单：COOP: same-origin 会切断跨域窗口之间的引用。你的 OAuth 弹窗和主页面不同源，window.opener 直接被浏览器置空。授权码拿不回来，登录流程断裂。
这不是 Bug，是隔离的物理代价。
1.2 第三方 SDK 变僵尸
Google Analytics 不报数据了。Sentry 不捕获错误了。不是它们挂了，是 COEP: require-corp 把所有不带 Cross-Origin-Resource-Policy 响应头的跨域资源全部拦截了。
你的页面加载了 analytics.google.com/ga.js，这个脚本没有 CORP 头，浏览器直接拒绝执行。GA 就这样无声无息地死了——没有错误，没有降级，就是静默失败。
1.3 媒体黑屏
CDN 上的图片全变黑块。<img src="https://cdn.example.com/photo.jpg"> 加载不出来。原因同上：CDN 的图片响应没有 Cross-Origin-Resource-Policy 头，被 COEP 一刀切了。
你能控制自己的 Nginx，但你控制不了别人的 CDN。这就是隔离最毒的地方：它的限制是全局的，不区分"你的资源"和"你引用的资源"。
2. 为什么会这样
这一切的根源是 Spectre。
2018 年的 Spectre 漏洞证明了：恶意 JavaScript 可以通过侧信道攻击读取同一进程内其他域名的内存。为了防御，Chrome 实施了 Cross-Origin Isolation——用进程级隔离确保不同源的资源不会出现在同一渲染进程里。
代价是：所有跨域资源都必须显式声明"我允许被嵌入"。不声明的，一律拦截。这就是 COEP 的逻辑。
而 COOP 切断 window.opener，是为了防止跨域窗口通过 window.opener 访问原始页面的 DOM。这是同源策略在隔离模式下的强化版。
3. 基础修复
3.1 自己的资源：Nginx 配置
对于你能控制的资源，在 Nginx 里加上 CORP 头：
add_header Cross-Origin-Resource-Policy "cross-origin" always;
add_header Cross-Origin-Opener-Policy "same-origin" always;
add_header Cross-Origin-Embedder-Policy "require-corp" always;
这样你自己的图片、脚本、样式就不会被 COEP 拦截。
3.2 OAuth 回调：Credentialless 模式
Chrome 96+ 支持 Cross-Origin-Embedder-Policy: credentialless。这个模式允许不带凭证加载跨域资源，同时保留 COEP 的隔离语义。OAuth 弹窗在这个模式下可以正常回调。
# 替换 require-corp 为 credentialless
add_header Cross-Origin-Embedder-Policy "credentialless" always;
3.3 第三方 SDK：CSP 白名单
对于 GA、Sentry 这类必须执行的跨域脚本，可以用 crossorigin 属性显式声明：
<script src="https://analytics.google.com/ga.js" crossorigin></script>
但这只是声明意图，最终能不能加载还是取决于对方服务器的 CORS 配置。如果对方不支持 CORS，你只能走 Service Worker。
4. Service Worker：给第三方资源"办签证"
这是我找到的最可靠的方案。
原理：Service Worker 可以拦截页面发出的所有请求，包括跨域的。在 SW 里，你可以给任何响应补上缺失的 COEP/CORP 头——相当于在客户端侧给第三方资源"补办签证"。
// service-worker.js
self.addEventListener('fetch', (event) => {
event.respondWith(
fetch(event.request).then((response) => {
// 只给缺少 CORP 头的跨域响应补头
if (!response.headers.has('Cross-Origin-Resource-Policy')) {
const newHeaders = new Headers(response.headers)
newHeaders.set('Cross-Origin-Resource-Policy', 'cross-origin')
return new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: newHeaders,
})
}
return response
})
)
})
这样，即使第三方 CDN 不支持 CORP，你的 Service Worker 也能在客户端侧把缺失的头补上。页面正常加载，SAB 正常工作，隔离也保持完整。
注意：这个方案只适用于公开资源（图片、公开 JS）。涉及凭证的 OAuth 流程，还是得走 Credentialless 模式。
5. 交互式沙盒
我做了一个基于真实状态机的可交互式跨域隔离沙盒——你可以亲手拨动开关，看 COOP/COEP 一刀切下去，网站是怎么死的，又是怎么被抢救回来的。
由于社区平台限制，无法演示动态拦截效果。欢迎来我的独立博客亲自体验：
6. 完整的隔离策略
把以上方案组合起来，一份生产级配置：
# Nginx：开启隔离
add_header Cross-Origin-Opener-Policy "same-origin" always;
add_header Cross-Origin-Embedder-Policy "credentialless" always;
// Service Worker：给公开资源补 CORP 头
// （见上方代码）
<!-- 页面中：显式声明 crossorigin -->
<script src="https://cdn.example.com/lib.js" crossorigin></script>
<img src="https://cdn.example.com/photo.jpg" crossorigin />
COOP: same-origin 隔离窗口引用。COEP: credentialless 允许 OAuth 回调。Service Worker 补齐第三方资源的 CORP 头。三层配合，隔离生效，功能不残。
7. 底线
Cross-Origin Isolation 不是可选项——如果你要用 SharedArrayBuffer，它就是强制的。但隔离的代价是真实的：OAuth 会断、SDK 会死、图片会黑屏。
这些不是 Bug，是浏览器在 Spectre 时代筑起的柏林墙。你推不倒它，但你可以学会在墙这边过日子。
Service Worker 办签证、Credentialless 留后路、Nginx 配自己的地盘。三条路走通，隔离世界就能活。
在线实验：STW Sentinel Lab
NPM：npm i stw-sentinel
GitHub：hlng2002/stw-sentinel
