Question

我刚从Codecademy完成了Javascript课程。我尝试制作一个显示此page的Chrome扩展程序。所以我看了如何制作示例chrome扩展并创建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，然后在谷歌搜索后用以下内容替换原始链接的内容：< / p>

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

突然之间，你的扩展程序不起作用，你有一群愤怒的用户，并且有点尴尬。

你看到了问题吗？可能更糟糕，因为替换代码可能像JS允许的那样邪恶。由于HTTP流量很容易拦截，因此甚至不需要cyborgmatt.com管理员在您的扩展中注入任意代码，这就是为什么甚至不可能以这种方式放宽策略。 / p>

现在，解决问题。您应该只加载此文件，解析它以获取JSON数据（即{"dollars":3129676}），安全地解析并验证这些数据，然后才使用它，而不是加载AJAX代码。这样，如果上述情况发生，至少没有任何恶意。

第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/';

拒绝在Chrome扩展程序中加载脚本

2 个答案: