Browser console: 'Refused to display in a frame because it set X-Frame-Options to deny/sameorigin' or 'Refused to frame ... because an ancestor violates Content Security Policy directive frame-ancestors'. How do I allow embedding properly?

Cause: the page you are embedding in an <iframe>, <frame>, <embed> or <object> tells the browser who may embed it, to prevent clickjacking. Two response headers do this: X-Frame-Options (DENY, or SAMEORIGIN for the same origin only) and the Content-Security-Policy frame-ancestors directive. The browser refuses to render the content when the embedding page does not match. This is the embedded site's choice; changing your own page cannot override it. Fix: 1. If you own the embedded page and want some sites to embed it, use CSP frame-ancestors, the recommended and more flexible mechanism: Content-Security-Policy: frame-ancestors 'self' https://partner.example.com; Send it as an HTTP header; it does not work in a <meta> tag. 2. If both headers are present, make them consistent. Remove X-Frame-Options when you move to frame-ancestors, or set it to SAMEORIGIN only if that is really what you want. The ALLOW-FROM value of X-Frame-Options is obsolete and ignored by modern browsers, so it will not allow your partner. 3. frame-ancestors does not fall back to default-src, so it must be set explicitly. With nested frames, every ancestor in the chain is checked. 4. Set the header at the layer that actually answers: app code, reverse proxy, CDN or framework security middleware (for example Helmet in Express). Check that a proxy is not adding a second, stricter header. 5. If you do not own the page, you cannot embed it. Use the site's official embed or widget URL or API, link to it instead, or ask the owner to allow your origin. 6. If the page must stay private, keep DENY or frame-ancestors 'none'. Don't: remove the protection globally or use a wildcard list "to make the error go away" on pages with logged-in actions; allow only the specific origins that need it. Verify: reload the embedding page; the frame renders, and the response headers for the framed URL (DevTools > Network) show a frame-ancestors list containing your origin and no conflicting X-Frame-Options. Sources: https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/frame-ancestors https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/X-Frame-Options