Content-Security-Policy header implementation?
Please fill out the templates below to the best of your ability, based on whether your problem is with using the website or with running your own server.
Website Problem
Please confirm whether you've tried the following debugging steps:
- [ x ] Clearing cache and refreshing the page (On Firefox, press Ctrl+F5. On Chrome, press F12, then right click the refresh button and click "Empty Cache and Hard Reload")
- [ x ] Disabling all browser extensions
- [ x ] Using a clean channel with no customizations
Description of the Problem
- What triggers the problem? missing CSP headers cause content to be blocked
- What happens? Nothing load except the bare minimum allowed in the pretty stricht default CSP for my webservers
- What do you expect to happen instead? the sync server to send appropriate CSP headers, so the default CSP will be overridden.
System Information
- Operating System (Windows / Mac / Linux / Android / iOS): w10, ubuntu server
- Web Browser (Firefox / Chrome / Other): firefox
-
Error Messages Displayed:
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). .MYDOMAIN.COM:11:1 Uncaught ReferenceError: DEFAULT_THEME is not defined <anonymous> https://.MYDOMAIN.COM/js/theme.js:7 <anonymous> https://.MYDOMAIN.COM/js/theme.js:30 theme.js:7:15 Content Security Policy: The page’s settings blocked the loading of a resource at https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.eot?#iefix (“font-src”). Content Security Policy: The page’s settings blocked the loading of a resource at https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.woff (“font-src”). Content Security Policy: The page’s settings blocked the loading of a resource at https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.ttf (“font-src”). Content Security Policy: The page’s settings blocked the loading of a resource at https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular (“font-src”). Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). jquery-1.11.0.min.js:3:4153 Loading failed for the <script> with source “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js”. .MYDOMAIN.COM:85:1 Content Security Policy: The page’s settings blocked the loading of a resource at https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js (“script-src”). Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). .MYDOMAIN.COM:86:1 Content Security Policy: The page’s settings blocked the loading of a resource at https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.eot?#iefix (“font-src”). css-logic.js:517:31 Content Security Policy: The page’s settings blocked the loading of a resource at https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.woff (“font-src”). css-logic.js:517:31 Content Security Policy: The page’s settings blocked the loading of a resource at https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.ttf (“font-src”). css-logic.js:517:31 Content Security Policy: The page’s settings blocked the loading of a resource at https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular (“font-src”). css-logic.js:517:31 -
Screenshot of JavaScript Console:
On Firefox, press Ctrl+Shift+K to open the JavaScript console. On Chrome, press Ctrl+Shift+J.
Description of the Problem
- What triggers the problem? Adding a Content-Security-Policy header to the HTTP block of the NGINX on the web-facing reverse proxy.
- What happens? the CSP header tells the browser to block everything that is not being mentioned in the strict global CSP header
- What do you expect to happen instead? To override my CSP header with a suitable CSP header - "Laboratory" by Mozilla for Firefox tells me to use this CSP header, which seems to catch all resources necessary:
add_header Content-Security-Policy " default-src 'none'; connect-src 'self' https://sync.MYDOMAIN.COM:8443/socket.io/ wss://sync.MYDOMAIN.COM:8443/socket.io/; font-src 'self' data: https://maxcdn.bootstrapcdn.com; frame-src https://www.youtube.com; img-src 'self' https://i.ytimg.com https://MYDOMAIN.COM https://MYDOMAIN.COM https://yolo.MYDOMAIN.COM https://yolo.MYDOMAIN.COM; media-src 'self'; script-src 'self' 'unsafe-inline' https://api.dmcdn.net/all.js https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js https://player.twitch.tv/js/embed/v1.js https://player.vimeo.com/api/player.js https://sync.MYDOMAIN.COM:8443/socket.io/socket.io.js https://www.youtube.com/iframe_api https://www.youtube.com/s/player/4fe52f49/www-widgetapi.vflset/www-widgetapi.js;style-src 'self' 'unsafe-inline' https://code.jquery.com/ui/1.10.3/themes/smoothness/ ";
With this header, everything seems to be working again.
System Information
- Operating System:
- Ubuntu 20.04.2 LTS
-
Node Version: (run
node -v) - v14.16.0
- CyTube Version: (displayed at startup)
- I tried to get the Cytube version, but could not figure this out. Ill try again tomorrow. Should be around nov/dec 2020.
- Error Messages Displayed:
Have you tried using the above string in your nginx configuration? You should be able to override headers inside a server or location block.