为什么在 crossOrigin = 'Anonymous' 图像上设置 base64 数据时，Safari 会引发 CORS 错误? [英] Why does Safari throw CORS error when setting base64 data on a crossOrigin = 'Anonymous' image?

问题描述

我遇到一个问题，将图像 src(使用 new Image 创建的图像)设置为 base64 编码图像失败，原因是:跨域资源共享策略拒绝跨域图像加载.

I'm having an issue where setting an image src (image created with new Image) to a base64 encoded image fails by throwing: Cross-origin image load denied by Cross-Origin Resource Sharing policy.

我已经有 image.crossOrigin = 'Anonymous'了.

请参阅以下代码笔:http://codepen.io/bedeoverend/pen/aORQzg.它适用于 Chrome，但不适用于 Safari.如果可以，黑白饼图图像应该会显示在底部.

See the following codepen: http://codepen.io/bedeoverend/pen/aORQzg. It works in Chrome, but not in Safari. The black and white pie chart image should show up down the bottom if it worked.

为什么会发生这种情况以及如何解决?

Why does this happen and how can it be resolved?

更新:

为了澄清，我在这里做了一个更集中的代码笔:http://codepen.io/bedeoverend/pen/BNGarr

To clarify, I've made a more focused codepen here: http://codepen.io/bedeoverend/pen/BNGarr

似乎在图像上设置 crossOrigin = 'Anonymous' 然后在 Safari 中加载 base64 失败.在 Chrome 44 上，这两个文本都更改为 Worked...，但在 Safari 8.0.3 上，跨源匿名一个失败.在 Firefox 35 & 上也失败了39.

It seems that setting crossOrigin = 'Anonymous' on an image then loading in base64 fails for Safari. Both text changes to Worked... on Chrome 44, but on Safari 8.0.3, the cross origin Anonymous one fails. Also fails on Firefox 35 & 39.

所以现在的问题本质上是，为什么当图像的 crossOrigin 属性设置为匿名"时，Safari 无法加载 base64 图像?

So the question is essentially now, why, when an Image's crossOrigin property is set to 'Anonymous', does Safari fail to load base64 images in?

推荐答案

MDN 声明您必须有一个服务器托管具有适当的 Access-Control-Allow-Origin 标头的图像."

MDN states that "You must have a server hosting images with the appropriate Access-Control-Allow-Origin header."

根据到规格,
_强调我的

不幸的是，这可用于对用户的本地网络执行基本的端口扫描[...]用户代理可以实施更严格<的跨域访问控制策略/strong> 比上面描述的更能减轻这种攻击，但不幸的是，这些策略通常与现有的 Web 内容不兼容."

This, unfortunately, can be used to perform a rudimentary port scan of the user's local network [...] User agents may implement cross-origin access control policies that are stricter than those described above to mitigate this attack, but unfortunately such policies are typically not compatible with existing Web content."

您可以通过检查 url 字符串来简单地解决它，如果它以 data: 开头，那么它可能不会与跨源标头一起提供，那么您可以将 crossOrigin 属性设置回 null.

You could simply workaround it by checking the url string, if it starts with data: then it probably won't be served with the cross origin header, then you can set the crossOrigin property back to null.

这篇关于为什么在 crossOrigin = 'Anonymous' 图像上设置 base64 数据时，Safari 会引发 CORS 错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！