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.
Related
I have set my CSP in meta tag as follows:
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' cdn.jsdelivr.net unpkg.com accounts.google.com code.jquery.com 'sha256-lJMW30jo60M6VSFHAaxO+izJVqSNTP0VHJM8ChvH0mQ=';" />
But the browser give different CSP as reference of error:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src *". Either the 'unsafe-inline' keyword, a hash ('sha256-lJMW30jo60M6VSFHAaxO+izJVqSNTP0VHJM8ChvH0mQ='), or a nonce ('nonce-...') is required to enable inline execution."
Why that can be happened? Clearly i dont put the CSP as script-src *
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.
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.
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.
I'm creating a Content Security Policy on RedHat 6 Apache 2.2 for some html files with JavaScript links to Google. I have added the following code the virtualhost of the site in httpd.conf file.
Header always set Content-Security-Policy-Report-Only: "default-src 'self' https:; script-src 'self' https: https://www.google-analytics.com https://ajax.googleapis.com; style-src inline: 'self' https: 'sha256-j0bVhc2Wj58RJgvcJPevapx5zlVLw6ns6eYzK/hcA04=' https://www.google-analytics.com https://ajax.googleapis.com; font-src 'self'; img-src 'self' https: data: https://www.google-analytics.com; form-action 'self'; frame-ancestors 'none'; connect-src 'self' https: https://www.google-analytics.com; child-src 'self'"
Cannot get the policy to work unless I use 'unsafe-inline' which I would prefer not to. Latest Chrome browser in developer mode says to add SHA256 hash which I did (see below). Even though I added the recommended SHA256 hash Chrome still asks me to add it????
Am I not handling SHA256 hash correctly? Any help will be appreciated.
From Chrome developers console.
Refused to apply inline style because it violates the following
Content Security Policy directive: "style-src inline: 'self' https:
'sha256-j0bVhc2Wj58RJgvcJPevapx5zlVLw6ns6eYzK/hcA04='
https://www.google-analytics.com https://ajax.googleapis.com". Either
the 'unsafe-inline' keyword, a hash
('sha256-j0bVhc2Wj58RJgvcJPevapx5zlVLw6ns6eYzK/hcA04='), or a nonce
('nonce-...') is required to enable inline execution.
EDIT: This is discussed in this bug:
https://bugs.chromium.org/p/chromium/issues/detail?id=546106
Not totally following what the bug says but it seems the spec only allows sha256 hashes for script and style tags and not for inline scripts and styles. It appears you are going to have to add a 'unsafe-hashed-attributes' attribute to your policy to make it work.
However not totally clear if that is just to fix the script part or also styles, nor if it has been released. It definitely won't have made it to iOS devices that also use WebKit so, for now, I would just allow unsafe-inline for styles.
ORIGINAL ANSWER (before above answer was added but leaving to avoid confusion as comments added below).
I see a few problem:
The error mention the Content Security Policy but your example config is the Report Only header. I've seen issues when using both Content-Security-Policy and Content-Security-Policy-Report-Only. They should be independent but are not. Might be worth trying without one to see if that's the problem.
Your style source includes inline: which is not valid syntax AFAIK
You include the general https: directive and then also specific https sites (https://www.google-analytics.com https://ajax.googleapis.com)