Content Security Policy without 'unsafe-inline' for scripts makes all inline scripts fail to load

[Pikey18]

Description

If a user has set a content security policy on the web server it will stop this working due to the inline scripts. Using 'unsafe-inline' for script-src is not recommended as it defeats many of the protections offered.

Server

Ubuntu 22.04
nginx/1.18.0 (Ubuntu)
php8.1-fpm
Content-Security-Policy "default-src 'self'; style-src 'self' 'unsafe-inline'; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests; block-all-mixed-content; base-uri 'self'"

Client

Any modern browser supporting CSP will be affected by this. I use Edge on Windows 11

Steps to reproduce

Coped files from zip to site root
Renamed example-singleServer-gauges.html to index.html

Expected behaviour

Test should have worked.

Errors in console

hostname/:8  Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-zxFL/1PD3wy2aDpXCChWpwDX6eLLEi++/HXRsunC30Q='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

hostname/:260  Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-y4mi89t+COvGgKKd95Svy8ylsoGYVnW3cV/WNekU1Sg='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

How to fix

For the scripts on line 8 and line 260 its easy to add a nonce string to be replaced by the server (as its meant to be unique every page load) or move them into an external js file that is called by index.html (which is the recommended method I believe).

On line 226 that is not an option (onclick is disabled unless 'unsafe-inline' is allowed in scripts) so I modify the line as shown:

<div id="startStopBtn" onclick="startStop()"></div>
<div id="startStopBtn"></div>

I then add this additional script to catch the button being clicked:

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("startStopBtn").addEventListener("click", startStop);
});
</script>

More info on CSP and scripts can be found at https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#unsafe_inline_script

[thgoebel]

The same goes for the inline styles. It would be nice to not need 'unsafe-inline' for style-src.

In general, see https://securityheaders.com/?q=librespeed.org&hide=on&followRedirects=on