拒绝执行内联事件处理程序，因为它违反了 CSP。 （沙盒）

Posted 2023-02-22

【中文标题】拒绝执行内联事件处理程序，因为它违反了 CSP。 （沙盒）

【英文标题】：Refused to execute inline event handler because it violates CSP. (SANDBOX)

【发布时间】：2016-07-19 08:55:06

【问题描述】：

我正在开发一个谷歌浏览器打包应用程序，当我把沙盒放在manifest.json：

 
  "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 样式表中的图标。

我从控制台收到了error

File not found,

但这些只是字体，所以我觉得很好，

最大的问题是，iframe 中的视频无法播放，而且我在字体之前遇到了额外的错误：

VIDEOJS: 错误: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) 无法加载媒体，原因可能是服务器或网络出现故障或格式不受支持。

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

当我删除 manifest.json 文件中的沙箱时，一切都很好，控制台中没有关于字体的错误，

但是，当我 点击/单击我的锚标记，它有一个单击事件以在 js 中加载新功能时，我收到以下 控制台错误：

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

抱歉，很长的细节，

我只是需要帮助，因为我已经被困在这里 3 天了。

【参考方案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

【讨论】：

是的，我忘记了不允许使用内联 javascript，但是如何获取被点击的锚标记的 ID？而 ID 是动态的..

为什么id是动态的？你可以使用 class 或 data-something html 属性吗？使用 javascript 你可以参考很多事情是 DOM 喜欢找到所有 标签并给他们 onclick 事件 你可以像这样使用 somtting 吗？ google

它是动态的，因为一切都来自 POST