怎么利用HTML的COEP的require-corp值要求所有资源声明跨源资源策略-html教程-PHP中文网

require-corp 必须通过 http 响应头（而非 meta 标签）在主 html 文档中设置，且需配合 coop: same-origin；所有跨源资源须满足 corp、cors 或显式 crossorigin 属性，否则 window.crossoriginisolated 为 false。

怎么利用html的coep的require-corp值要求所有资源声明跨源资源策略

require-corp 不是 HTML 能配的，必须走 HTTP 响应头

直接写 <meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp"> 完全无效——浏览器（Chrome ≥88、Firefox ≥87、Edge ≥88）明确忽略所有 <meta> 形式的 COEP 声明。这个限制不是兼容性问题，而是规范强制要求：COEP 只能由服务端在主 HTML 文档的 HTTP 响应头中返回。

常见错误包括：

把 header 加在 JS/CSS/图片响应里，而不是 / 或 /index.html 这类主文档路径上
用 Nginx/Apache 配了，但被 CDN（如 Cloudflare）、反向代理或静态文件中间件（如 Express 的 express.static()）悄悄 strip 掉
误以为 CSP 里的 cross-origin-embedder-policy 指令能替代 HTTP header（不能）

require-corp 要求所有跨源资源“持证上岗”

require-corp 的核心逻辑是白名单制：任何跨源资源（<img>、<script></script>、<iframe></iframe>、<link rel="stylesheet"> 等），只要协议/域名/端口任一不同，就必须满足以下任一条件，否则加载失败并报错 Failed to load resource: Origin is not allowed by Cross-Origin-Embedder-Policy：

资源服务器返回 Cross-Origin-Resource-Policy: cross-origin（CORP）
资源服务器返回合法 CORS 响应头，如 Access-Control-Allow-Origin: * 或明确列出你的源
资源标签显式声明 crossorigin 属性（如 <script src="https://cdn.com/a.js" crossorigin></script>）——注意：这本身不提供授权，只是“申请检查”的信号；真正授权仍取决于资源响应头

漏掉任意一个跨源资源（比如一张没加 crossorigin 的 CDN 图片），整个页面的 window.crossOriginIsolated 就会是 false，SharedArrayBuffer 等 API 无法使用。

Nginx 配置 require-corp 的最小可行写法

在主 HTML 响应路径的 location 块中添加：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

location = / {
  add_header Cross-Origin-Embedder-Policy "require-corp";
  add_header Cross-Origin-Opener-Policy "same-origin";
  # 其他原有配置...
}

关键点：

必须同时配 Cross-Origin-Opener-Policy: same-origin，缺一不可；只加 COEP 不会让 window.crossOriginIsolated 变 true
值必须是严格字符串 "require-corp"，不能带空格、大小写混用或额外引号
确认该 location 确实命中主 HTML 请求（例如 SPA 的 fallback 配置可能绕过它）
重启 Nginx 后，用 DevTools → Network → 主文档 → Headers 验证两个 header 是否真实存在

验证是否真生效，别信 header 存在就万事大吉

最终判断标准只有一个：window.crossOriginIsolated 必须为 true。在控制台执行：

console.log(window.crossOriginIsolated); // 必须输出 true

如果输出 false，即使 Network 面板看到两个 header 都在，也说明某处断链了。此时要逐层排查：

主 HTML 是否真的返回了这两个 header（不是子资源）
所有跨源 <script></script> 标签是否都加了 crossorigin 属性
对应脚本响应头是否有 Access-Control-Allow-Origin（且值匹配你的源）
有没有 iframe 嵌入了未配 COEP/COOP 的第三方页面？父页也会因此失效

最容易被忽略的是：静态资源托管方（CDN、图床、字体服务）默认不返回 CORS 或 CORP 头，你没法改它们的响应头，只能换源、自建、或联系对方支持。这点没有绕过办法。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！