设置COEP为'require-corp'后，同域资源为何无法加载？

问题场景 #

我把COEP设置为require-corp来启用跨源隔离，尝试用<object>标签嵌入本地同域SVG资源：

<object type="image/svg+xml" data="resource.svg"></object>

结果资源加载失败，报错：

Refused to display 'http://localhost:PORT/resource.svg' in a frame because of Cross-Origin-Embedder-Policy.

本地和服务器环境都出现这个问题，换用iframe标签也没用。

请求头信息：

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Referer: http://localhost:4173/rec_test
Sec-Fetch-Dest: iframe
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-origin
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15

响应头信息：

Access-Control-Allow-Origin: *
Cache-Control: public,max-age=0,must-revalidate
Connection: keep-alive
Content-Encoding: gzip
Content-Type: image/svg+xml
Date: Tue, 27 Jun 2023 15:03:55 GMT
ETag: W/"90946-1687877113441"
Keep-Alive: timeout=5
Last-Modified: Tue, 27 Jun 2023 14:45:13 GMT
Transfer-Encoding: Identity

问题原因 #

当COEP设为require-corp时，浏览器会严格限制资源嵌入：

• 同域资源如果设置了Access-Control-Allow-Origin: *，会被浏览器判定为跨源资源，而非同域资源
• 跨源资源要满足COEP的要求，必须带有Cross-Origin-Resource-Policy头，或者通过CORS凭证访问，但你的SVG响应头里没有这些配置，所以被拦截了

解决方案 #

方案1：移除不必要的跨源头（推荐）

既然是同域资源，直接去掉响应头里的Access-Control-Allow-Origin: *。浏览器会默认将其视为同域资源，符合COEP: require-corp的嵌入要求，无需额外配置。

方案2：添加Cross-Origin-Resource-Policy头

如果必须保留Access-Control-Allow-Origin: *，给SVG资源的响应头添加：

Cross-Origin-Resource-Policy: same-origin

这个头会告诉浏览器，该资源允许同域页面嵌入，即使设置了跨源相关的头。

方案3：改用img标签嵌入

如果不需要和SVG进行脚本交互，直接用<img>标签嵌入SVG：

<img src="resource.svg" alt="SVG资源">

img标签加载资源的规则和object/iframe不同，在COEP: require-corp下，同域img资源无需额外头即可正常加载。

内容的提问来源于stack exchange，提问作者Christopher Thompson