COOP-COEP-CORP 进程隔离与 SharedArrayBuffer 能力治理实践

正文要启用 `SharedArrayBuffer` 等高权限能力，需要将站点置于跨源隔离状态：设置 `Cross-Origin-Opener-Policy`（COOP）与 `Cross-Origin-Embedder-Policy`（COEP）。同时，针对自有资源设置 `Cross-Origin-Resource-Policy`（CORP），控制跨源嵌入策略，降低混合上下文风险。

一、Next.js 中间件设置隔离头import { NextResponse } from 'next/server'

export function middleware() {

const res = NextResponse.next()

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

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

return res

}

二、为自有静态资源设置 CORP对于站点自身的静态资源（如 JS/CSS/字体/图片），建议设置：export const runtime = 'edge'

export async function GET() {

const body = new TextEncoder().encode('/* app.css */')

return new Response(body, {

headers: {

'Content-Type': 'text/css; charset=utf-8',

'Cross-Origin-Resource-Policy': 'same-origin',

'Cache-Control': 'public, max-age=31536000, immutable'

}

})

}

三、外部资源与兼容策略第三方资源如需跨源嵌入，应由第三方服务器返回 `Cross-Origin-Resource-Policy: cross-origin` 或通过 `COEP: credentialless`（实验）降低凭据要求。对无法满足 CORP 的第三方资源，应改用 `fetch`/代理后以同源方式投递，或放弃嵌入。

四、治理要点隔离生效：COOP+COEP 生效后页面与跨源上下文隔离；与 `window.opener` 交互受限，需评估业务影响。回退策略：为兼容旧资源逐步迁移至同源或可跨源嵌入的供应商；阶段性灰度上线并观测错误率。缓存：静态资源结合 `immutable` 长缓存；隔离头设置在中间件层，避免遗漏。