谷歌浏览器扩展制作中的内容安全策略错误

IT技术 javascript google-chrome google-chrome-extension content-security-policy
2021-02-26 13:32:12

我正在制作一个 chrome 扩展,它将在新标签页中打开页面上的所有链接。

这是我的代码文件:

清单文件.json

{
  "name": "A browser action which changes its icon when clicked.",
  "version": "1.1",
    "permissions": [
    "tabs", "<all_urls>"
  ],
 "browser_action": {     
    "default_title": "links",      // optional; shown in tooltip
    "default_popup": "popup.html"        // optional
  },
 "content_scripts": [
    {
    "matches": [ "<all_urls>" ],
      "js": ["background.js"]
    }
  ],
  "manifest_version": 2
}

弹出窗口.html

<!doctype html>
<html>
  <head>
    <title>My Awesome Popup!</title>
    <script>
function getPageandSelectedTextIndex() 
  { 
    chrome.tabs.getSelected(null, function(tab) { 
    chrome.tabs.sendRequest(tab.id, {greeting: "hello"}, function (response) 
    { 
        console.log(response.farewell); 
    }); 
   }); 
        } 
chrome.browserAction.onClicked.addListener(function(tab) { 
        getPageandSelectedTextIndex(); 
});
         </script>
  </head>
  <body>
    <button onclick="getPageandSelectedTextIndex()">
      </button>
  </body>
</html>

背景.js

chrome.extension.onRequest.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting == "hello")
    updateIcon();  

});
function updateIcon() {
  var allLinks = document.links;
  for (var i=0; i<allLinks.length; i++) {
    alllinks[i].style.backgroundColor='#ffff00';

}
}

最初我想突出显示页面上的所有链接或以某种方式标记它们;但我收到错误“由于内容安全策略而拒绝执行内联脚本”。

当我按下弹出里面的按钮,我得到这个错误:Refused to execute inline event handler because of Content-Security-Policy

请帮助我修复这些错误,以便我可以使用我的 chrome 扩展程序在新标签页中打开所有链接。

1个回答

其后果之一"manifest_version": 2默认启用内容安全策略Chrome 开发人员选择对此严格要求并始终禁止内联 JavaScript 代码——仅允许执行放置在外部 JavaScript 文件中的代码(以防止扩展程序中的跨站点脚本漏洞)。因此,与其getPageandSelectedTextIndex()中定义函数,popup.html不如将其放入popup.js文件并将其包含在popup.html

<script type="text/javascript" src="popup.js"></script>

并且<button onclick="getPageandSelectedTextIndex()">也必须更改,onclick属性也是一个内联脚本。您应该改为分配一个 ID 属性:<button id="button">然后,popup.js您可以将事件处理程序附加到该按钮:

window.addEventListener("load", function()
{
  document.getElementById("button")
          .addEventListener("click", getPageandSelectedTextIndex, false);
}, false);
@wladimir - 希望他们将来能放宽政策!
2021-04-30 13:32:12
这太愚蠢了。这个主意是谁想出来的?!现在我必须更改我所有的内联 onclicks 并将它们放在一个外部 js 文件中。我有一堆文件,包括它们。
2021-05-02 13:32:12
只是打败了我。完美的答案,正是您需要做的。
2021-05-14 13:32:12
@Derek:在安全方面这是一种更好的方法,许多安全问题的发生是因为人们不够小心innerHTML等等。无论如何,Chrome 似乎在某种程度上放宽了当前 Canary 版本中的内容策略要求,现在unsafe-inline也可能得到支持。
2021-05-16 13:32:12