Google chrome extension 拒绝在Chrome扩展中加载脚本

我刚从Codecademy完成了Javascript课程。我试着做一个chrome扩展来展示这一点。因此，我研究了如何制作一个示例chrome扩展，并创建了（基本上是复制粘贴整个站点代码）。我得到了这个错误

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'"

---

我不完全知道我在做什么，但我试着读了各种各样的东西，但没能理解。谁来帮忙。提前谢谢

这仅适用于HTTPS资源，而不适用于HTTP资源：

如果您需要一些外部JavaScript或对象资源，可以通过将应该接受脚本的安全源列为白名单，在一定程度上放宽策略。我们希望确保加载了扩展提升权限的可执行资源正是您期望的资源，并且没有被活动网络攻击者替换。由于中间人攻击在HTTP上既微不足道又不可检测，这些来源将不会被接受。目前，我们通过以下方案允许白名单来源：HTTPS、

chrome扩展

和

chrome扩展资源

因此，以

http:

开头的源代码在扩展的

scriptsrc

CSP指令中被明确取消了包含的资格

幸运的是，所讨论的资源有一个HTTPS变体。在扩展代码中，更改行：

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

对于无条件使用HTTPS的用户：

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

---

这仅适用于HTTPS资源，而不适用于HTTP资源：

如果您需要一些外部JavaScript或对象资源，可以通过将应该接受脚本的安全源列为白名单，在一定程度上放宽策略。我们希望确保加载了扩展提升权限的可执行资源正是您期望的资源，并且没有被活动网络攻击者替换。由于中间人攻击在HTTP上既微不足道又不可检测，这些来源将不会被接受。目前，我们通过以下方案允许白名单来源：HTTPS、

chrome扩展

和

chrome扩展资源

因此，以

http:

开头的源代码在扩展的

scriptsrc

CSP指令中被明确取消了包含的资格

幸运的是，所讨论的资源有一个HTTPS变体。在扩展代码中，更改行：

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

对于无条件使用HTTPS的用户：

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

---

仅仅获取页面代码的副本来实现这一点不是一个好主意

请考虑：您将获得一个内容安全策略错误，因为您正试图从远程服务器执行一段代码。虽然你可以放松政策，但让我先解释一下为什么这是一个安全问题

---

当前，您的代码加载

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数据（即，

{“美元”：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数据包含一个非负数
美元

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);
}

函数parseAndValidate（str）{
var-some_-json；
//首先，使用正则表达式提取'SOME_JSON'：
if（str.match（/populatePrizePool\（.*）；/）{
some_json=str.match（/populatePrizePool\（.*）；/）[1]；
}否则{
抛出错误（“ti4.json的意外格式”）；
}
//第二，安全地解析'somejson'：
var data=JSON.parse（some_JSON）；//如果出现错误，将抛出异常
//第三，确保JSON具有所需的数据：
如果（！data.dollars | | typeof data.dollars！=“number”| | data.dollars<0）{
抛出错误（“ti4.json的意外数据格式”）；
}
//最后，调用函数：
populatePrizePool（数据）；
}

对于你的小项目来说，这可能有点过头了，但这是一次学习经历。不要盲目地相信你无法控制的数据，更不要相信你无法控制的代码。
仅仅获取页面代码的副本是不好的

请考虑：您将获得一个内容安全策略错误，因为您正试图从远程服务器执行一段代码。虽然你可以放松政策，但让我先解释一下为什么这是一个安全问题


当前，您的代码加载
http://dota2.cyborgmatt.com/prizetracker/data/ti4.json
和执行其内容，而不验证它们是什么。现在看起来是这样的：

populatePrizePool({"dollars":3129676});

但是：这是一个您无法控制的网站

想象一下：你写了你的扩展，它就变得流行了