The iframe Element

What is an iframe?

An iframe is an HTML element that loads another HTML page within a parent document. It’s commonly used to load content from another site within a web page.

In the example above, we are loading cross-origin content from https://example.com within the content on our own page. The ability to load cross-origin content is a particularly powerful feature of the iframe. For example, embedded YouTube videos work using the iframe element.

Same-origin policy

The same-origin policy is a security protocol that restricts how a document or script loaded by one origin can interact with resources from another origin.

JavaScript APIs like iframe.contentWindow, window.parent, window.open, and window.opener allow parent frames to reference pop-ups and iframe elements, and vice versa. The window.postMessage API even allows communication between cross-origin documents. However, due to the same-origin policy, when the two documents do not have the same origin, these references provide very limited access to global window objects.

Site vs. origin

The terms site and origin are often incorrectly used interchangeably.

Site is the combination of the ...