时间戳

首页 > 解决方案 > 如何修复 Chrome 扩展中的“Chrome 内容安全策略指令”

javascript - 如何修复 Chrome 扩展中的“Chrome 内容安全策略指令”

问题描述

我正在制作一个 chrome 扩展，通过使用 JQuery 的 ajax 调用访问维基百科的 API。我在扩展的本地 js 文件夹中包含了 JQuery 的副本。在弹出窗口中，我有一个输入，我获取该值并在 popup.js 中执行一个 get 请求，我得到一个“拒绝加载脚本，因为它违反了以下内容安全策略指令：”script-src 'self' blob : 文件系统: chrome-extension-resource:"。请注意，'script-src-elem' 没有明确设置，所以 'script-src' 用作后备。"

我已经在文件WebRequest and <all_urls>中设置了权限。manifest.json这是我的权限在清单中的样子：

"permissions": [
    "tabs",
    "webNavigation",
    "webRequest",
    "<all_urls>",
    "https://en.wikipedia.org/*"
  ],

我看到添加 a"content_security_policy": "script-src-elem 'self' https://www.wikipedia.org/"会使它更容易，但这并没有解决问题。 

$('#urlCopyButton').click(function search() {
    var searchWord = document.querySelector('#searchWord').value;
    console.log(searchWord);
    var results = [];


$.ajax({
          crossDomain: true,
          header: 'Access-Control-Allow-Origin',
          url:`https://en.wikipedia.org/w/api.php?action=opensearch&format=json&maxlag=5&search=${searchWord}&callback=?`,
          type: 'GET',
          dataType: 'json',
          beforeSend: function(xhr){xhr.setRequestHeader('https://en.wikipedia.org', 'https://en.wikipedia.org');},
          success: (data) => {
              $("#output").html("");
            var i =0;
            for (var i = 0; i < data[1].length; i++) {
              $("#output").append(`<li><a href= "${data[3][i]  } ">${data[1][i] + " " + data[2][i]}<a></li>`);
            }
            console.log(data);
          },
          error: (err) =>{
            console.log(err.responseJSON);
          }


      })

})

我希望它会成功，并且控制台中的数据会如此，但它不会引发此错误：

拒绝加载脚本“ https://en.wikipedia.org/w/api.php?action=opensearch&format=json&maxlag=5&search=dfa&callback=jQuery33108394586597996985_1549655186216&_=1549655186217 ”，因为它违反了以下内容安全策略指令：“script-src 'self' blob: 文件系统: chrome-extension-resource:"。请注意，'script-src-elem' 没有明确设置，因此 'script-src' 用作后备。

发送@jquery.js:2"

标签： javascriptjqueryajaxgoogle-chromegoogle-chrome-extension

解决方案

Wikipedia 的参数是一个古老的 hack，可以作为脚本callback=?加载，默认情况下 CSP 在扩展中是禁止的。dataType: 'json'虽然许多现有答案都建议放宽默认扩展 CSP，但这显然是一个糟糕的解决方案，它将扩展打开到各种远程攻击（如 MitM）。

只需删除&callback=?参数，以便 wikipedia 默认返回有效的 JSON。

不需要与 CORS 相关的调整，如 headers 或crossDomain: true，不需要修改 CSP。

$.ajax({
  url: 'https://en.wikipedia.org/w/api.php?' +
       'action=opensearch&format=json&maxlag=5&search=' + encodeURIComponent(searchWord),
  success(data) {
    // ...............
    // data is an object/array, you can process it directly here
    // ...............
  },
});

manifest.json 应该允许 URL：

  • "permissions": ["https://*.wikipedia.org/"]
  • "permissions": ["<all_urls>"]

推荐阅读