为什么将图像加载到画布并渲染它需要 crossorigin 属性？答案

【问题标题】：Why is crossorigin attribute necessary to load images into a canvas and render it?为什么将图像加载到画布并渲染它需要 crossorigin 属性？
【发布时间】：2020-08-27 16:15:36
【问题描述】：

当通过将src 属性设置为Canvas 并尝试在画布上调用toDataURL() 来加载Image 时，只有在加载前设置crossorigin 属性时才允许这样做Image。

这是为什么呢？如果图像具有正确的 Allow-Access-Control-Origin 标头。是不是因为在通过 URL 加载 Image 时没有使用 Origin 属性（即仅在设置了 crossorigin 属性时才包含 Origin 标头）？

【问题讨论】：

来自 MDN 文档 - 这会告诉浏览器在尝试下载图像数据时请求跨域访问 - 虽然该文档没有详细说明，但确实如此重要吗？
stackoverflow.com/questions/18336789/…
@JaromandaX 这对我的理解很重要。 :)
该属性告诉浏览器是否使用跨源请求，以及预期的标头。例如发送凭据。是的，origins 标头是其中的一部分。
是的，img 元素 src 如果设置了 crossorigin 属性，则 URL 请求仅发送 Origin 标头。来自html.spec.whatwg.org/… 和html.spec.whatwg.org/#create-a-potential-cors-request； corsAttributeState 只有在设置了crossorigin 属性时才会最终成为cors。这导致fetch.spec.whatwg.org/#concept-request-mode，其中仅当模式为cors 时才会创建COR 请求。然后到 fetch.spec.whatwg.org/#cors-request，“CORS 请求是一个包含 Origin 标头的 HTTP 请求”。

标签： javascript html5-canvas cors frontend same-origin-policy

【解决方案1】：

因为图像通常用于加载任意用户定义的内容，而图像数据只是打开了另一个向量，例如，该向量可用于隐藏可执行代码，稍后可以对其进行解码以绕过 XSS 过滤器。 ImageData 和 OffscreenCanvas 可以跨帧传递给工作人员。
并且实际上没有任何有效的用例允许从元素中检索任意图像数据，而无需明确请求，只需一个简单的属性。（特别是当它可以被渲染时）
我认为问题应该是，为什么默认允许它？

更不用说为 cors 列入白名单（未污染）的资源保留书面记录的开销，因为您可以将它们默认列入黑名单。

基本上告诉浏览器是否应该使用 CORS 请求，以及预期的标头。具体是否发送和期望凭据。

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

跨域指示是否必须使用 CORS 来获取图像。启用 CORS 的图像可以在元素中重复使用，而不会被“污染”。允许值：

匿名执行了一个跨域请求（即带有 Origin HTTP 标头），但没有发送凭据（即没有 cookie、X.509 证书或 HTTP 基本身份验证）。如果服务器不向源站提供凭据（通过不设置 Access-Control-Allow-Origin HTTP 标头），图像将被污染并限制其使用。

使用凭据 一个跨域请求（即带有 Origin HTTP 标头）与发送的凭据（即 cookie、证书或 HTTP 基本身份验证）一起执行 /强>。 如果服务器不向源站提供凭据（通过 Access-Control-Allow-Credentials HTTP 标头），图像将被污染并限制其使用。

如果该属性不存在，则在没有 CORS 请求的情况下获取资源（即，不发送 Origin HTTP 标头)，防止其在元素中的非污染使用。如果值无效，则按使用匿名值处理。有关更多信息，请参阅 CORS 设置属性。

【讨论】：