I am working on a nodejs electron app, in my index.html I have a "Content-Security-Policy" that looks like this
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy"
content="
default-src 'self' https://*.mydomain.tld;
script-src 'self' https://*.mydomain.tld;
style-src 'self' https://*.mydomain.tld;
img-src 'self' https://*.mydomain.tld;
font-src 'self' https://*.mydomain.tld;
connect-src 'self' https://*.mydomain.tld;
media-src 'self' https://*.mydomain.tld;
object-src 'self' https://*.mydomain.tld;
child-src 'self' https://*.mydomain.tld;
frame-ancestors 'self' https://*.mydomain.tld;
frame-src 'self' https://*.mydomain.tld;
worker-src 'self' https://*.mydomain.tld;
form-action 'self' https://*.mydomain.tld;
block-all-mixed-content;
">
When I run the app it works perfectly fine all assets are loaded just fine but in the console I get the following error
Content Security Policies delivered via a element may not
contain the frame-ancestors directive. index.html: 4
I been trying to get rid of the error and looking for what maybe causing it but can't find anything, all to me appears to be correct yet I still receive the error, I also thought that the error maybe caused by the server #https://*.mydomain.tld so I tried this
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy"
content="
default-src 'self';
script-src 'self';
style-src 'self';
img-src 'self';
font-src 'self';
connect-src 'self';
media-src 'self';
object-src 'self';
child-src 'self';
frame-ancestors 'self';
frame-src 'self';
worker-src 'self';
form-action 'self';
block-all-mixed-content;
">
Which caused the exact same error, I could just ignore the error completely as the app does work correctly and the error does not seem to be causing any issues however if someone has any idea what maybe wrong I would really appreciate it.
Edit: When I removed the frame-ancestors leaving the tag looking like this
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy"
content="
default-src 'self' https://*.mydomain.tld;
script-src 'self' https://*.mydomain.tld;
style-src 'self' https://*.mydomain.tld;
img-src 'self' https://*.mydomain.tld;
font-src 'self' https://*.mydomain.tld;
connect-src 'self' https://*.mydomain.tld;
media-src 'self' https://*.mydomain.tld;
object-src 'self' https://*.mydomain.tld;
child-src 'self' https://*.mydomain.tld;
frame-src 'self' https://*.mydomain.tld;
worker-src 'self' https://*.mydomain.tld;
form-action 'self' https://*.mydomain.tld;
block-all-mixed-content;
">
The error went away, am I not supposed to add that?
Because this directive is not supported in the meta element.
Look at https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors.
Only on the "response" from the server.
Related
I've trying some solutions to fix a CSP Wildcard directive, I'm actually using nginx add_header to protect contents in my website. I tried many aways to secure it correctly, but OWASP ZAP scanner is always getting CSP Wildcard directive
I Know probability I'm forgetting to set a import stuff on it; Anyone has any ideia how can I fix to vulnerability issue CSP Wildcard directive ?
I'll share all headers added to nginx config file:
add_header Content-Security-Policy "default-src 'self' https://my-domain.com; script-src 'report-sample' 'self'; style-src 'report-sample' 'self' https://cdn.jsdelivr.net https://fonts.googleapis.com 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-FJUTtaihJDaYMVkI25A8Y0YFELvhfzsiIgk6h+OHIMM='; object-src 'none'; base-uri 'self'; connect-src 'self'; font-src 'self' https://cdn.jsdelivr.net https://fonts.gstatic.com; frame-src 'self'; img-src 'self' https://res.cloudinary.com; manifest-src 'self'; media-src 'self'; frame-ancestors https://my-domain.com; report-uri https://630f6a5f23064c2afafa6b30.endpoint.csper.io/?v=0; worker-src 'none';";
add_header 'Access-Control-Allow-Origin' 'https://my-domain.com' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
add_header X-Frame-Options DENY;
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection 1;
add_header Strict-Transport-Security: max-age=31536000;
add_header X-Content-Type-Options "nosniff";
add_header Expect-CT 'enforce; max-age=7776000';
add_header X-Frame-Options "ALLOW-FROM my-domain.com";
After deploying my MERN app to heroku, I get this error on the browser console. Even though I specified the correct CSP directives. This is the meta tag it renders on the browser
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' 'unsafe-inline'; connect-src 'self' https://rpc-mainnet.matic.network/; img-src 'self'; style-src 'self' 'unsafe-inline'; base-uri 'self'; form-action 'self'; font-src 'self' https://fonts.gstatic.com; ">
What am I doing wrong?
This is weirdest it can get. I did a fresh deployment of my Angular application with all new hashed js files.
Expectation is to get new files from server including html, css, js.
It is working fine except for one url where it switches back to older version of index.html from cache which then pulls older js files from cache.
I have been trying to fix this, but I couldn't find any solution.
I have already added these files in html file
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
And this in web.config
<customHeaders>
<add name="Cache-Control" value="no-cache, no-store, must-revalidate, pre-check=0, post-check=0, max-age=0, s-maxage=0" />
<add name="Pragma" value="no-cache" />
<add name="Expires" value="0" />
</customHeaders>
But no effect of these changes.
Cache issue is related to the server not from the angular. Please look into the server configuration and headers which you are receiving in any request and you can try changing accordingly in the server configuration file till issue resolved.
i can't connect to the websocket because of my CSP (Content Security Policy) - what is wrong?
Error:
ps-client-component-websocket-adapter.js:412 Refused to connect to
'wss://hostname.domain:port/jsonWebSocket' because it violates
the following Content Security Policy directive: "connect-src 'self'".
My IIS web.config
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Cache-Control" value="no-cache" />
<!---<add name="X-Content-Security-Policy" value="default-src 'self' 'unsafe-eval'; connect-src 'self'; img-src 'self'; object-src 'none'; child-src *;" />-->
<add name="Content-Security-Policy" value="connect-src 'self' wss://hostname.domain:port/jsonWebSocket; default-src 'self' 'unsafe-eval'; img-src * data:; object-src 'none'; child-src *;" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
</configuration>
It seems like you are missing comma in connect-src.
A bit late to the party, but as per MDN,
connect-src 'self' does not resolve to websocket schemas in all browsers, more info in this issue.
You may want to add wss to connect-src as it is done in this answer for example.
The Sonar test suite makes the interesting point that it should be considered bad practice to send the HTTP headers
Content-Security-Policy
X-Content-Security-Policy
X-Frame-Options
X-UA-Compatible
X-WebKit-CSP
X-XSS-Protection
when sending non-HTML resources.
I currently configure my IIS server using web.config, namely
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Content-Security-Policy" value="default-src 'self' ; img-src 'self' data:; script-src 'self' cdnjs.cloudflare.com/ajax/libs/html5shiv/" />
<add name="X-Frame-Options" value="DENY" />
<add name="X-Content-Type-Options" value="nosniff" />
<add name="X-Permitted-Cross-Domain-Policies" value="none" />
<add name="X-UA-Compatible" value="IE=edge" />
<add name="X-Xss-Protection" value="1; mode=block" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
But that configuration sends those headers no matter the type of the resource send.
How to make IIS selectively add those headers to the right types of files?
You can use the IIS UrlRewrite module (an IIS extension) and add a custom headers only for html resources.
Check this old question.