Question

我正在尝试调用此站点并返回一个json对象。如何在我的Chrome扩展程序中使用CSP正确地与此API进行交互？

错误：拒绝加载脚本＆＃39; http://thesaurus.altervista.org/service.php?word=smile&language=en_US&output=json&key=REMOVEDMYKEY&callback=thesaurus＆＃39;因为它违反了以下内容安全策略指令：＆＃34; script-src＆＃39; self＆＃39;铬扩展资源：＆＃34;

var word = "smile";
var s = document.createElement("script");
s.src = "http://thesaurus.altervista.org/service.php?word="+ word +"&language=en_US&output=json&key=REMOVEDMYKEY&callback=thesaurus";
document.getElementsByTagName("head")[0].appendChild(s);
function thesaurus(result) { 
  output = "";
  for (key in result.response) { 
list = result.response[key].list; 
output += list.synonyms+"<br>"; 
} 
if (output) 
document.getElementById("synonyms").innerHTML = output; 
}

Answer 1

您明确显示的URL表示它可以返回JSON对象。回调（JSONP风格）是可选的。

由于Chrome Content Security Policy的扩展程序，您无法使用该域中的JSONP。虽然您可以对策略add whitelisted domains，但出于安全原因，禁止使用HTTP来源。

相反，您希望将JSON响应捕获为字符串，然后解析它。

您需要对该网址XHR call执行操作：

function thesaurus(word) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    try {
      var result = JSON.parse(this.responseText);
      // Do something with the result
    } catch(e) {
      // Invalid JSON response
    }
  }
  xhr.onerror = function(e) {
    // Something bad happened
  }
  xhr.open(
    "GET",
    "http://thesaurus.altervista.org/service.php?word=" + word +
      "&language=en_US&output=json&key=REMOVEDMYKEY", 
    true
  );
  xhr.send();
}

您可能需要清单中的主机权限才能执行此操作，除非该服务器已从任何来源启用CORS（顺便说一句，这对于此类API是有意义的。）

  "permissions": [
    "*://thesaurus.altervista.org/*"
  ],

Answer 2

请检查您的脚本是否声明了所需的权限，如下所述： https://developer.chrome.com/extensions/xhr#requesting-permission
https://developer.chrome.com/apps/app_external#external

在你的清单中应该有类似的东西：

"permissions": [
  "*http://thesaurus.altervista.org/*"
],

拒绝加载Chrome扩展程序脚本

2 个答案: