为何CSS引用的跨域图片请求不发送Cookie，而<img>标签引用的会发送？

为什么通过CSS引用的跨域图片请求不会发送Cookie，但通过<img>标签的src属性引用图片时却会发送Cookie？

环境信息 #

• 页面托管于host1.mydomain.net
• 图片托管于host2.mydomain.net
• host2.mydomain.net上存在Cookie

图片的CORS响应头 #

• access-control-allow-origin: https://host1.mydomain.net
• access-control-allow-credentials: true

代码示例 #

<style>
    #imagemask {
        mask-image: url("https://host2.mydomain.net/images/imagemask.png");
    }
</style>

<div id="imagemask"></div>
<img src="https://host2.mydomain.net/images/image.png" />

请求情况 #

• 两张图片的请求均带有Sec-Fetch-Site: same-site
• image.png的请求带有Sec-Fetch-Mode: no-cors且发送了Cookie
• imagemask.png的请求带有Sec-Fetch-Mode: cors且未发送Cookie

原因解析 #

核心差异在于两种请求的Fetch模式以及浏览器对不同资源类型的Cookie发送规则：

1. <img>标签的no-cors模式特性
   通过<img>的src加载图片时，浏览器默认采用no-cors模式发起请求。这种模式属于浏览器传统的跨域资源加载逻辑，只要Cookie的SameSite规则匹配（这里两张图的请求都是same-site，符合要求），浏览器就会自动携带目标域名下的Cookie，不需要依赖CORS的凭证配置。

2. CSS引用资源的cors模式限制
   通过mask-image、background-image这类CSS属性加载跨域资源时，浏览器会以cors模式发起请求。这种模式下，浏览器不会自动发送Cookie，必须同时满足两个条件才会携带：

• 服务器响应头包含access-control-allow-credentials: true
• 请求发起端明确设置credentials模式为include

但CSS中引用资源时，没有办法像XMLHttpRequest或fetch API那样手动指定credentials参数，浏览器默认不会为这类CORS模式的请求附带Cookie，哪怕服务器已经配置了允许凭证的响应头。

另外要注意：Sec-Fetch-Site: same-site只是判定SameSite Cookie是否生效的条件，不会改变两种请求模式下的Cookie发送规则。

内容的提问来源于stack exchange，提问作者Debby Mendez