crossorigin anonymous 无法加载图像的问题
Issue with crossorigin anonymous failing to load images
参考：
为了保护我的用户生成内容不受这种潜在影响 "exploit"，我将 crossorigin="anonymous" 添加到所有 [img] BBCodes。
好吧，它在 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" 值可以使它起作用。
我是不是遗漏了什么，如果是的话，还有哪些其他选项可以防止这个问题？
首先，根据我的理解，你的意思是说图像没有在 IE 中加载。这是完美的！这就是它必须工作的方式。
其次（&最后），Chrome的行为也很完美。
Process/Details:
服务器不向源站点提供凭据（通过将 Access-Control-Allow-Origin 设置为匿名），图像将被污染并且其使用受到限制。
现在，如果你有一个 cross-origin image，你可以将它复制到一个 canvas 但是这个 "taints" 和 canvas 会阻止你阅读它（所以你不能"steal" 或 "download" 图片）。但是，通过使用 CORS，存储图像的服务器可以告诉浏览器允许 cross-origin 访问，因此您可以通过 canvas.
访问图像数据。
当 header 不是来自同一个来源时，即如果资源是在没有 CORS 请求的情况下获取的（即没有发送来源：HTTP header），并且它变得无效，然后，就好像使用了枚举关键字anonymous一样处理。
所以我的猜测是 null 与不存在或无效相同，在这种情况下，它的处理方式类似于 anonymous。
因此，您看到 Chrome 中的错误意味着完全按照 IE 正在做的事情进行。
一些可以提供帮助的参考资料-
虽然不是直接的答案，但是有帮助的链接-
希望对您有所帮助！ :) 编码愉快！
根据我的研究，
Firstly What do you mean by Tainted canvas:
Although you can use images without CORS approval in your canvas,
doing so taints the canvas. Once a canvas has been tainted, you can no
longer pull data back out of the canvas. For example, you can no
longer use the canvas toBlob(), toDataURL(), or getImageData()
methods; doing so will throw a security error.
ref:https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
CORS settings attributes:
In HTML5, some HTML elements which provide support for CORS, such as
img or video, have a crossorigin attribute (crossOrigin property),
which lets you configure the CORS requests for the element's fetched
data. By default (that is, when the attribute is not specified), CORS
is not used at all.
The "anonymous" keyword means that there will
be no exchange of user credentials via cookies, client-side SSL
certificates or HTTP authentication
因为您链接到的图片不是 CORS-enabled，您收到 Access-Control-Allow-Origin 错误。
要解决此问题，不仅需要发送 crossOrigin 属性，还需要发送正确的 header。您可以将其设置为 crossOrigin 到 use-credentials，这会设置凭据请求 header - 服务器可以使用它来决定您是否有权访问该内容。当 CORS header 从服务器发回图像，并且该图像用于 canvas 时，origin-clean 标志为真。
参考：
为了保护我的用户生成内容不受这种潜在影响 "exploit"，我将 crossorigin="anonymous" 添加到所有 [img] BBCodes。
好吧，它在 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" 值可以使它起作用。
我是不是遗漏了什么，如果是的话，还有哪些其他选项可以防止这个问题？
首先，根据我的理解，你的意思是说图像没有在 IE 中加载。这是完美的！这就是它必须工作的方式。
其次（&最后），Chrome的行为也很完美。
Process/Details:
服务器不向源站点提供凭据（通过将 Access-Control-Allow-Origin 设置为匿名），图像将被污染并且其使用受到限制。
现在，如果你有一个 cross-origin image，你可以将它复制到一个 canvas 但是这个 "taints" 和 canvas 会阻止你阅读它（所以你不能"steal" 或 "download" 图片）。但是，通过使用 CORS，存储图像的服务器可以告诉浏览器允许 cross-origin 访问，因此您可以通过 canvas.
访问图像数据。当 header 不是来自同一个来源时，即如果资源是在没有 CORS 请求的情况下获取的（即没有发送来源：HTTP header），并且它变得无效，然后，就好像使用了枚举关键字anonymous一样处理。
所以我的猜测是 null 与不存在或无效相同，在这种情况下，它的处理方式类似于 anonymous。
因此，您看到 Chrome 中的错误意味着完全按照 IE 正在做的事情进行。
一些可以提供帮助的参考资料-
虽然不是直接的答案，但是有帮助的链接-
希望对您有所帮助！ :) 编码愉快！
根据我的研究，
Firstly What do you mean by Tainted canvas:
Although you can use images without CORS approval in your canvas, doing so taints the canvas. Once a canvas has been tainted, you can no longer pull data back out of the canvas. For example, you can no longer use the canvas toBlob(), toDataURL(), or getImageData() methods; doing so will throw a security error.
ref:https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_imageCORS settings attributes:
In HTML5, some HTML elements which provide support for CORS, such as
imgorvideo, have a crossorigin attribute (crossOrigin property), which lets you configure the CORS requests for the element's fetched data. By default (that is, when the attribute is not specified), CORS is not used at all.
The "anonymous" keyword means that there will be no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication
因为您链接到的图片不是 CORS-enabled，您收到 Access-Control-Allow-Origin 错误。
要解决此问题，不仅需要发送 crossOrigin 属性，还需要发送正确的 header。您可以将其设置为 crossOrigin 到 use-credentials，这会设置凭据请求 header - 服务器可以使用它来决定您是否有权访问该内容。当 CORS header 从服务器发回图像，并且该图像用于 canvas 时，origin-clean 标志为真。