Inline Frames

In the previous Chapter, you used the <iframe> tag to insert an inline video into a sample page. It’s pretty easy to insert an inline frame into your web page, but before doing so, there are a few things you need to think over, and most of them are security considerations.

You know that you can add JavaScript code to your page, which runs when a web page is loaded, or as you interact with the page. This code can do many things in your browser, in fact it can do everything that the browser’s current security configuration allows. If the inline page contains malicious code, that may run on your page.

You can use the sandbox attribute of <iframe> to specify extra security restrictions for the content of the inline frame. If you omit this attribute, your browser’s default security restrictions are applied. When you set it to an empty string, all extra security restrictions are forced.

To constrain the inline frame in a more granular manner, you can add one or more restriction values to the sandbox, and separate these values by spaces. HTML5 defines the following constraints:

The allow-scripts enables the page to run scripts defined in the inline page. The inline content can submit forms only when allow-forms is set. With the allow-same-origin setting, the content is treated as being from the same origin as the containing document. By default, the frame’s content can navigate only within itself, but applying the allow-top-navigation setting enables it to navigate content from the containing document.

You can find a sample in the Exercise folder. This project demonstrates the sandbox attribute. It contains a DisplayTitle.html file (Listing: Exercise/DisplayTitle.html) that represents the content of an inline frame and the index.html file (Listing: Exercise/index.html) which is a container that embeds frames.

Listing: Exercise/DisplayTitle.html