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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With