Using Safari 11.0 I am receiving an error trying to load a CSS resource on a website I maintain. The page loads fine in Chrome and Firefox, and used to load fine in Safari, so I'm not sure how to resolve it. I'm guessing I need to modify the Content-Security-Policy header.
The specific error from the Safari console is Refused to load https://****.com/css/styles.css because it does not appear in the style-src directive of the Content Security Policy. As a result of this, the styles.css file isn't loading and the website is rendered incorrectly.
The security headers for the website (set via caddy) are:
Content-Security-Policy default-src 'self' https:; script-src 'self'; style-src 'self'; object-src 'none'
Content-Type text/html; charset=utf-8
Referrer-Policy strict-origin
Server Caddy
Strict-Transport-Security max-age=31536000; includeSubDomains; preload
Change the style-src part of the Content-Security-Policy header value so that it’s instead style-src 'self' https://****.com. That is, replace the ****.com in https://****.com with whatever the actual hostname is.
Related
I have the following setup in my apache conf for security:
Header always append X-Frame-Options SAMEORIGIN
Header always set X-XSS-Protection "1; mode=block"
Header always set X-Content-Type-Options: nosniff
Header set Content-Security-Policy "default-src 'self' 'unsafe-inline' gatewayt.moneries.com 'unsafe-eval';"
Header always set Referrer-Policy: strict-origin-when-cross-origin
I have 2 different errors for 2 different applications. I just want to allow moneries and gooleapis to be able to run scripts and style sheets from my apache server.
1.
Refused to load the script 'https://gatewayt.moneris.com/chkt/js/chkt_v1.00.js' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' gatewayt.moneries.com 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Droid+Sans:400,700' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' ottawa.ca 'unsafe-eval'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
<SERVER DOMAIN NAME>/:1 Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Droid+Sans:400,700' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' ottawa.ca 'unsafe-eval'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
I've tried searching the web, but had no luck. I've been using Chrome/Edge to work on my website and today I tried to open it in Firefox (93.0) and I noticed that none of my icons are loading. This error message appears in console:
Content Security Policy: The page’s settings blocked the loading of a
resource at http://localhost/icons.svg (“default-src”).
This seems to indicate that the default-src was used as a fallback. I'm running an Apache server with this CSP:
Header set Content-Security-Policy "default-src 'none'; img-src 'self'; object-src 'none'; script-src 'self'; style-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'; connect-src 'self'"
The icon sprite is used like this:
<svg class="icon"><use href="icons.svg#settings"></use></svg>
This is only an issue in Firefox since Edge, Chrome and iOS Safari all work fine. Is there any way for me to fix this?
This is an old Firefox browser bug - img-src directive does not cover sources in the <use xlink:href=> tag.
Firefox uses default-src to control <use xlink:href=> tag, therefore to fix issue make default-src 'self' instead of default-src 'none'.
I have a web application that provides links to display PDFs.
The Content-Security-Policy is set in the apache configuration (httpd.conf)
My problem is now that in MS Edge (chromium based) is not opening/displaying the PDFs.
In Firefox on clicking the Link the new Tab is opened and the PDF gets loaded and displayed.
In MS Edge on clicking the Link the new Tab is opened but it is displaying an error:
example.domain.org is blocked
Requests to the server have been blocked by an extension.
Try disabling your extensions.
ERR_BLOCKED_BY_CLIENT
There is no extension installed, it is the same for incognito mode.
After testing the Content-Security-Policy it seems that the chromium based browsers do handle the CSP "sandbox" very different to FireFox. Without the "sandbox" policy it is working like in firefox.
Header set Content-Security-Policy "base-uri 'self' example.domain.org.com; default-src 'self' example.domain.org.com; form-action 'self' example.domain.org.com; frame-src http://example.domain.org.com; font-src 'self' https://fonts.googleapis.com/ https://fonts.gstatic.com/ https://fonts.googleapis.com/css data:; img-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; sandbox allow-forms allow-scripts allow-same-origin allow-popups;"
Is there a way to add the basic CSP sandbox (with specifiers like allow-forms allow-scripts allow-same-origin allow-popups) but still allow opening PDFs within the chromium based browsers?
Or to remove the CSP sandbox only for PDFs trough some config in httpd.conf?
I followed up on a different SO answer and updated my meta tag like so:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:; default-src 'self' 'unsafe-inline'; https://*.googleapis/*/ https://*.fontawesome.com/*/ script-src 'self' 'unsafe-eval'; object-src 'self';">
My aim was to get FontAwesome to pass a CySec findings. However, the fix broke more than it fixed:
Ignoring duplicate Content-Security-Policy directive 'default-src'.
folio.dubaiairports.ae/:9 Ignoring duplicate Content-Security-Policy directive 'default-src'.
Unrecognized Content-Security-Policy directive '<URL>'.
mySite.myCompany.co/:9 Unrecognized Content-Security-Policy directive 'https://*.googleapis/*/'.
chext_driver.js:65 Unrecognized Content-Security-Policy directive 'https://*.googleapis/*/'.
mySite.myCompany.co/:1 Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Roboto:400,500' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.
blazor.server.js:1 [2021-01-26T09:27:01.087Z] Information: Normalizing '_blazor' to 'https://mySite.myCompany.co/_blazor'.
mySite.myCompany.co/:1 Refused to load the script 'https://kit.fontawesome.com/4f9675fbb7.js' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
mySite.myCompany.co/:1 Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Roboto:400,500' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.
Any helpful pointers will be greatly appreciated
Your CSP has errors:
a double default-src directives, the second one will be ignored.
in the part 'unsafe-inline'; https://*.googleapis/*/ https://*.fontawesome.com/*/ the directive name is missed, therefore browser counts a https://*.googleapis/*/ and https://*.fontawesome.com/*/ host-sources as directive's names'. The ; is a separator for directives, therefore after 'unsafe-inline'; a directive name should follow.
https://*.googleapis/*/ and https://*.fontawesome.com/*/ have invalid syntax because * is not allowed in the path-part or to cover top level domain zone, pls see how to correctly specify host-source.
I an not sure about gap: and content: scheme-sources, they not used in ordinary CSP, but they may be applicable in CSP for browser extensions.
I am trying to load a base64 string into an img src, on my local environment this is working but on the live environment I get this error: click for error:
I also tried putting this in my html header:
<meta http-equiv="Content-Security-Policy" content="default-src *; img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
I am really stuck on this issue because I cannot deploy to the live environment because of this.. help is much appreciated.
According to the error message you are missing "data:" for default-src in your initial CSP (remove the quotes). If you define img-src then "data:" should be added to it.
If you don't remove the header when adding the meta tag your all your content must pass both CSPs.