Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'"

Question

Im creating a chrome extension for Rss reader in that im getting the above error. please help

manifest.json

{
    "name": "Tutorialzine Extension",
    "manifest_version": 2,
    "version": "1.1",
    "description": "Making your first Google Chrome extension.",
    "icons": {
        "128": "icon_128.png"
    },
    "web_accessible_resources": ["script.js", "https://query.yahooapis.com"],
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "tutorialzine.html"
    },
    "permissions": [
        "tabs", 
        "<all_urls", 
        "http://localhost/",
        "http://*/*", 
        "https://*/*", 
        "https://query.yahooapis.com"
    ],
    "content_security_policy": "script-src 'self'; 'https://query.yahooapis.com';unsafe-inline; object-src 'self'"
}

script.js

$(document).ready(function () {

    var query = "SELECT * FROM feed WHERE url='http://feeds.feedburner.com/Tutorialzine' LIMIT 2";

    // Storing the seconds since the epoch in now:
    var now = (new Date()).getTime() / 1000;

    // If there is no cache set in localStorage, or the cache is older than 1 hour:
    if (!localStorage.cache || now - parseInt(localStorage.time) > 1 * 60 * 60) {
        $.get("yahoo.js", function (msg) {

            // msg.query.results.item is an array:
            var items = msg.query.results.item;
            var htmlString = "";

            for (var i = 0; i < items.length; i++) {
                var tut = items[i];

                // Extracting the post ID from the permalink:
                var id = tut.guid.content.match(/(\d+)$/)[0];

                // Looping and generating the markup of the tutorials:

                htmlString += '<div class="tutorial">\
                            <img src="http://tutorialzine.com/img/posts/' + id + '.jpg" />\
                            <h2>' + tut.title + '</h2>\
                            <p>' + tut.description + '</p>\
                            <a href="' + tut.link + '" target="_blank">Read more</a>\
                            </div>';
            }

            // Setting the cache
            localStorage.cache = htmlString;
            localStorage.time = now;

            // Updating the content div:
            $('#content').html(htmlString);
        }, 'json');
    } else {
        // The cache is fresh, use it:
        $('#content').html(localStorage.cache);
    }
}

Error in jquery.min.js:

Jquery.min.js contains inline script what to do

parentNode:d.removeChild(d.appendChild(s.createElement("div"))).parentNode===null,deleteExpando:true,checkClone:false,scriptEval:false,noCloneEvent:true,boxModel:null};b.type="text/javascript";try{b.appendChild(s.createTextNode("window."+f+"=1;"))}catch(i){}a.insertBefore(b,a.firstChild);if(A[f]){c.support.scriptEval=true;delete A[f]}try{delete b.test}catch(o){c.support.deleteExpando=false}a.removeChild(b);if(d.attachEvent&&d.fireEvent){d.attachEvent("onclick",function k(){c.support.noCloneEvent=

Your CSP has a few errors. It should read: `"script-src 'self' https://query.yahooapis.com; object-src 'self'"`. Also `https://query.yahooapis.com` is not necessary in `web_accessible_resources`; that array is for locally-hosted extension resources you want to be made available to regular, non-extension webpages. — apsillers, Jul 15 '13 at 15:04
Should not be tagged google-chrome-app, as CSP issues are different between apps and extensions. — Marc Rochkind, Nov 02 '13 at 16:38

score 21 · Answer 1 · edited Dec 05 '19 at 21:30

21

I also faced such type of problem when working with LinkedIn oAuth API.

I was using linkedIn API with following settings for cordova

config.xml

 <access origin="*" launch-external="yes"/>
  <allow-navigation href="*" />

Meta Tag was

 <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

Script

<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script>

When i run the application on emulator its giving

Fixed Problem to add uri into meta tag http://platform.linkedin.com like

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://platform.linkedin.com ">

edited Dec 05 '19 at 21:30

O'Neil

3,790
4
16
30

answered Sep 30 '15 at 10:10

virender

4,539
5
27
31

7

bare in mind using unsafe-eval and unsafe-inline is a security risk. You might be ok just using 'self' and 'unsafe-inline'. – George Oct 26 '17 at 10:19
1

'unsafe-inline' is a violation you might as well not have CSP – GregJF Mar 10 '20 at 21:44
@George what is the alternate way of unsafe-inline – Chirag Patel Jun 24 '21 at 09:01
3

@ChiragPatel I believe although not certain, the best solution, is to use a hash string generated at build time, or a nonce value generated dynamically server side. But I may be completely wrong so I recommend researching trusted sources first. I'm not a security expert so mind my tentative language. – George Jun 26 '21 at 14:07

score 3 · Answer 2 · answered Oct 11 '22 at 08:43

3

I've encountered it before, however, I'm not sure if your situation is the same as mine. In my case, in the chrome extension, the html file is prohibited from running inline scripts. After I separate the script into a js file, the problem is solved.

answered Oct 11 '22 at 08:43

道生一

31
1

score 1 · Answer 3 · answered Jan 15 '21 at 17:23

1

It can be reason if you have this code in your htaccess. CommentOut this can fix your issue

<IfModule mod_headers.c>
  Header set Content-Security-Policy "script-src 'self' https://www.example.com/"
</IfModule>

answered Jan 15 '21 at 17:23

Rana.Asif

397
2
10

score 1 · Answer 4 · answered Feb 20 '23 at 07:50

1

Just add meta tag in head section for non-secure url use below

for secure url use below

 <meta https-equiv="Content-Security-Policy" content="default-src *;" />

flush cache

Issue will be resolved. Happy Coding!!

answered Feb 20 '23 at 07:50

Rohit Chauhan

356
1
14

score 0 · Answer 5 · answered Feb 13 '22 at 16:49

I had this error a couple of times in a few days, for no apparent reason (I forget the first "cause", but the second occurrance of this message was after a machine restart).

No amount of returning to previous working branches helped, nor adding the meta tags detailed in this question and here (basically the same).

So I deleted node_modules, and it's gone away now, and all is working well. Maybe someone else's code is as random as mine...

score 0 · Answer 6 · answered Dec 14 '22 at 08:57

It's not such extension case but I had same error message on browser debug console. The error is solved by attaching script file at script tag.

I should upload html file with script on node js server. The script below gave the error message.


<html>
...
<script>
...
//code

</script>
</html>

But attaching js file into script tag solved problem,


<html>
...
<script type="text/javascript" src="path/to/script-name.js"></script>

</html>

Seems attaching js file from the machine doesn't give the content security policy error not like just putting script tag below html file.

score 0 · Answer 7 · answered Jan 04 '23 at 10:54

0

Just adjust your build script in package.json to this

"build": "set \"INLINE_RUNTIME_CHUNK=false\" && react-scripts build"

the run npm run build or yarn build again.

answered Jan 04 '23 at 10:54

Adebisi

11
2

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'"

7 Answers7

Linked