Who (Inline) Framed Roger Rabbit?
Inline frames (or iframes) are HTML elements that allow you to embed other HTML documents inside your webpage. This is most often used for embedding things like Youtube videos and maps from Google Maps, but it’s possible to embed just about ANY webpage or HTML content (assuming the content owner has given permission for you to do so).
Most of the time, when you use the default embed HTML from a page, it comes with in an iframe. For example, look at Youtube’s embed code below:
As you can see, the link to the video is the source for an iframe element, to be posted in your HTML document. When embedded on your page, it looks like this:
Now, visitors to your page can watch whatever video you choose to include! However, we can make our own iframes to customize the display for our video.
iframe supports height and width properties, which allow you to modify the size of your “window” to the content. For example, let’s say, for whatever reason, we wanted to have a tall, narrow viewer. We could write code like
<iframe width="200" height="500" src="https://www.youtube.com/embed/gN0GDRWvRig" frameborder="0" allowfullscreen></iframe>This results in the following display:
While this particular example is contrived, this can be used for displaying specific portions of other HTML content.
What about those other properties Youtube includes by default?
In HTML5, iframes support height, width, name, source(src), source doc (srcdoc), and sandbox properties. I won’t be getting much into source doc and sandbox other than to say they’re useful to help prevent malicious attacks via iframe content.
The source attribute is used to determine what content should be displayed in your iframe, and while you can include any webpage you want, there are rules about what will and won’t be displayed, which we’ll get into below.
The frameborder property has been deprecated in HTML5, but it toggles a beveling effect, allowing your content to be “framed” if you want a more explicit separation between your page and the iframe content you’re linking to.
As previously stated, just about any web content can be displayed via an iframe. We can include a web address and the iframe will display that page inside our page:
<h1> Inline Frames </h1><iframe height="500" width="500"
src="http://cooldude.com/">
</iframe>
Cooldude.com is displayed in all of it’s disappointing entirety within our index.html page! We can create meta-pages which just display other websites. Let’s put a Google search right in our site!
<h1> Inline Frames </h1><iframe height="300" width="300"
src="http://www.google.com">
</iframe>
Wait… what happened? Why don’t we have a little Google window on our page? It turns out not everyone wants their content displayed via iframes.
If we check our console we see the following error:
Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.X-Frame-Options is part of a response header for web requests, which sets if a page can be displayed in iframes. There are three possible “directives” for X-Frame-Options:
X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
X-Frame-Options: ALLOW-FROM [web address]DENY prevents a page from being embedded within an iframe for any reason. SAMEORIGIN allows a page to be embedded if the site embedding it has the same origin (in other words, we received a SAMEORIGIN error because my index.html isn’t being served from the same place as www.google.com). ALLOW-FROM allows the creator of a page to specify where a page can be served. Failing to include any of these headers allows a page to be embedded anywhere.
It’s easy to understand why a page owner, especially of a major website like Google, would want to prohibit their page from being embedded elsewhere. Malicious website owners could host clones of of a website that look and act the same as the real thing, but are filled with malicious software. By restricting www.google.com to SAMEORIGIN, Google is able to ensure that their page is only used by trustworthy people, namely, themselves.
This same concern is behind another, slightly more irritating facet of iframes: They cannot have click handlers.
As a developer, it might be nice to have some action occur when a user clicks on iframe content. Maybe you want to shift a sidebar video stream to a larger theater view. Maybe you want to alert a user to the fact that they’re going to leave your page if they click a link inside your iframe. Unfortunately, none of this is possible.
In the above code, we have two <div>s. The top div contains a Google Maps embed, while the bottom contains an image of our dear friend, Roger Rabbit. I’ve put event listeners on both <div>s, which will alert a user to the fact that they have ticked whatever is inside the <div> on click.
Clicking on our Roger image opens the dialogue, but clicking on the map opens up Google Maps (the default action that comes with clicking on a Google Maps embed). This prevents malicious websites from displaying content from a website as a full page iframe and then creating their own click actions on the various parts of the page. It’s easy to see how dangerous such actions would be. As a result, content within iframes always takes priority over any event handlers on the containers holding that iframe.
As a sort of wrap-up, iframes are powerful, creative tools for embedding content and page interactivity, and if the above quirks are kept in mind, you can safely browse and embed content from all over the web. Customizing your iframes allows you to further develop the aesthestics of your page without sacrificing something as crucial as video or map embedding on your site.
