Extension refuses to load the script due to Content Security Policy directive

Question

Following is my code of HTML

Scripts:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="background.js"></script>

HTML:

      <button name="btnlogin" id="btnlogin">Login</button><br/><br/>

and following is js

$(document).ready(function(){
document.getElementById("#btnlogin").click(function(){
   alert("s");
 });
});

manifest file:

{
"manifest_version": 2,
"name": "One-click Kittens",
"description": "This extension demonstrates a 'browser action' with kittens.",
 "version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
}

I found that when I run this code simply in browser than alert appears properly but when I run it as a chrome extension it gives me following errors.

Uncaught ReferenceError: $ is not defined

and

Refused to load the script 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

I don't understand what are these errors. Please help me understanding the extension..

Thank you

It sounds like maybe you're following a guide on making old version 1 manifest extensions... `$ is not defined` means jquery wasn't loaded, and the second message is telling you the reason why jquery wasn't loaded. You should show us your manifest for the extension. Here are the docs for extension manifests: https://developer.chrome.com/extensions/manifest — James, Sep 16 '14 at 11:35
I have download jquery file and linked it to HTML page. That has got the thing working, But what about the update or migration of jquery? — Maharshi, Jan 22 '18 at 05:08

score 83 · Accepted Answer · edited Jun 20 '20 at 09:12

83

In a Chrome extension, external script sources must be explicitly allowed by the extension's content security policy (CSP) in your manifest:

If you have a need for some external JavaScript or object resources, you can relax the policy to a limited extent by whitelisting secure origins from which scripts should be accepted...

A relaxed policy definition which allows script resources to be loaded from example.com over HTTPS might look like:
"content_security_policy":"script-src 'self' https://example.com; object-src 'self'"

Scripts can only be loaded into an extension over HTTPS, so you must load the jQuery CDN resource over HTTPS:

<script src="https://ajax.googleapis.com/..."></script>

And add a modified CSP to your manifest to allow that HTTPS resource:

{
    "manifest_version": 2,
    "name": "One-click Kittens",
    "description": "This extension demonstrates a 'browser action' with kittens.",
    "version": "1.0",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}

And even better solution for your particular case, however, would be to include jQuery in your extension locally, instead of loading from the Internet (for example, your extension currently won't work offline). Simply include a copy of jQuery in your extension folder and refer to it with a relative path in your script tag. Assuming your jQuery library and HTML popup file are in the same subdirectory, simply do:

<script src="jquery-x.y.z.min.js"></script>

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 16 '14 at 12:15

apsillers

112,806
17
235
239

5

What if you have multiple urls you need to allow? I don't see any example of how to achieve that in the documentation. – The Muffin Man Sep 20 '15 at 20:51
3

@TheMuffinMan Just separate them by spaces. Note that the CSP is general Web standard that is borrowed by Chrome aops/extensions; you may have better luck looking for CSP docs/grammar in general. – apsillers Sep 20 '15 at 20:56
1

@apsillers I am using an API in a chrome extension which is served over http only. I am facing the same error. Could you provide your thought over this? API sample link: http://loklak.org/api/search.json?q=from%3Atwitter – Aditya C Dec 17 '16 at 19:20
2

@AdityaC It's been a while since I've done Chrome extension development, but I don't think there is a strict HTTPS requirement for non-script resources. Just add the domain to your permissions and fetch the JSON. You'll need to share your code (in a new question) and your specific error. – apsillers Dec 17 '16 at 21:42
10

Multiple URLs look like this: `"content_security_policy":"script-src 'self' https://example.com https://anotherexample.com; object-src 'self'"` – Simon Hutchison May 12 '17 at 02:11
2

And make sure not to put a slash after the domain like I stupidly did... – OctaviaLo Sep 22 '17 at 15:52
1

I've got jquery, bootstrap etc. in a local directory and everything works fine. But why is it better to use local vs. link to https CDN in CSP? – 11teenth Nov 20 '17 at 18:42
3

any idea how to do this at "manifest_version": 3 ? – Tahero Apr 16 '21 at 22:34

score -7 · Answer 2 · edited Jun 13 '18 at 13:21

-7

<script nonce='<?= CSP::getNonce() ?>'>
var oldCreate = document.__proto__.createElement;
document.__proto__.createElement = function (elementName) {      
    var el = oldCreate.apply(this, arguments);
    if (elementName == "script") {           
        el.setAttribute('nonce', '<?= CSP::getNonce() ?>');
    }
    return el;
}
</script>

<script nonce='<?= CSP::getNonce()?>' type="text/javascript" src="/include/jquery.js"></script>

edited Jun 13 '18 at 13:21

sticky bit

36,626
12
31
42

answered Jun 13 '18 at 12:20

Stanislav

31
2

This does not answer the question. It doesn't give any valuable information. And it uses different languages/libraries than those asked in the question. – lpratlong Nov 18 '19 at 10:07

Extension refuses to load the script due to Content Security Policy directive

2 Answers2

Linked

Related