为什么 css 中引用的图像的跨源图像请求不发送 cookie？

Question

为什么 css 中引用的图像的跨源图像请求不发送 cookie，但在 <img> src 属性中引用图像时会发送

？

• 页面托管在 host1.mydomain.net。
• 图像托管在 host2.mydomain.net。
• host2.mydomain.net 上有 cookie。

图像上的 CORS 标题：

• 访问控制允许来源：https://host1.mydomain.net
• 访问控制允许凭据：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。

Answer 1

您可以在 <img> 标签中使用属性

crossorigin

（请参阅 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#crossorigin）来启用相同的 CORS 请求正如

url()

所做的那样。

默认

<img>

标签是非 CORS 请求，因此 Sec-Fetch-Mode 是 no-cors 并且浏览器发送 cookie。