What is an iframe?
An iframe is an HTML element that loads a second web page inside the current page. The page inside the frame keeps its own URL, scripts, and cookies. The server of that page decides if other sites can show it in a frame.
4 min read · Updated
How an iframe works
You add an <iframe> element to a page and give it a URL in src. The browser then loads that URL as a full, separate document inside a box on your page.
<iframe src="https://your-site.com/widget" title="Booking form" width="600" height="400"></iframe>
Two pages are now on the screen:
- The parent page. This is the page that contains the
<iframe>tag. In these guides, it ishttps://partner.example. - The framed page. This is the page that loads inside the box. In these guides, it is
https://your-site.com.
Each page has its own HTML, CSS, JavaScript, and history. CSS from the parent page does not style the framed page. Scripts on one page cannot read the other page when the two pages have different origins.
Origin: the rule behind most iframe problems
An origin is the scheme, host, and port of a URL. https://your-site.com and https://partner.example are different origins. https://your-site.com and http://your-site.com are also different origins, because the scheme is different.
When the parent page and the framed page have different origins, the browser keeps them apart:
- The parent cannot read the DOM of the framed page, and the framed page cannot read the parent.
- The two pages can send messages with postMessage. They cannot call each other's functions.
- Cookies in the framed page are third-party cookies. Many browsers block them or keep them in a separate store. See Cookies inside iframes.
Who decides if a page can load in a frame
The framed page decides, not the parent page. Its server sends HTTP response headers that tell the browser where the page may appear:
| Header | What it does |
|---|---|
Content-Security-Policy: frame-ancestors ... | Lists the sites that can frame the page. This is the current standard. |
X-Frame-Options: DENY or SAMEORIGIN | The older header. It blocks all frames, or allows frames only from the same origin. |
If the response has neither header, any site can frame the page. If a header blocks the parent, the browser shows an error page in the frame. Chrome shows "refused to connect.". See Find the header that blocks your iframe.
You cannot fix a blocked frame from the parent page. No attribute on the <iframe> tag overrides these headers. Only the owner of the framed page can change them.
Attributes you will use most
| Attribute | Use |
|---|---|
src | The URL to load. |
title | A short name for screen readers. Always set it. |
width, height | The size in CSS pixels. Without them, the frame is 300 × 150. |
loading="lazy" | Waits to load the frame until it is near the viewport. |
sandbox | Removes powers from the framed page. See The sandbox attribute. |
allow | Gives the frame access to features such as the camera or full screen. |
referrerpolicy | Sets how much of the parent URL the framed page receives. |
Why sites block framing
A site that anyone can frame is open to clickjacking. In this attack, a bad site loads your page in an invisible frame. Then it puts its own buttons on top, so a user clicks your "Delete account" button without knowing it. Many login pages and admin panels block framing for this reason.
Block framing by default. Allow it only for the pages and the sites that need it.
Check your page
Paste the URL of the page you want to embed into the iframe tester. It tells you if the page can load in a frame and explains why.
To write iframe code with a title, a size and safe defaults, use the embed code generator.
To embed a known service, such as YouTube or Google Docs, see its official embed URL in the sites directory. To add an iframe on a website builder, such as WordPress or Notion, see the platform guides. For short definitions of the terms on this page, see the glossary.