跨域匿名无法加载图像的问题

Question

参考：Prevent HTTP Basic Authentication from displaying prompt for images

为了保护我的用户生成内容免受这种潜在的“利用”，我将crossorigin="anonymous" 添加到所有[img] BBCodes。

嗯，它在 IE11 中有效：当我测试漏洞利用时，图像不再触发身份验证对话框（在禁用缓存和不同 URL 的情况下进行测试）。

但在 Chrome 中，该漏洞利用不起作用……因为根本没有加载图像。相反，我得到了一个明显相当常见的错误：

来自“XXXXX”的图像已被跨域资源共享策略阻止加载：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'YYYYY'。

也许我的理解是错误的，但我认为属性的"anonymous" 值会允许这个工作。

我是否遗漏了什么，如果有，还有哪些其他选项可以防止此问题？

Answer 1

根据我的研究，

首先你所说的被污染的画布是什么意思：

尽管您可以在画布中使用未经 CORS 批准的图像， 这样做会污染画布。一旦画布被污染，你就不能 更长的时间将数据拉出画布。例如，您不能 不再使用画布 toBlob()、toDataURL() 或 getImageData() 方法;这样做会引发安全错误。
参考：https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

CORS 设置属性：

在 HTML5 中，一些支持 CORS 的 HTML 元素，例如 img 或 video，具有跨域属性（crossOrigin 属性）， 它允许您为获取的元素配置 CORS 请求 数据。默认情况下（即未指定属性时），CORS 根本没用过。
“匿名”关键字意味着会有 不通过 cookie、客户端 SSL 交换用户凭据 证书或 HTTP 身份验证

由于您链接到的图像未启用 CORS，因此您会收到 Access-Control-Allow-Origin 错误。

要解决此问题，不仅需要发送 crossOrigin 属性，还需要发送正确的标头。您可以将其设置为 crossOrigin 到 use-credentials，这会设置凭证请求标头 - 服务器可以使用它来决定您是否有权访问内容。当图像的 CORS 标头从服务器发回，并且该图像在画布上使用时，origin-clean 标志为真。

Answer 2

首先，根据我的理解，您的意思是说图像没有在 IE 中加载。这是完美的！这就是它必须工作的方式。

其次（最后），Chrome 的行为也是完美的。

流程/细节：

服务器不向源站提供凭据（通过将 Access-Control-Allow-Origin 设置为 Anonymous），图像将被污染并限制其使用。

现在，如果您有 cross-origin image，您可以将其复制到画布中，但这会“污染”画布，阻止您阅读它（因此您无法“窃取”或“下载”图像）。但是，通过使用 CORS，存储图像的服务器可以告诉浏览器允许跨域访问，因此您可以通过画布访问图像数据。

当标头不是来自同一来源时，即，如果在没有 CORS 请求的情况下获取资源（即没有发送 Origin: HTTP 标头），并且当它变为无效时，则将其视为枚举关键字处理使用了匿名。

所以我的猜测是 null 要么与不存在相同，要么无效，在这种情况下，它会像 anonymous 一样处理。

因此，您会看到 Chrome 中的错误意味着完全按照 IE 的操作。

---

一些可以提供帮助的参考资料-

• Purpose of the crossorigin attribute …?

• HTML crossorigin attribute for img tag

• Javascript CORS image / canvas manipulation

• Drawing images to canvas with img.crossOrigin = “Anonymous” doesn't work

虽然不是直接的答案，但是，有用的链接-

• How can I override javascript files referenced with the crossorigin=“anonymous” using a Google Chrome extension?

• CORS enabled image

希望对您有所帮助！ :) 编码愉快！