问题 为什么在crossOrigin ='Anonymous'图像上设置base64数据时,Safari会抛出CORS错误?


我有一个问题,设置图像src(用。创建的图像) new Image)抛出base64编码的图像失败: Cross-origin image load denied by Cross-Origin Resource Sharing policy.

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

请参阅以下codepen: http://codepen.io/bedeoverend/pen/aORQzg。它适用于Chrome,但不适用于Safari。如果有效,黑白饼图图像应显示在底部。

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

更新:

为了澄清,我在这里做了一个更有针对性的codepen: http://codepen.io/bedeoverend/pen/BNGarr

看来那个设定 crossOrigin = 'Anonymous' 在图像上然后在base64中加载失败的Safari。两个文本都更改为 Worked... 在Chrome 44上,但在Safari 8.0.3上,交叉源Anonymous失败了。编辑:Firefox 35和39也失败了。

所以问题基本上是现在,为什么,当Image的crossOrigin属性设置为'Anonymous'时,Safari是否无法加载base64图像?


5904
2017-07-26 23:41


起源

你在codepen上的safari也有问题吗?我已经读过safari有数据uri和file:/// uris的问题 - Jaromanda X
正确,只是在野生动物园。 codepen在chrome上运行良好 - Bede
问题实际上来自你的 worked 功能: 更新的codepen 现在,至于为什么?好吧......不知道......但无论如何,改变你附加两个不同onload事件的img的src两倍似乎很奇怪。 - Kaiido
@Kaiido在我的问题上看到更新的codepen,应该清除问题 - 两次onloads /更改src两次,只是这样我可以将它转换为base64来证明它失败了。我已经更新了这个问题,以显示出现了什么问题:当crossOrigin设置为Anonymous时,Safari似乎不喜欢base64 - Bede
看起来这也是一个webkit bug,如下所示: bugs.webkit.org/show_bug.cgi?id=123978 然后链接到其他错误,似乎没有解决。 - Bede


答案:


MDN 声明“您必须拥有一个托管具有相应Access-Control-Allow-Origin标头的图像的服务器”。

根据 规格
强调我的

不幸的是,这可用于执行用户本地网络的基本端口扫描[...] 用户代理可以实现原始的跨源访问控制策略 严格 比上面描述的那些可以缓解这种攻击,但不幸的是,这些策略通常与现有的Web内容不兼容。“

您可以通过检查来简单地解决它 url 字符串,如果以它开头 data: 然后它可能不会与cross origin头一起提供,那么你可以设置 crossOrigin 物业回到 null


10
2017-07-28 05:04