Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Content Security Policy directive: “frame-ancestors” missing but there?

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?

like image 488
Tlacaelel Ramon Luis Avatar asked Jan 27 '26 17:01

Tlacaelel Ramon Luis


1 Answers

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.

like image 155
elad gasner Avatar answered Jan 29 '26 12:01

elad gasner



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!