3

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

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

jQuery Error

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

Armen Michaeli
  • 8,625
  • 8
  • 58
  • 95
notexactly
  • 918
  • 1
  • 5
  • 21
  • look into this https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined – Malik Junaid Ramzan Nov 17 '21 at 14:16
  • 1
    Your CSP header should be `script-src 'self' https://code.jquery.com;` https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src – Liam Nov 17 '21 at 14:18
  • @MalikJunaidRamzan I clarified in my post that I have already looked at that link – notexactly Nov 17 '21 at 14:18
  • @Liam That did not work for me either. This is the error I got: `Refused to load the script 'https://code.jquery.com/jquery-3.6.0.min.js' because it violates the following Content Security Policy directive: "script-src 'self' code.jquery.com". ...` – notexactly Nov 17 '21 at 14:22
  • 1
    Needs `https`. You should really read the link I posted. It's all explained there – Liam Nov 17 '21 at 14:22

2 Answers2

2

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.

Armen Michaeli
  • 8,625
  • 8
  • 58
  • 95
0

You have 2 issues because of jQuery:

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

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

granty
  • 7,234
  • 1
  • 14
  • 21