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

Posted 2023-03-04

【中文标题】跨域匿名无法加载图像的问题

【英文标题】：Issue with crossorigin anonymous failing to load images

【发布时间】：2016-04-21 23:20:23

【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

对我来说，我的问题是我把crossOrigin 不小心拼成了全小写的crossorigin。

【参考方案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 标志为真。

【参考方案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

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

【讨论】：

我最近遇到的主要问题不是“黑客”失败，而是 Chrome 完全阻止了所有图像，因为它们没有访问控制标头。删除crossorigin="anonymous" 属性会使图像再次工作，但会恢复黑客攻击的漏洞。

是的。我不确定我是否无法清楚地沟通，但是，您所说的是预期的行为。

bozzmob 很好的解释！ @NiettheDarkAbsol，是的，如果您不发送访问控制标头，chrome 将阻止所有图像，因为 chrome 无法相信用户请求是否真实。这就是访问控制机制的工作原理。

对，好吧，那么问题就变成了：如何在不完全阻止图像的情况下防止“黑客”？

据我所知，我认为这是不可能的。如果您传递正确的标题，图像将可见，如果匿名，则不可见或将引发 CORS 错误。看看 - developer.mozilla.org/en-US/docs/Web/HTML/Element/Img 一次 :)