CODEWITHSUNDEEP
google-chromegoogle-chrome-extensiongoogle-chrome-app
user2564356
user2564356

Reputation: 785

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

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=

Upvotes: 72

Views: 269100

Answers (8)

Dmitri Algazin
Dmitri Algazin

Reputation: 3456

Came to same issue just now.

I am getting similar console error with type="application/javascript"

 <script type="application/javascript">...</script>

but not with type="javascript"

 <script type="javascript">...</script>

Not sure if that helps someone, helped me.

Upvotes: 0

Rohit Chauhan
Rohit Chauhan

Reputation: 362

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

Upvotes: 0

Adebisi
Adebisi

Reputation: 79

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.

Upvotes: 0

jacobkim
jacobkim

Reputation: 1090

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.

Upvotes: 0

道生一
道生一

Reputation: 71

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.

Upvotes: 7

Ctrl-Zed
Ctrl-Zed

Reputation: 687

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

Upvotes: 0

Rana.Asif
Rana.Asif

Reputation: 453

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>

Upvotes: -1

virender
virender

Reputation: 4647

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

enter image description here

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

Upvotes: 23

Related Questions