"跨源隔离（COOP/COEP）与 SharedArrayBuffer 启用与安全治理实践"

跨源隔离（COOP/COEP）与 SharedArrayBuffer 启用与安全治理实践概述要启用 SharedArrayBuffer（SAB）与 Atomics 并发能力，需满足跨源隔离：COOP 与 COEP 正确配置。本文给出服务器侧、前端校验、降级回退与与 CSP/Trusted Types 的协同方案。关键响应头配置# Nginx 示例

add_header Cross-Origin-Opener-Policy "same-origin" always;

add_header Cross-Origin-Embedder-Policy "require-corp" always;

add_header Cross-Origin-Resource-Policy "same-origin" always;

# 静态资源 CORP/COEP 协同

location ~* \.(js|css|wasm)$ {

add_header Cross-Origin-Resource-Policy "same-origin" always;

add_header Cross-Origin-Embedder-Policy "require-corp" always;

}

// Next.js Middleware（补充与校验）

import { NextResponse } from 'next/server'

import type { NextRequest } from 'next/server'

export function middleware(req: NextRequest) {

const res = NextResponse.next()

res.headers.set('Cross-Origin-Opener-Policy', 'same-origin')

res.headers.set('Cross-Origin-Embedder-Policy', 'require-corp')

res.headers.set('Cross-Origin-Resource-Policy', 'same-origin')

return res

}

export const config = { matcher: ['/((?!_next|api|static).*)'] }

前端能力检测与回退export function isCrossOriginIsolated(): boolean {

return Boolean((self as any).crossOriginIsolated)

}

export async function ensureSABSupport() {

if (!isCrossOriginIsolated()) {

console.warn('Cross-Origin Isolation not enabled; falling back')

// 回退：使用 MessageChannel 或 SharedWorker + 结构化克隆

return { sab: false }

}

// 验证 SAB 创建

try {

const sab = new SharedArrayBuffer(1024)

return { sab: !!sab }

} catch {

return { sab: false }

}

}

WASM 与并发管线// 以 WebAssembly + Worker 结合 SAB 进行并发计算

const worker = new Worker('/workers/compute.js', { type: 'module' })

const sab = new SharedArrayBuffer(4096)

const view = new Int32Array(sab)

worker.postMessage({ sab })

// /workers/compute.js

self.onmessage = async (e) => {

const { sab } = e.data

const view = new Int32Array(sab)

// 假定使用 WASM 导出的函数进行并发写入

for (let i = 0; i < view.length; i++) view[i] = i

postMessage({ ok: true })

}

CSP 与 Trusted Types 协同<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-__NONCE__'; object-src 'none'; base-uri 'self'; require-trusted-types-for 'script'; trusted-types app-policy;">

<script nonce="__NONCE__">

window.trustedTypes?.createPolicy('app-policy', {

createScriptURL: (url) => url.startsWith(location.origin) ? url : ''

})

</script>

;

验证与观测

// 运行时自检与上报export async function reportIsolationStatus() { const status = { isolated: isCrossOriginIsolated(), ua: navigator.userAgent } await fetch('/api/observability/isolation', { method: 'POST', body: JSON.stringify(status) })}

技术参数与验证

• 浏览器：Chrome 120+、Firefox 120+、Safari 17+
• 响应头：COOP= same-origin；COEP= require-corp；CORP= same-origin
• 能力：crossOriginIsolated === true；SAB 创建成功；WASM + Worker 并发正常

应用场景

• 图像/视频处理与大文件并发编解码
• 高并发数据处理（金融、科学计算）

注意事项

• 所有嵌入的第三方资源需支持 CORP，否则 COEP 将阻止加载
• 与 SRI/CSP 联合使用，避免脚本篡改与跨源注入

常见问题

• Q: 为何启用 COEP 后部分第三方脚本无法加载？
• A: 资源未声明 CORP 或不支持跨源嵌入；需换源或代理加相应头。

参考资料

• Cross-Origin Isolation、COOP/COEP 规范
• SharedArrayBuffer 与 Atomics 文档
• CSP 与 Trusted Types 文档

---

发布信息：已发布 · 技术验证 · 阅读 40 分钟 · CC BY-SA 4.0