CODEWITHSUNDEEP
jquerygoogle-chromegoogle-chrome-extension
V15HM4Y
V15HM4Y

Reputation: 1795

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

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>

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>

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?

Upvotes: 66

Views: 112065

Answers (4)

Hatem Jaber
Hatem Jaber

Reputation: 2402

I just ran into this issue as I was developing an extension. I removed the extension and loaded it again which made the error message disappear.

Upvotes: 0

Sandeep Gupta
Sandeep Gupta

Reputation: 7250

If you are using React with create-react-app:

  1. create a .env file in project root

  2. Add variable as follows: INLINE_RUNTIME_CHUNK=false

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

Source

Upvotes: 32

emon
emon

Reputation: 1949

You have to add content_security_policy to your manifest.json file:

"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

Upvotes: 13

apsillers
apsillers

Reputation: 115910

From the Chrome extension CSP docs:

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

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>

Upvotes: 105

Related Questions