COEP通过HTTP响应头强制控制跨源资源嵌入，核心是require-corp（需CORP/CORS配合）或credentialless（剥离凭据），禁用meta/JS设置，启用后可解锁SharedArrayBuffer等高敏感API。
要在HTML5中用 Cross-Origin-Embedder-Policy（COEP） 控制跨域资源嵌入权限，核心是让浏览器拒绝加载未明确授权的跨源资源，比如图片、脚本、iframe、字体等。它不是靠前端JS控制，而是通过响应头强制生效，且必须配合 CORP 或 CORS 才能真正起作用。
COEP 的基本配置方式
COEP 必须由服务器在响应头中设置，不能用 meta 标签或 JS 动态添加。常见取值有两个：
-
require-corp：强制所有嵌入的跨源资源必须携带
Cross-Origin-Resource-Policy响应头（如cross-origin或same-site） - credentialless：允许嵌入跨源资源，但自动剥离凭据（如 cookies、HTTP 认证），适合加载公开静态资源
为什么单设 COEP 不够？
只加 Cross-Origin-Embedder-Policy: require-corp 会导致很多跨域资源加载失败，比如 CDN 图片、第三方字体、外部脚本——因为它们默认不带 CORP 头。这时需要：
- 对自有跨域资源（如自己托管的 CDN 图片），在服务器上加上
Cross-Origin-Resource-Policy: cross-origin - 对第三方资源，确认对方是否支持 CORS 并返回
Access-Control-Allow-Origin；若支持，可在 HTML 中显式添加crossorigin属性，例如：<img src="https://cdn.example.com/logo.png" crossorigin> - 若资源不支持 CORP/CORS（如某些老版 CDN），只能改用
credentialless模式，或放弃启用 COEP
启用 COEP 后的典型影响
一旦页面启用了 require-corp，以下行为会受限制：
立即学习“前端免费学习笔记（深入）”；
- 直接使用
<img src="https://other.com/photo.jpg">会失败（报错：“Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE”） -
fetch()加载跨源资源时，必须加{ credentials: 'omit' }，否则抛异常 -
SharedArrayBuffer、performance.measureMemory()等高敏感 API 将可用——这是启用 COEP 的主要动机 - 页面自动进入“跨域隔离状态”，为后续启用 COOP 提供前提
与 CSP 的 frame-ancestors 区别在哪？
COEP 管的是“当前页能加载哪些外部资源”，而 Content-Security-Policy: frame-ancestors 管的是“哪些外部页面能用 iframe 嵌入当前页”。两者目标不同，不替代，可共存。例如：
- 你希望自己的页面被 partner.com 嵌入 → 配置 CSP 的
frame-ancestors partner.com - 你希望自己的页面只加载可信 CDN 的图片 → 配置 COEP + 对 CDN 资源加 CORP 头
