Cannot load jQuery because it violates Content Security Policy

Question

I wrote a server on node + express. Prepared the page for rendering, wrote scripts in JS using Jquery. But Jquery can't load the page for some reason. This is a constant case, before I wrote the ToDo application on WebSockets and I had the same error. What is the problem and how to solve it? Help please. Error: Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

I tried adding different meta tags from other sources, but it didn't help.

Please provide a [mcve]. Are you using jQuery in the backend or in the frontend? — Thomas Sablik, Sep 27 '20 at 08:15
it looks like you have the wrong configuration for the CSP header, which doesn't allow to load jquery from third party domains — Anton Kononenko, Sep 27 '20 at 08:19
Back-end: node.js + express Front-end: jQuery on the back side I just render the page — MrProper, Sep 27 '20 at 08:19
I'd guess you're using Helmet 4, which sets stricter default rules than it used to, see e.g. https://github.com/textbook/starter-kit/wiki/Content-Security-Policy — jonrsharpe, Sep 27 '20 at 08:25

user1063287 · Answer 1 · 2020-09-27T08:29:46.137

Content Security Policy is a fairly big topic and it made me stumble for a while.

I ended up using helmet, which includes the ability to define settings for Content Security Policy, like this:

app.use(
    helmet({
        contentSecurityPolicy: {
            directives: {
                defaultSrc: ["'self'"],
                scriptSrc: ["'self'", "https://maps.googleapis.com", "https://www.google.com", "https://www.gstatic.com"],
                connectSrc: ["'self'", "https://some-domain.com", "https://some.other.domain.com"],
                styleSrc: ["'self'", "fonts.googleapis.com", "'unsafe-inline'"],
                fontSrc: ["'self'", "fonts.gstatic.com"],
                imgSrc: ["'self'", "https://maps.gstatic.com", "https://maps.googleapis.com", "data:", "https://another-domain.com"],
                frameSrc: ["'self'", "https://www.google.com"]
            }
        },
    })
);

I found the ability to define rules using this syntax was easier for me and helped me understand Content Security Policy more.

Helmet is mentioned in the express.js security docs and this node best practises blog.

Further context for my particular situation, is documented in an answer I posted here.

T.J. Crowder · Accepted Answer · 2020-09-27T08:27:00.243

This is one of the better error messages in that it's fairly specific: You've set the Content Security Policy for the page to script-src: 'self'. The script-src policy controls what sources are valid sources for JavaScript, and self means that only sources that are the same origin as the document itself are valid.

You can fix this in one of three ways:

Modify the Content-Security-Policy header being returned with the page to not include script-src: self, or
Modify the Content-Security-Policy header adding https://cdnjs.cloudflare.com as as valid source (the list is space-separated), like this:

Content-Security-Policy: 'self' https://cdnjs.cloudflare.com

or
Use a local copy of jQuery served from the same origin as the page

@t-j-crowder i am still getting error like mentiond in gist https://gist.github.com/matt212/a92fb309293d7843a82d9e8b47b1f88c — Rizwan Patel, Aug 02 '22 at 12:14

Cannot load jQuery because it violates Content Security Policy

2 Answers2