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

标签 javascript html json firefox-addon

我正在制作一个浏览器扩展,在 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()"这样的东西会给我每次 onclick 带来的错误。

//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>

list .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>

该附加组件将毫无问题地加载。如果我能获得有关此错误消息的帮助,我将不胜感激。

最佳答案

确切的说,你不应该在html中调用javascript方法,而应该将JS逻辑移到JS中。

例如,您可以删除 onclick,将 id="nav"添加到您的范围,然后使用 JS 监听器:

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

这应该会删除警告。

关于javascript - 将 JS 文件与 firefox-addon 一起使用时的内容安全策略问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50405753/

相关文章:

javascript - 将捕获组与 SEPA 银行编号的量词相结合的正则表达式

javascript - 如何将新对象添加到模型中对象的属性

javascript - 创建有序列表并生成输入字段 HTML 和 JS

javascript - 如何让 navbar-collapse 与动画汉堡一起使用?

javascript - 位置 1 的 JSON 中的意外标记 u

php - 我可以将一个数组或字符串分成多个变量吗?

php - 抓取页面然后计算某个类的 div 数量并回显该数字

json - 如何在不使用 NumberInt(...) 进行任何包装的情况下导出 mongodb?

javascript - 如何绕过 401 未经授权的错误?

javascript - push.on ('registration' ) 不适用于 android