來自rawgithub.com的HTML遇到SecurityError「畫布被交叉源數據污染」

Question

我在查看一些我發佈的舊代碼，看看GitHub現在是否允許我直接通過rawgithub.com運行HTML5遊戲（因爲SourceForge不再支持這一點）。本場比賽是：

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

是什麼樣的rawgithub.com提供文件服務的方式會與該file://協議本地運行的文件時會發生同樣的錯誤？有一個簡單的解決方法嗎？

編輯： 我感到困惑的關於術語「跨域」在這裏，因爲在主要頁面看起來像給圖像引用：

<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

看來，因爲我最後一次檢查rawgithub提供了一個可行的新的接入機制，更好的（幾年前）：

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

Answer 2

這是因爲他們只代理JavaScript的一部分的GitHub上有防止腳本從工作無嗅頭瀏覽器。

對於圖片，他們必須提供訪問標頭以允許跨源使用。跨越來源意味着不同的來源（由域，協議和端口組成）。這裏似乎並非如此，所以除了繪製它們之外，您不能使用畫布使用圖像。他們允許的唯一產地是（從他們的請求頭）：

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 

---

和引用頁有產地：

---

---

由於這些都不是同樣的起源，你會在那裏遇到錯誤。如上所述，訪問標題不允許render.github.com以外的任何其他域，因此您也不能請求此類用法。

原因可能是因爲rawgithub（非官方GitHub站點）充當一些頁面的代理（即腳本，以避免頭部的X-Content-Type-Options=nosniff部分，該部分會將腳本作爲文本/平原類型返回阻止瀏覽器執行腳本並將GitHub作爲CDN使用），而不是其他腳本（即圖像的內聯鏈接，因爲這些腳本與腳本執行無關）。

希望這會有所幫助！