Cross-Origin Iframe Blocked — X-Frame-Options and frame-ancestors Policy Error

Fix cross-origin iframe embedding failures caused by X-Frame-Options DENY/SAMEORIGIN headers or Content-Security-Policy frame-ancestors directives. This guide covers everything you need to know about this topic, including common causes, step-by-step solutions, and answers to frequently asked questions.

Here are the key things to understand: X-Frame-Options and CSP frame-ancestors control whether a page can be embedded in an iframe. X-Frame-Options: DENY blocks all framing; SAMEORIGIN allows only same-origin framing. CSP frame-ancestors is the modern replacement: frame-ancestors 'self' https://allowed-domain.com. These headers prevent clickjacking attacks where malicious sites embed your site in a hidden iframe. The blocked page shows an error in the browser console: 'Refused to display in a frame'. Understanding these fundamentals will help you diagnose and resolve this issue more effectively.

The most common reasons this occurs include: Target site sets X-Frame-Options: DENY or SAMEORIGIN, blocking all cross-origin embedding. CSP frame-ancestors directive does not include your domain in the allowed list. Browser enforcing stricter framing policies for cross-origin content. Intermediate proxy or CDN adding X-Frame-Options headers to responses. Identifying the root cause is the first step toward finding the right solution.

To resolve this, follow these recommended steps: Check the blocked page's response headers: DevTools > Network > select request > Headers tab. If you control the embedded site: add your domain to frame-ancestors: Content-Security-Policy: frame-ancestors 'self' https://your-domain.com. Replace X-Frame-Options with CSP frame-ancestors for more granular control. If you do not control the embedded site: use their API or embed SDK instead of iframing. Use the sandbox attribute on the iframe for additional security when embedding third-party content. If these steps do not resolve the issue, consider consulting additional resources or a qualified professional.

This article is part of our Browser Errors collection on Error Codes Wiki. We provide comprehensive, up-to-date information to help you find solutions quickly.