拒絕在Chrome擴展程序中加載腳本

Question

我剛剛完成了Codecademy的Javascript課程。我試圖做一個Chrome擴展，將顯示此page。所以我研究瞭如何製作一個示例擴展插件，並創建了extension（基本上覆制粘貼了整個站點代碼）。我收到此錯誤

Refused to load the script 'http://dota2.cyborgmatt.com/prizetracker/data/ti4.json? 
callback=jQuery11020032285090535879135_1399794129146' because it violates the 
following Content Security Policy directive: "script-src 'self' 
chrome-extension-resource:" 

我試圖尋找有關內容安全策略，並將此行

"content_security_policy": "script-src 'self' http://dota2.cyborgmatt.com/; 
object-src 'self'" 

我沒有的我在做什麼完整的想法，但我想讀了各種東西，但不明白。有人幫忙。提前致謝。

Answer 1

這不是一個好主意，只是抓住頁面的代碼副本，做這個。

請考慮：由於您試圖從遠程服務器執行一段代碼，因此會出現內容安全策略錯誤。雖然您可以放寬政策，但讓我先解釋一下爲什麼這是一個安全問題。

---

目前，您的代碼加載http://dota2.cyborgmatt.com/prizetracker/data/ti4.json和執行內容，未經覈實它們是什麼。現在它看起來是這樣的：

populatePrizePool({"dollars":3129676}); 

但是：這是一個網站，你不用管。

想象一下：你寫你的擴展，它變得受歡迎，該網站通知管理員的異常流量，改變他們的代碼加載http://dota2.cyborgmatt.com/prizetracker/data/ti4_.json代替，有點谷歌搜索後，用此代替原來的鏈接的內容：

alert("By the way, Ramana Venkata is stealing our data. Sincerely, cyborgmatt.com"); 

突然，你的分機不起作用，你有一羣憤怒的用戶，並且有點尷尬。

你看到問題了嗎？它可能更糟糕，因爲替換代碼可能和JS允許的一樣邪惡。由於HTTP流量攔截微不足道，它甚至不會讓cyborgmatt.com管理員在您的擴展中注入任意代碼，這就是爲什麼以這種方式放鬆策略是不可能的。

---

現在來解決問題。代替AJAX加載代碼，您應該加載此文件，解析它以獲取JSON數據（即{"dollars":3129676}），安全地解析並驗證該數據，然後才能使用它。這樣，如果上述情況發生，至少沒有什麼邪惡來臨。

第1步：獲取數據。

與XHR更換$.ajax呼叫：

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function(){ 
    if (xhr.readyState == 4) { 
    parseAndValidate(xhr.responseText); 
    } 
}; 
xhr.open("GET", "http://dota2.cyborgmatt.com/prizetracker/data/ti4.json", true); 
xhr.send(); 

步驟2：分析和驗證。

您有一個字符串，您期望具有以下格式：populatePrizePool(SOME_JSON);，並且您希望JSON數據包含非負數dollars。

function parseAndValidate(str){ 
    var some_json; 

    // First, extract `SOME_JSON` with a regular expression: 
    if(str.match(/populatePrizePool\((.*)\);/)) { 
    some_json = str.match(/populatePrizePool\((.*)\);/)[1]; 
    } else { 
    throw Error("Unexpected format for ti4.json"); 
    } 

    // Second, _safely_ parse `some_json`: 
    var data = JSON.parse(some_json); // Will throw an exception if something's not right 

    // Third, ensure that the JSON has the required data: 
    if(!data.dollars || typeof data.dollars !== "number" || data.dollars < 0) { 
    throw Error("Unexpected data format for ti4.json"); 
    } 

    // Finally, call the function: 
    populatePrizePool(data); 
} 

這對您的小項目可能有點矯枉過正，但這是一種學習體驗。不要盲目信任你無法控制的數據，甚至更少的代碼不能控制。

Answer 2

這僅僅是與HTTPS資源，而不是HTTP資源，according to the docs可能：

如果你有需要某種外部JavaScript或對象的資源，您可以通過白名單安全來源放寬政策，以在有限的範圍應該從哪些腳本接受。我們希望確保使用擴展的提升權限加載的可執行資源正是您期望的資源，並且尚未被活動的網絡攻擊者所取代。由於中間人攻擊無論在HTTP上還是微不足道的，都不會被接受。目前，我們允許將以下方案列入白名單：HTTPS，chrome-extension和chrome-extension-resource。

因此，與http:開始起源斷然從列入分機script-src CSP指令被取消資格。

幸運的是，有問題的資源有一個HTTPS變種。在擴展的代碼，行更改：

var baseURL = (location.protocol == 'https:') ? 'https://dota2.cyborgmatt.com/' : 'http://dota2.cyborgmatt.com/'; 

到使用HTTPS無條件：

var baseURL = 'https://dota2.cyborgmatt.com/';