Electron.js does not load jQuery due to security policy-CodePudding

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?

CodePudding user response：

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 is alone why Electron denies loading of the scripts in question.

The value of the content attribute above has the effect of instructing Electron to only allow loading scripts from the same origin as the origin of the document containing the meta element. That effectively excludes every other origin like https://code.jquery.com and inline scripts (which have to be allowed explicitly). Basically, the value is to be interpreted as "only allow loading scripts from the same site".

Simpler put, you yourself prohibit loading of scripts from the kind of locations you then attempt to use, with that meta element.

You need to learn how Content Security Policy mechanism works and applies in your case. You will have to decide whether you want to allow loading of scripts from origins like code.jquery.com, or whether, for example, you will only want to allow loading scripts from your website, which in turn will probably necessitate you copying the JQuery library you want to use to be served by your website. You also will have to decide if you want to allow "inline" scripts on your site, for whatever reason you may consider necessary.

The security policy 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. But you need to use it correctly, obviously.

CodePudding user response：

You have 2 issues because of jQuery:

script-src 'self' does not allow to load script from https://code.jquery.com/jquery-3.6.0.min.js, that's why you observe Refused to load the script 'https://code.jquery.com/jquery-3.6.0.min.js'... error.
You have to adjust your CSP at least as script-src 'self' https://code.jquery.com;.
After page loads, the jQuery pick up all scripts having $() and place them into one inline script in the <head> section. That's why you observe Refused to execute inline script ... error.
This inline script can be resolved with either 'unsafe-inline' or 'unsafe-eval' or 'nonce-value'(for jQuery > 3.4).

Allowing 'unsafe-inline' is a very harmful advice, since such CSP will not protect against XSS at all (https://youtu.be/zlH_bBQMgkc?t=717).

Also Electron does not have the technical ability to refresh the 'nonce' value.

Therefore, the most secure CSP you can do is:

script-src 'self' 'unsafe-eval' https://code.jquery.com;

or much better:

default-src 'self'; script-src 'self' 'unsafe-eval' https://code.jquery.com;

Note: Contrary to a common misconception, 'self' does not mean the Same Origin Policy, CSP interprets 'self' much more broadly.