Content Security Policy without 'unsafe-inline' for scripts makes all inline scripts fail to load
Pikey18 opened this issue · comments
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
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