Chrome 显示错误为：由于 Content-Security-Policy 拒绝执行内联脚本答案

【问题标题】：Chrome showing error as: Refused to execute inline script because of Content-Security-PolicyChrome 显示错误为：由于 Content-Security-Policy 拒绝执行内联脚本
【发布时间】：2013-04-22 11:01:05
【问题描述】：

我正在创建图像裁剪小部件的 Chrome 扩展。我的popup.html的代码如下：

<body>
    <textarea id="widget_script" style="border:1px solid #ccc;padding:5px;width:600px" rows="5" readonly></textarea>
    <script type="text/javascript">
        var protocol=window.location.protocol;
        var host= window.location.host;
        var head=('<div id="wd_id" style="margin-bottom: 20px;"></div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></\script>
    <script type="text/javascript" src="'+protocol+'//'+host+'Image_crop/cropimages/img_crop_widget.js'+'"><\/script>
    <script type="text/javascript">init_widget()<\/script>');
        document.getElementById("widget_script").innerHTML=head;
    </script>
</body>

变量 protocol 和 host 从浏览器中的 URL 获取 protocol 和 host。当我尝试将其集成为 Chrome 扩展时，它不起作用。当它完美运行时，它会在 textarea 中显示以下代码：

<div id="wd_id" style="margin-bottom: 20px;"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://localhost/cropimages/img_crop_widget.js"></script>
<script type="text/javascript">init_widget()</script>

我有一些事情，比如将 JS 代码放在外部 JS 文件中，并在 manifest.json 中调用该文件，在我的 popup.html 中调用它，但没有任何效果。

谁能告诉我我做错了什么，或者我应该怎么做才能让它发挥作用？

提前谢谢...

【问题讨论】：

您需要将所有代码放在一个外部文件中。你不能有任何内联代码。

标签： jquery google-chrome google-chrome-extension

【解决方案1】：

来自Chrome extension CSP docs：

内联 JavaScript 将不会被执行。此限制禁止内联 <script> 块和内联事件处理程序（例如 <button onclick="...">）。

您不能在您的扩展 HTML 中包含内联脚本，例如：

<script>alert("I'm an inline script!");</script>

<button onclick="alert('I am an inline script, too!')">

相反，您必须将脚本放入单独的文件中：

<script src="somescript.js"></script>

【讨论】：

如何从 html 按钮调用“somescript.js”中的“alert”？
没关系找到：developer.chrome.com/extensions/…
放宽默认策略在 Chrome v70.0.3538.77 developer.chrome.com/extensions/contentSecurityPolicy#relaxing 中似乎根本不起作用

【解决方案2】：

如果您将 React 与 create-react-app 一起使用：

在项目根目录中创建一个.env 文件
添加变量如下：INLINE_RUNTIME_CHUNK=false
再次构建项目并再次加载扩展。

Source

【讨论】：

这也适用于直接从 CRA（create-react-application）构建的 react 项目。
如果您是 CRA 用户，我可以确认这就是您要查找的内容。
不幸的是，它似乎对我不起作用。也在 React 上。

【解决方案3】：

您必须将content_security_policy 添加到您的manifest.json 文件中：

"content_security_policy": "script-src 'self' 'sha256-B+Qe/KNUDtGDd/m1g5ycAq1DgpLs9ubKmYTlOHBogC8='; object-src 'self'"

你会从控制台找到哈希。

【讨论】：

什么是 sha256-B+Qe/KNUDtGDd/m1g5ycAq1DgpLs9ubKmYTlOHBogC8=，它来自哪里？每次我运行我的应用程序时，它似乎都会发生变化。

【解决方案4】：

我在开发扩展程序时遇到了这个问题。我删除了扩展并再次加载它使错误消息消失。

【讨论】：