来自rawgithub.com的HTML遇到SecurityError“画布已被跨源数据污染”

Question

我正在查看我发布的一些旧代码，看看GitHub现在是否允许我直接通过rawgithub.com运行HTML5游戏（因为SourceForge似乎不再支持这一点）。游戏在：

http://rawgithub.com/bluemonkmn/iotaBuildIt/master/HTML/iotaBuildIt.html

rawgithub.com如何处理导致使用file://协议在本地运行文件时会出现同样错误的文件的方式是什么？有一个简单的解决方法吗？

修改 我对这里对“cross-origin”一词的引用感到困惑，因为主页中对图像的引用如下所示：

<img id="CoolFont" style="display:none" src="CoolFont.png" />
<img id="FireFont" style="display:none" src="FireFont.png" />
<img id="Main" style="display:none" src="Main.png" />
<img id="NanoBots" style="display:none" src="NanoBots.png" />

那么，当我甚至没有指定路径时，怎么可能存在交叉原点问题，更不用说引用图像的不同路径？

编辑2：似乎rawgithub添加了一种更好的访问机制： https://cdn.rawgit.com/bluemonkmn/iotaBuildIt/master/HTML/iotaBuildIt.html

Answer 1

这是因为他们只代理JavaScript部分，因为GitHub上有一个无嗅探头，阻止脚本在浏览器中工作。

对于图像，他们必须提供访问标头以允许跨源使用。 Cross-Origin意味着不同的起源（由域，协议和端口组成）。这里看起来并非如此，因此除了绘制画布外，你不能使用画布。他们允许的唯一来源是（来自他们的请求标题）：

Access-Control-Allow-Origin:https://render.github.com

因此，除非您的页面是从该来源加载的，否则您无法满足图像的cors要求。

要使其工作，请将图像移动到允许跨源使用的提供程序（例如，提供免费和付费服务的ImgUr），或者移动到托管页面的您自己的提供程序。

然后，您需要在设置src之前通过在图像上指定crossOrigin属性/属性来请求此类使用（如果它们与您的页面不在同一个原点）：

img.crossOrigin = '';
img.src = url;

<强>更新

如果您看到请求/响应中的标头，您可以看到图像不是从rawgithub.com加载而是从（注意签约的子域部分 rawgithub 。 com与 raw.github .com，后者是 github.com 的子域名：

https://raw.github.com/bluemonkmn/iotaBuildIt/master/HTML/CoolFont.png

---

并且推荐页面来源：

---

---

因为这些不是同一个起源，你会在那里得到一个cors错误。如上所述，访问标头不允许除render.github.com之外的任何其他域，因此您也不能请求此类使用。

原因可能是因为rawgithub（非官方GitHub站点）充当某些页面的代理（即脚本，以避免标题的X-Content-Type-Options=nosniff部分，它将脚本返回为text / plain类型这反过来阻止浏览器执行脚本并使用Gi​​tHub作为CDN）而不是其他人（即图像的内联链接，因为这些与脚本执行无关）。

希望这有帮助！

Answer 2

自从我上次检查（几年前？）以来，似乎rawgithub提供了一种更好的新访问机制：

https://cdn.rawgit.com/bluemonkmn/iotaBuildIt/master/HTML/iotaBuildIt.html