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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16145522/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 16:32:30  来源:igfitidea点击:

Chrome showing error as: Refused to execute inline script because of Content-Security-Policy

jquerygoogle-chromegoogle-chrome-extension

提问by V15HM4Y

I am working on creating a Chrome Extension of an Image Cropping Widget. The code of my popup.htmlis as follows:

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

The variables protocoland hosttake protocoland hostfrom URL in the browser. When I tried to integrate this as a Chrome extension, it is not working. When it works perfectly, it displays following code in the textarea:

变量协议主机从浏览器中的 URL获取协议主机。当我尝试将其集成为 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>

I have things few things like, placing the JS code in external JS file and and also calling the file in manifest.jsoncalling it in my popup.html, but none worked.

我有一些事情,比如将 JS 代码放在外部 JS 文件中,并manifest.json在我的popup.html.

Can anyone tell me what I am doing wrong, or what else should I try to make it work?

任何人都可以告诉我我做错了什么,或者我还应该尝试什么使它起作用?

Thanks in advance...

提前致谢...

回答by apsillers

From the Chrome extension CSP docs:

来自Chrome 扩展 CSP 文档

Inline JavaScript will not be executed. This restriction bans both inline <script>blocks and inline event handlers (e.g. <button onclick="...">).

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

You cannothave inline scripts in your extension HTML like:

您的扩展 HTML 中不能包含内联脚本,例如:

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

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

Rather, you must place your script into a separate file:

相反,您必须将脚本放入一个单独的文件中:

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

回答by emon

You have to add content_security_policyto your manifest.jsonfile:

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

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

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

You will find the hash from console.

您将在控制台中找到哈希值。

enter image description here

在此处输入图片说明

回答by dasfdsa

If you are using React:

如果您使用的是 React:

  1. create a .envfile in project root

  2. Add variable as follows: INLINE_RUNTIME_CHUNK=false

  3. Build the project again and load the extension again.

  1. .env在项目根目录下创建一个文件

  2. 添加变量如下: INLINE_RUNTIME_CHUNK=false

  3. 再次构建项目并再次加载扩展。

Source

来源