COOP/COEP 跨源隔离迁移:资源闭包、Popup 兼容与可逆切流
给首页加上 COOP/COEP 可能启用 SharedArrayBuffer,也可能同时切断 OAuth Popup、第三方 iframe 和 CDN 资源。本文用依赖闭包、报告期和运行时能力门完成迁移。
本文要点
- 主题聚焦:TypeScript、DevOps
- 适合人群:独立开发者、全栈工程师、AI 应用开发者
- 核心价值:快速理解背景、实践路径、常见误区和工程建议
SharedArrayBuffer 和 Wasm threads 常要求页面处于 cross-origin isolated 状态。直接发送 Cross-Origin-Opener-Policy: same-origin 与 Cross-Origin-Embedder-Policy: require-corp,可能让性能测试变绿,却让 OAuth Popup 失去 window.opener、支付窗口无法回传,或广告、字体和嵌套 worker 被浏览器拦截。Web Worker 并发基础解释线程能力,浏览器 Wasm 资产完整性只判断某个模型是否需要隔离;本篇治理整个站点迁移。
先冻结真实依赖闭包
发布 crossOriginIsolationRelease.v1,绑定 route/origin scope、COOP/COEP 值、浏览器矩阵、所需能力、顶层与嵌套文档、静态和动态子资源、worker/Wasm、重定向链、Popup/opener 流程、credential 模式、Reporting endpoint、Service Worker release 和 fallback。库存必须来自最终网络响应与合成旅程,不能只扫描源码 import。
schema: crossOriginIsolationRelease.v1
release: isolation-7
scope: https://compute.example.com/*
coop: same-origin
coep: require-corp
requiredCapability: wasm-threads@2
resourceInventoryRoot: sha256:61c...
popupFlows: [oauth-full-page-redirect@3]
fallback: single-thread@5
COOP 决定顶层页面与 opener 是否还能处于同一 browsing context group;COEP 决定页面能否嵌入没有明确许可的跨源资源。普通跨源子资源要么走成功的 CORS,要么按其 fetch mode 返回合适的 Cross-Origin-Resource-Policy;跨源 iframe 和 nested worker 还要满足各自文档/脚本策略。credentialless 会改变 no-cors 请求携带凭证的行为,不能把它当作“require-corp 报错时自动修复”。
为 OAuth、支付和编辑器 Popup 建立流程级替代:优先同页重定向、后端交换 code,或隔离到无需 SharedArrayBuffer 的独立 origin。不能为了一个 Popup 把主计算 origin 改成更弱策略,又继续声称它 cross-origin isolated。CORS 与 CSP提供通用跨源边界,本合同固定每条例外的 owner 和退出日期。
响应头和运行时能力共同构成接受点
状态为 INVENTORY -> REPORT_ONLY -> REMEDIATING -> CANARY_ENFORCED -> ENFORCED -> RETIRED。先在支持的浏览器发送 COOP/COEP Report-Only 并接收版本化报告;报告缺失不等于安全,CI 还要用强制头跑真实旅程。CDN、反向代理、错误页和重定向目标都必须在 response fixture 中验证,避免只有 200 HTML 带正确头。
强制头只对新 Document 导航生效,不能把当前页面原地升级。启动 threads/SAB 前,应用同时校验 self.crossOriginIsolated === true、release ID 和具体 API 能力;否则进入单线程 fallback 或要求导航,绝不在捕获异常后继续共享内存路径。Service Worker 缓存的导航与资源响应也属于闭包,需与Service Worker 发布激活同步切代,防止旧 cache 掩盖 header 改动。
隔离页面可以与非隔离页面并存于不同 origin,但认证 token、postMessage target origin 和数据分类不能因此放宽。Popup 若仍存在,消息必须验证精确 origin、flow nonce 与状态;不能以 * 恢复被 COOP 切断的隐式信任。Feature Toggle只选择 cohort,响应头与能力检查才是隔离事实。
把第三方和旧浏览器逐个破坏
故障矩阵移除字体 CORP、让图片 302 到未批准 CDN、使 worker importScripts 拉跨源脚本、返回无头 404、从旧 SW cache 取导航、在 OAuth 与支付 Popup 中读 opener、把 credentialless 用到需 cookie 的资源、让浏览器不支持所需线程,并模拟报告端点丢事件。断言 eligible 强制页面 crossOriginIsolated 为真,受保护能力在 false 时启动数为 0,关键第三方旅程成功且未知跨源依赖为 0。
发布门要求资源库存 owner 覆盖率 100%、合成旅程阻断为 0、eligible cohort 隔离成功率至少 99.99%、fallback 成功率 100%、Popup 登录/支付成功率不低于基线、report-only 未归类报告为 0。先在独立计算 origin report-only,再 1%、5%、25% 强制。回滚移除强制头并切回单线程 release,但现有 Document 不会被响应配置逆向改变,必须提示或触发新导航;保留已修好的 CORS/CORP,不用重新开放匿名跨源访问。
延伸阅读
Related