将 JS 文件与 firefox-addon 一起使用时的内容安全策略问题

Question

我正在制作浏览器扩展程序，但在 firefox 中加载插件时出现此错误：

Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). Source: onclick attribute on SPAN element.index.html

我已将问题缩小到我在 html 中调用 javascript 方法时出现的问题。对于 digitalClock.js 来说这似乎不是问题，只有 onclick="foo()" 之类的东西会给我每次点击时的错误。

//settings.js
function openNav() {
  document.getElementById("mySettings").style.width = "325px";
}

function closeNav() {
  document.getElementById("mySettings").style.width = "0";
}
//digitalClock.js is working. The error message occurs even if this is removed.

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="styles/clock.css" />
  <link rel="stylesheet" type="text/css" href="styles/settings.css" />
  <meta charset="utf-8">
  <title>Title</title>
</head>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>

<div id="myClock" class="clock">clock</div>

<script src=scripts/digitalClock.js></script>
<script src=scripts/settings.js></script>

</html>

manifest.json

{

  "manifest_version": 2,
  "name": "CPS error",
  "version": "1.0",

  "description": "CPS error",

  "icons": {
    "48": "icons/border-48.png"
  },


  "permissions": ["storage", "tabs","geolocation"],


  "chrome_settings_overrides": {
    "homepage": "public/index.html"
  },
  "chrome_url_overrides": {
    "newtab": "public/index.html"
    }
}

如果我删除行：

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>

加载项将顺利加载。如果我能得到一些关于此错误消息的帮助，将不胜感激。

Answer 1

没错，你不应该在html中调用javascript方法，而是在JS中移动JS逻辑。

例如，您可以删除 onclick，将 id="nav" 添加到您的 span，然后使用 JS 侦听器：

document.getElementById("nav").addEventListener("click", function(){
  openNav();
});

这应该会删除警告。

将 JS 文件与 firefox-addon 一起使用时的内容安全策略问题

Content Security Policy issue when using JS files with firefox-addon

html

javascript

json

firefox-addon