jquery Chrome显示错误为：由于内容安全策略，拒绝执行内联脚本

du7egjpx 于 2022-12-26 发布在 jQuery

关注(0)|答案(4)|浏览(297)

我正在创建一个图片裁剪小部件的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扩展时，它不工作。当它工作正常时，它在文本区域显示以下代码：

<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

来源：https://stackoverflow.com/questions/16145522/chrome-showing-error-as-refused-to-execute-inline-script-because-of-content-sec

4条答案

按热度按时间

sqxo8psd1#

来自Chrome扩展CSP文档：
将不执行内联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>

赞(0）回复(0）举报 2022-12-26

piwo6bdm2#

如果您将React与create-react-app配合使用：
1.在项目根目录下创建.env文件
1.添加变量如下：INLINE_RUNTIME_CHUNK=false
1.再次生成项目并再次加载扩展。
Source

赞(0）回复(0）举报 2022-12-26

kyks70gy3#

您必须将content_security_policy添加到manifest.json文件中：
"content_security_policy": "script-src 'self' 'sha256-B+Qe/KNUDtGDd/m1g5ycAq1DgpLs9ubKmYTlOHBogC8='; object-src 'self'"
您将从控制台中找到哈希。