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

本文介绍了Chrome 显示错误为:由于内容安全策略拒绝执行内联脚本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

<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 中显示以下代码:

The variables protocol and host take protocol and host from 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:

<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 中调用它，但都没有奏效.

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

谁能告诉我我做错了什么，或者我还应该尝试什么来使它工作?

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

提前致谢...

推荐答案

来自 Chrome 扩展 CSP 文档:

内联 JavaScript 不会被执行.此限制禁止内联块和内联事件处理程序(例如 ).

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

You cannot have inline scripts in your extension HTML like:

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

这篇关于Chrome 显示错误为:由于内容安全策略拒绝执行内联脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！