因为违反CSP（内容安全政策），拒绝执行内联事件处理程序。（沙盒）

Question

我正在开发谷歌浏览器打包应用，当我在manifest.json中加入 Sandbox 时：

 {
  "manifest_version": 2,
  "name": "WM32216",
  "version": "2.1",
  "minimum_chrome_version": "23",
  "permissions":["webview", "https://ajax.googleapis.com/*"],
  "sandbox":{
      "pages":["index.html"]
  },
  "app": {
    "background": {
      "scripts": ["main.js"]
    }
  }
}

我的锚点上的 onclick 事件可以正常工作，应用程序的流程也是完整的，但是从CSS样式表中加载图标时失败了。

控制台输出了一个错误：

文件未找到，但这些只是字体，所以对我来说没关系。

大问题在于，iframe中的视频无法播放，并且在字体之前我还遇到了其他错误：

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) 媒体无法加载，可能是因为服务器或网络失败，也可能是格式不受支持造成的。

不允许加载本地资源：blob:null/b818b32c-b762-4bd9-...

当我从manifest.json文件中删除sandbox时，控制台中没有关于字体的错误，一切正常。

但是，当我点击我的锚点标签以在js中加载新功能时，我遇到了以下控制台错误：

拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令：“default-src 'self' blob: filesystem: chrome-extension-resource:”。需要使用“unsafe-inline”关键字、哈希值（“sha256-...”）或nonce值（“nonce-...”）启用内联执行。还请注意，“script-src”没有明确设置，因此将“default-src”用作后备。

抱歉描述这么长，我已经困在这里3天了，需要帮助。

- JC Borlagdan

Answer 1

你的非沙箱相关问题的答案：

你的代码中有这样的内容：

<button onclick="myFunction()">Click me</button>

简而言之，这在Chrome应用程序和扩展中是不允许的。

将其更改为以下内容即可正常工作：

• html:

  <button id="myButton">Click me</button>
  <script src="script.js"></script>
  

• script.js:

  document.getElementById("myButton").addEventListener("click", myFunction);
  
  function myFunction(){
    console.log('asd');
  }
  

长话短说:

在Chrome应用中，内容安全策略不允许内联JavaScript。因此，您需要将JavaScript放入.js文件中并将其包含在HTML中。

进一步阅读：https://developer.chrome.com/extensions/contentSecurityPolicy

- kailniris

---

我忘了内联JavaScript不被允许，但我该如何获取被点击的锚点标签的ID？而且该ID是动态的。 - JC Borlagdan

为什么id是动态的？你能使用类或data-something HTML属性吗？使用JavaScript，您可以引用DOM中的许多事物，如查找所有<a>标记并为它们提供onclick事件。您能像这样使用吗？ <a id='aTagToGoogle' href="google.com">谷歌</a> - kailniris

它是动态的，因为所有内容都来自POST请求。 - JC Borlagdan

请注意，<script src=xx>必须放在<button>之后，否则脚本会在按钮显示之前运行，因此您将无法为其添加事件监听器。 - bobt

你如何替换document.onload或window.onload事件？你能通过id定位到document或window吗？ - Kosem