title: Content Security Policy directive: “frame-ancestors” missing but there?
body: <p>I am working on a nodejs electron app, in my index.html I have a "Content-Security-Policy" that looks like this    </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;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;
        "&gt;
  </code></pre>
  
  <p>When I run the app it works perfectly fine all assets are loaded just fine but in the console I get the following error</p>
  
  <blockquote>
    <p>Content Security Policies delivered via a  element may not
    contain the frame-ancestors directive. index.html: 4</p>
  </blockquote>
  
  <p>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</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;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;
        "&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>Edit:</strong> When I removed the frame-ancestors leaving the tag looking like this</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;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;
        "&gt;
  </code></pre>
  
  <p>The error went away, am I not supposed to add that?</p>