javascript - crossorigin anonymous 无法加载图像的问题

Question

引用:Prevent HTTP Basic Authentication from displaying prompt for images

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

好吧，它在 IE11 中有效:当我测试该漏洞时，图像不再触发身份验证对话框(在禁用缓存和不同 URL 的情况下进行了测试)。

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

Image from origin 'XXXXX' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'YYYYY' is therefore not allowed access.

也许我的理解是错误的，但我认为该属性的 "anonymous" 值将允许它工作。

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

Answer 1

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

其次(也是最后)，Chrome 的行为也很完美。

过程/详情:

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

现在，如果你有一个 cross-origin image您可以将其复制到 Canvas 中，但这会“污染” Canvas ，从而阻止您阅读它(因此您不能“窃取”或“下载”图像)。但是，通过使用 CORS，存储图像的服务器可以告诉浏览器允许跨源访问，因此您可以通过 Canvas 访问图像数据。

当 header 不是来自同一来源时，即如果资源是在没有 CORS 请求的情况下获取的(即没有发送 Origin: HTTP header )，并且当它变得无效时，它会被处理为枚举关键字使用匿名。

所以我的猜测是 null 与不存在或无效相同，在这种情况下，它的处理方式类似于匿名。

因此，您看到 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

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