Electron.js does not load jQuery due to security policy

Question

I am trying to load jQuery in Electron (v. 16.0.0), but I get this error:

Inside the head element I have included this line:

<meta http-equiv="Content-Security-Policy" content="script-src 'self';">

Also, inside the body element, I am trying to load jQuery like this:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

I have tried so many ways to find a solution for this, but to no avail. Previously, I also tried to load jQuery like this, but it gave me a similar error, shown below:

<script>window.$ = window.jQuery = require('./libraries/jQuery/jquery.min.js');</script>

Answers to a related question did not work for me either. What should I do?

Answer 1

The reason Electron, or any other Web browser that implements Content Security Policy, for that matter, would correctly refuse to load a script from an arbitrary origin (URL), or even an "inline" script (e.g. script text inside a script element), is because your security policy is explicitly specified to deny such attempts, with that meta element you said you added:

<meta http-equiv="Content-Security-Policy" content="script-src 'self';">

Why did you add it? Was it there by someone else's hand? Why is it there? It's the reason why Electron denies loading of the scripts in question.

The value of the content attribute above, consisting of a single policy "directive" script-src 'self';, has the effect of instructing Electron to only permit loading scripts (the script-src part of the directive) from the same origin (the 'self' part) as that of the document containing the meta element.

An origin is determined by the scheme and authority of the URL, nothing more and nothing less. This means a document served over HTTPS by code.jquery.com is considered to have a different origin than either one of the following:

• A document served over HTTP from code.jquery.com (different scheme, same authority)
• A document served over HTTPS from www.jquery.com or jquery.com (same scheme, different authority)

Importantly, 'self' also effectively excludes inline scripts -- these always have each their own distinct origin that matches no other origin, not even that of another inline script. This is in part because a script may modify the document, including adding a script element with arbitrary inline content or altering the body of another inline script. To allow inline scripts, the additional directive argument unsafe-inline is required.

Rounding back to your use case, you yourself prohibit loading of scripts from the kind of locations you then attempt to use, with that meta element of yours.

I advise you to learn how the Content Security Policy mechanism works, so you can understand the error in your use case. As it is, you will have to decide whether you want to allow loading of scripts from domains (authorities) like "code.jquery.com", or whether, for example, you will only want to allow loading scripts from your (first-party) website, which in turn will probably necessitate you installing a copy of the JQuery library to be served by your website. You will also have to decide if you want to allow "inline" scripts on your site, if necessary.

The CSP mechanism itself is very useful, don't shy away from it, it's there for a reason -- to help you prevent abuse of your site users by malicious scripts loaded by other malicious scripts or mechanisms. Once you understand better what it does, I think you'll appreciate it. But first you need to learn to use it correctly, obviously.