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

du7egjpx  于 2022-12-26  发布在  jQuery
关注(0)|答案(4)|浏览(296)

我正在创建一个图片裁剪小部件的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>

变量protocolhost从浏览器中的URL获取 protocolhost。当我尝试将其集成为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中调用它,但都不起作用。
谁能告诉我我做错了什么,或者我还应该做些什么来使它工作?

sqxo8psd

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

piwo6bdm2#

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

kyks70gy

kyks70gy3#

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

ohfgkhjo

ohfgkhjo4#

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

相关问题