Learn
Iframe guides, in plain words.
Short guides on headers, sandboxing, cookies, and fixing the errors you actually hit.
Updated
Basics
4 guides
- What is an iframe?An iframe shows one web page inside another. Learn how it loads, what limits apply, and why some pages refuse to load in one.4 min
- Make an iframe responsiveMake an iframe fill its container, keep a fixed shape with aspect-ratio, or grow to fit its content with postMessage and ResizeObserver.5 min
- The sandbox attributeWhat each iframe sandbox flag allows, which flags most embeds need, and why allow-scripts with allow-same-origin can undo the sandbox.5 min
- Talk to an iframe with postMessageSend data between a page and a cross-origin iframe with postMessage. Set the target origin, check event.origin, and wait for the frame to be ready.5 min
Headers & security
3 guides
- How X-Frame-Options worksHow the X-Frame-Options header works, why ALLOW-FROM does nothing, how duplicate values block a page, and when browsers ignore the header.5 min
- CSP frame-ancestorsUse the CSP frame-ancestors directive to choose which sites can embed your page. Syntax, examples, and the mistakes that still block the frame.5 min
- Cookies inside iframesWhy cookies fail in a cross-site iframe. SameSite=None with Secure, third-party cookie blocking, Partitioned cookies (CHIPS), and the Storage Access API.6 min
Allow embedding on…
8 guides · copy-ready config
Troubleshooting
3 guides
- Find the header that blocks your iframeYour iframe shows an error page or a console error. Match the message to the header that blocks the frame in each browser, and see who can fix it.5 min
- Blank iframe, no errorAn iframe that stays empty with no error page. Check mixed content, the parent's frame-src, lazy loading, zero height, sandbox flags, and redirects.6 min
- Login doesn't stick in an iframeWhy users sign in inside an iframe and get signed out again, or loop back to the login page. Cookie rules, blocked login pages, and fixes that work.6 min