为什么将图像加载到 canvas 并渲染它需要 crossorigin 属性?

Why is crossorigin attribute necessary to load images into a canvas and render it?

当通过将 src 属性设置为 URL 加载 ImageCanvas 并尝试在 [=26] 上调用 toDataURL() 时=],只有在加载 Image.

之前设置 crossorigin 属性时才允许这样做

为什么会这样?如果图像有适当的 Allow-Access-Control-Origin header。是不是因为在通过 URL 加载 Image 时未使用 Origin 属性(即 Origin header 仅在 crossorigin 属性已设置)?

因为图像通常用于加载任意 user-defined 内容,而图像数据只是打开了另一个向量,例如可以用于隐藏可执行代码,稍后可以对其进行解码以绕过 XSS 过滤器。并且 ImageData 和 OffscreenCanvas 可以跨帧传递给工作人员。
并且实际上没有任何有效的用例允许在没有明确请求的情况下使用简单属性从元素中检索任意图像数据。 (尤其是刚好可以渲染的时候)
我想问题应该是,为什么要默认允许呢?

更不用说为 cors 白名单(未污染)资源保留 paper-trail 的开销,默认情况下您可以将它们列入黑名单。


基本上告诉浏览器它是否应该使用 CORS 请求,以及 header 期望什么。特别是是否发送和期望凭据。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin

跨域 指示是否必须使用 CORS 来获取图像。 CORS-enabled 图像可以在元素中重复使用而无需 "tainted." 允许的值:

匿名 执行 cross-origin 请求(即,使用 Origin HTTP header),但未发送任何凭据(即,没有 cookie、X.509 证书或 HTTP 基本身份验证)。如果服务器不向源站点提供凭据(通过不设置 Access-Control-Allow-Origin HTTP header),图像将被污染并限制其使用。

use-credentials cross-origin 请求(即 与源 HTTP header)执行 连同发送的凭据(即 cookie、证书或 HTTP 基本身份验证)如果服务器不向源站点提供凭据(通过 Access-Control-Allow-Credentials HTTP header),图像将被污染并限制其使用。

如果该属性不存在,则在没有 CORS 请求的情况下获取资源(即,不发送 Origin HTTP header),阻止它在元素中的 non-tainted 使用。如果是无效值,则将其视为使用匿名值进行处理。有关其他信息,请参阅 CORS 设置属性。