Next.js 15 COOP-COEP-CORP 跨源隔离与 SharedArrayBuffer 实践

概览跨源隔离（Cross-Origin Isolation）需要同时满足 COOP 与 COEP，加上资源层面的 CORP 才能在现代浏览器启用 SharedArrayBuffer。用于启用高性能并行（如 WASM/Worker）。安全头配置next.config.tsconst securityHeaders = [ { key: 'Cross-Origin-Opener-Policy', value: 'same-origin' }, { key: 'Cross-Origin-Embedder-Policy', value: 'require-corp' }, { key: 'Cross-Origin-Resource-Policy', value: 'same-origin' }, ] export default { async headers() { return [{ source: '/(.*)', headers: securityHeaders }] }, } 资源兼容// 对第三方资源添加 CORP 兼容 // 例如静态 CDN 需返回 Cross-Origin-Resource-Policy: cross-origin SharedArrayBuffer 使用'use client' const sab = new SharedArrayBuffer(1024) const view = new Int32Array(sab) const worker = new Worker('/worker.js') worker.postMessage({ sab }) worker.jsself.onmessage = (e) => { const view = new Int32Array(e.data.sab) Atomics.store(view, 0, 42) Atomics.notify(view, 0) } 治理要点所有嵌入的第三方脚本、图片与字体需满足 CORP；不兼容的需走代理或移除。在启用隔离后测试分享/弹窗等特性，避免窗口关系断裂导致功能异常。与 CSP/Trusted Types 协同，形成完整安全策略。验证与指标浏览器：Chrome 120+、Safari 17+、Firefox 120+Next.js：15.0+；Node.js：20.xSharedArrayBuffer 可用；Worker 并行能力稳定，兼容第三方资源