Content Security Policy is blocking an svg icon sprite in Firefox - apache

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'.

Related

This policy contains 'unsafe-inline' which is dangerous in the script-src directive

Our Vue js website contains dynamic url of css and src by different environment. Each environment have different domains. So the Content-Security-Policy contains
script-src 'self' 'unsafe-inline'
and
style-src 'self' 'unsafe-inline'
But it gives a warning "This policy contains 'unsafe-inline' which is dangerous in the script-src directive. This policy contains 'unsafe-inline' which is dangerous in the style-src directive."
How can we handle dynamic urls for sript-src and style-src?
Thanks in advance.
I have the same problem, too.
Hope that my solution will help.
First, remove 'unsafe-inline' and run your applications
You may get some errors from console on the web.
For example:
Refused to apply inline style because it violates the following
Content Security Policy directive: "style-src 'self'
https://fonts.googleapis.com
'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE='". Either the
'unsafe-inline' keyword, a hash
('sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE='), or a nonce
('nonce-...') is required to enable inline execution.
Second, copy the text 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE=' and put in Content-Security-Policy after script-src or style-src
For example:
default-src 'none'; font-src 'self' data:; img-src 'self'; script-src
'self' 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE='; style-src 'self'
'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE='; object-src
'self'; connect-src 'self'
And this may solve your problem.
By the way, you may encounter the problem like this :
Sha hash not respected in CSP style-src
You can add 'unsafe-hashes' after script-src or style-src to solve it.

MS Edge (Chromium) do not display PDF documents with Content Security Policy set (ERR_BLOCKED_BY_CLIENT)

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?

Refused to load the font '<URL>' for a font in google maps

On configuring the content-security-policy of a site, I'm setting the font source in combination with styles like this
style-src 'self' 'unsafe-inline' fonts.googleapis.com;
font-src 'self' fonts.gstatic.com;
This works in Firefox for all cases. However, Chromium complains when google maps tries to fetch the roboto font:
Refused to load the font '<URL>' because it violates the following Content Security Policy directive: "font-src 'self' fonts.googleapis.com".
Refused to load the font 'https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2' because it violates the following Content Security Policy directive: "font-src 'self' fonts.googleapis.com".
I've tried adding 'unsafe-inline' and data: as scheme source, but none seem to do the trick. I'm confused about why Chromium reports font "<URL>", it doesn't seem to be an accepted scheme source and I don't get why it's been blocked

Safari 11 gets SecurityError (DOM exception 18) when accessing localStorage

I just upgraded to Safari 11. I've been debugging my WebApp by opening the html file directly with Safari. After the upgrade it gets "SecurityError (DOM Exception 18) The operation is insecure when the app accesses localStorage.
Here's my security policy tag;
<meta http-equiv="Content-Security-Policy"
content="default-src 'self' file:// *;
style-src * 'self' 'unsafe-inline' 'unsafe-eval';
script-src * 'self' 'unsafe-inline' 'unsafe-eval';"
>
This worked fine on previous versions of Safari and on Chrome, FIreFox etc.
Any thoughts?
I found the answer! Set "Disable local file restrictions" in the Develop menu.

Content Security Policy style-src refuses to load in Safari

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.