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

Question

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?

You need to place all the code in an external file. You can't have any inline code. — BeardFist, Apr 22 '13 at 15:59

score 102 · Accepted Answer · answered Apr 22 '13 at 18:16

102

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>

answered Apr 22 '13 at 18:16

apsillers

112,806
17
235
239

2

How do I invoke "alert" in the "somescript.js" from the html button? – zezba9000 Sep 03 '14 at 08:44
2

Never mind found: https://developer.chrome.com/extensions/tut_migration_to_manifest_v2#inline_scripts – zezba9000 Sep 03 '14 at 08:46
Relaxing the default policy doesn't seem to work at all in Chrome v70.0.3538.77 https://developer.chrome.com/extensions/contentSecurityPolicy#relaxing – lasec0203 Nov 05 '18 at 05:54

dasfdsa · Answer 2 · 2021-02-02T12:35:48.000

32

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

create a .env file in project root
Add variable as follows: INLINE_RUNTIME_CHUNK=false
Build the project again and load the extension again.

Source

edited Feb 02 '21 at 12:35

answered Jan 07 '20 at 12:54

dasfdsa

7,102
8
51
93

This works with react project which built directly from CRA(create-react-application), too. – keikai May 08 '20 at 02:24
3

If you are a CRA user, I can confirm this is what you're looking for. – jamesmfriedman Jun 05 '20 at 13:39
Unfortunately it doesn't seem to work with me. Also on React. – Diego Fortes May 10 '21 at 05:31

score 13 · Answer 3 · edited Jul 05 '19 at 07:34

13

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.

edited Jul 05 '19 at 07:34

Bartleby

1,144
1
13
14

answered Sep 25 '18 at 12:24

emon

1,629
1
17
18

21

what is the sha256-B+Qe/KNUDtGDd/m1g5ycAq1DgpLs9ubKmYTlOHBogC8= and where does it come from? It seems to change everytime I run my application. – Karl Merecido Oct 05 '18 at 15:43

score 0 · Answer 4 · answered Mar 19 '21 at 18:15

0

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.

answered Mar 19 '21 at 18:15

Hatem Jaber

2,341
2
22
38

Same here, but this used to work, now it happens multiple times a day, and have to remove & add it every time. (It only happens within the popup.html though) – TrySpace Aug 04 '22 at 09:07

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

4 Answers4

Linked