Error loading jQuery due to content security policies

Question

Getting this error in console when trying to use jquery (Using Velocity framework) have also tryed loading locally however this only effect the first error. Its occuring in firefox as well as chrome. Can run all my jquery perfectly with a CSP disabler extension installed. I have tried using Jquery locally however this only fixes the top error. The header is:

<title>January 24th Data</title>
  <link rel="stylesheet" type="text/css" href="#{url_for_solr}/admin/file?file=/velocity/main.css&contentType=text/css"/>
  <link rel="stylesheet" href="#{url_for_solr}/admin/file?file=/velocity/jquery.autocomplete.css&contentType=text/css" type="text/css" />
  <link rel="icon" type="image/x-icon" href="#{url_root}/img/favicon.ico"/>
  <link rel="shortcut icon" type="image/x-icon" href="#{url_root}/img/favicon.ico"/>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>

I have also tryed with various meta tags such as:

<meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' 'unsafe-eval' https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js ">

and

<meta http-equiv="Content-Security-Policy" content="default-src 'self'"/>

Both of which produce an error

Refused to load the script 'https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.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.

browse:14 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-EEZjyUio8FlS902ztJpL8uRYUNYVS1mLZ/8u4HDG/jE='), or a nonce ('nonce-...') is required to enable inline execution.

browse:17 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-LApJsdLo7vk6YtbqazNnR38dRhcyeKgEoa4zEa3XKrI='), or a nonce ('nonce-...') is required to enable inline execution.

browse:85 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-8+TwCa2kVmht+Zv7JozUicDwebbcWW8Zui+wm+CicLY='), or a nonce ('nonce-...') is required to enable inline execution.

browse:2027 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-Xl23u/E+jl0/+EjbGlC/oBQtvgkQ+6c83bxQ5f45NpU='), or a nonce ('nonce-...') is required to enable inline execution.

Answer 1

Explanation

Content Security Policy is a scheme developed to prevent the execution of unverified javascript code on a browser. In order for you to include scripts to HTML files, you need to provide an authentication method to the browser.

Solution

There are mainly two methods, one is nonce and the other is hashing.

Nonce

A nonce is a sequence of randomly generated bytes that is sent to a browser as a response header and attached to <script> tag. When they match, the script is verified; therefore it is eligible for execution.

Due to the difficulty of inserting random bytes to a HTML file directly, it is mainly used in server-side rendering (SSR). I'm not sure whether it can be used in client-side rendering (CSR) as well.

Hashing

This method uses a hash value of a script for integrity checking. This need not be inserted into the browser and can be embedded in the response header.

For example, you want a script from CDN, say:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>

then you need to provide the hash value of that script to the response header.

You can find more information here.

As stated in the error message,

Refused to load the script 'https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.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.

browse:14 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-EEZjyUio8FlS902ztJpL8uRYUNYVS1mLZ/8u4HDG/jE='), or a nonce ('nonce-...') is required to enable inline execution.

browse:17 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-LApJsdLo7vk6YtbqazNnR38dRhcyeKgEoa4zEa3XKrI='), or a nonce ('nonce-...') is required to enable inline execution.

browse:85 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-8+TwCa2kVmht+Zv7JozUicDwebbcWW8Zui+wm+CicLY='), or a nonce ('nonce-...') is required to enable inline execution.

browse:2027 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-Xl23u/E+jl0/+EjbGlC/oBQtvgkQ+6c83bxQ5f45NpU='), or a nonce ('nonce-...') is required to enable inline execution.

it says you either have to use nonce or hash.

You can use those hash values directly like

<meta http-equiv="Content-Security-Policy" content="script-src-elem sha256-${HASH_VALUE} https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js;" />