为什么在 crossOrigin = 'Anonymous' 图像上设置 base64 数据时，Safa

问题描述

我遇到一个问题，将图像 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 内容不兼容."