Javascript crossorigin anonymous无法加载图像时出现问题

参考：

为了保护我的用户生成的内容免受这种潜在的“攻击”，我在所有

[img]

bbcode中添加了

crossorigin=“anonymous”

嗯，它在IE11中起作用了：当我测试该漏洞时，该图像不再触发身份验证对话框（测试时禁用缓存，并使用不同的URL进行测量）

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

源“XXXXX”的映像已被跨源资源共享策略阻止加载：请求的资源上不存在“访问控制允许源”标头。因此，不允许访问源“yyyy”

也许我的理解是错误的，但我认为属性的

“anonymous”

值允许这样做

---

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

首先，据我理解，你的意思是图像没有加载到IE中。这太完美了！这就是它的工作原理

其次（&最后），铬的性能也是完美的

过程/细节：

服务器不向源站点提供凭据（通过将“访问控制允许源站点”设置为“匿名”），映像将受到污染，其使用受到限制

现在，如果你有一张图片，你可以把它复制到画布上，但是这会“污染”画布，阻止你阅读它（因此你不能“窃取”或“下载”图片）。但是，通过使用CORS，存储图像的服务器可以告诉浏览器允许跨源访问，因此您可以通过画布访问图像数据

当标头不是来自同一来源时，即，如果在没有CORS请求的情况下提取资源（即，没有发送来源：HTTP标头），并且当标头变为无效时，将对其进行处理，就像使用枚举关键字anonymous一样

因此，我猜测null要么与不存在相同，要么与无效相同，在这种情况下，它的处理方式类似于匿名

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

---

一些有帮助的参考资料-

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

希望有帮助！：）快乐编码

根据我的调查

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

尽管您可以在画布中使用未经CORS批准的图像， 这样做会污染画布。一旦画布被污染，你就不能 更长的时间将数据从画布中拉回来。例如，你不能 不再使用画布toBlob（）、toDataURL（）或getImageData（）了 方法；这样做会引发安全错误。
参考：

CORS设置属性：

在HTML5中，一些支持COR的HTML元素，如

img

或

video

，具有交叉原点属性（交叉原点属性）， 这使您可以为元素的获取配置CORS请求 数据。默认情况下（即未指定属性时），CORS 根本不用。
“匿名”关键字意味着将有 不通过cookie、客户端SSL交换用户凭据 证书或HTTP身份验证

由于您链接到的图像未启用CORS，因此您将获得

Access Control Allow Origin

error

---

要解决此问题，不仅需要发送crossOrigin属性，还需要发送正确的头。您可以将其设置为crossOrigin to

use credentials

，这将设置凭据请求头-服务器可以使用该头来决定您是否拥有对内容的权限。当CORS头从服务器发送回一个图像，并且该图像在画布上使用时，origin clean标志为true。

我最近遇到的主要问题不是“hack”失败，而是Chrome完全阻止了所有图像，因为它们没有访问控制头。删除

crossorigin=“anonymous”

属性会使图像再次工作，但会将漏洞还原为黑客攻击。是的。我不确定我是否不能清楚地沟通，但是，你所说的是预期的行为。博兹莫博很好的解释！还有@NiettheDarkAbsol，是的，如果你不发送访问控制头，chrome将阻止所有图像，因为chrome无法相信用户的请求是否真实。这就是访问控制机制的工作原理。对，好吧，那么问题就变成了：我如何在不完全阻止图像的情况下防止“黑客”攻击？据我所知，我认为这是不可能的。如果您传递了正确的标题，则图像将可见，如果使其匿名，则图像不可见或将抛出CORS错误。看一下-once:）对我来说，我的问题是我的

crossOrigin

不小心被拼写成了全小写

crossOrigin

。