jQuery 3.5.1 and CSP script-src-elem

Question

I recently upgraded jQuery from 2.1.1 to 3.5.1 and I started seeing this CSP violation in Chrome browser's console

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-7xyNokwFS08H1wnqtUmzycmiRKTgUZJQZJUN34B0v8A=' 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-+oZkjQp5ZgVWtUq2rV5UqKJhNxGno8jem/DRZmR+mcI='), or a nonce ('nonce-...') is required to enable inline execution.

b @ jquery.min.js:2

However the posted CSP report shows

"csp-report": {
    "document-uri": "https://subdomain.mydomain.com/docs/s",
    "referrer": "https://subdomain.mydomain.com/",
    "violated-directive": "script-src-elem",
    "effective-directive": "script-src-elem",
    "original-policy": "default-src 'none'; script-src 'self' 'nonce-7xyNokwFS08H1wnqtUmzycmiRKTgUZJQZJUN34B0v8A=' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; object-src 'self'; frame-src 'self'; connect-src 'self'; child-src 'self'; report-uri /csp/report;",
    "disposition": "enforce",
    "blocked-uri": "inline",
    "line-number": 2,
    "column-number": 839,
    "source-file": "https://subdomain.mydomain.com/lib/jquery/3.5.1/jquery.min.js",
    "status-code": 0,
    "script-sample": ""
  }

So the violated directive is script-src-elem not script-src as browser's console log shows.

I understand that script-src-elem is added in CSP 3 and If this directive is absent, the user agent will look for the script-src directive, and if both of them are absent, fallback to default-src directive.

If I add script-src-elem 'self' 'unsafe-inline' and keep script-src as it is with nonce, then I don't see any violations.

default-src 'none'; script-src 'self' 'nonce-xxxxxxxx' 'unsafe-eval';script-src-elem 'self' 'unsafe-inline'; .......

I am using Chrome Version 90.0.4430.93 that supports CSP 3, My question is what happens when user agent is not supporting CSP 3? In that case will it fallback to script-src and then throws error because I don't have unsafe-inline for script-src

Answer 1

I recently upgraded jQuery from 2.1.1 to 3.5.1 and I started seeing this CSP violation in Chrome browser's console

jQuery 2.x uses 'unsafe-eval' to execute all scripts when use strict is omitted. This technique unintentionally does bypass the 'nonce-value'.
jQuery 3.x doesn't do that, therefore:

• you do not need to have 'unsafe-eval'unless you do not use eval-expressions on your own.
• you have to use 'nonce-value' to allow inline scripts. You gave a link that jQuery 3.x had an issue with 'nonce-value', and it was fixed since JQuery 3.1.1.

My question is what happens when user agent is not supporting CSP 3? In that case will it fallback to script-src and then throws error because I don't have unsafe-inline for script-src.

The script-src-elem is supported by Chrome only. Other browsers support 'script-src' only.
So Chrome browser will use the policy:

• script-src-elem 'self' 'unsafe-inline' for <script> and <script src=> tags
• script-src 'self' 'nonce-xxxxxxxx' 'unsafe-eval' for inline event handlers and javascript-navigation (since script-src-attr is omitted).

The Firefox/Edge/Safari will use the policy: script-src 'self' 'nonce-xxxxxxxx' 'unsafe-eval'.