#srcdoc

In the current draft of HTML5 (http://dev.w3.org/html5/spec/the-iframe-element.html April 27, 2012), there are three new attributes for the IFRAME tag: seamless, sandbox and srcdoc. The goal of using the new iframe attributes of seamless, sandbox and srcdoc is to provide some protection against potentially malicious data from an external source. For example, if you are including an external discussion thread or web page, it makes sense to use these new attributes as a precaution.

However, if you are including content from a property you control, it might make more sense to include that content via an ajax call; that way you have much more control over the presentation of the content.

I explored these new attributes to see how they could be used when creating a document viewer. The source of the documents come from an internal source, however they also include their own (unpredictable) set of CSS and JS files. Unfortunately we do not have the option of retrieving the document data and other included client-side files via an ajax call, therefore the need to delve into the iframe.

From the W3C Draft for HTML5:

The iframe element has three new attributes called sandbox, seamless, and srcdoc which allow for sandboxing content, e.g. blog comments.

[http://www.w3.org/TR/html5-diff/#new-attributes]

seamless

Basically, the seamless attribute removes the scrollbars and border normally set in an IFRAME, making the content appear "seamless" to the rest of the document. Very useful if you don't want to use CSS to overwrite the border and scroll styles for the IFRAME.

<iframe src="http://somesource" seamless />

The seamless attribute indicates that the iframe element's browsing context is to be rendered in a manner that makes it appear to be part of the containing document (seamlessly included in the parent document).

[http://dev.w3.org/html5/spec/the-iframe-element.html#attr-iframe-seamless]

sandbox

The sandbox attribute is where you would add restrictions on the IFRAME source. When you set this attribute you are in effect locking down the content from executing scripts, targeting your navigation, submitting forms,and  accessing cookies and local storage. You can then relax these restrictions through the use of token values.

Fully locked down:

<iframe src="http://somesource" sandbox />

Relaxed restrictions:

<iframe src="http://somesource" sandbox="allow-forms allow-popups allow-scripts" />

From the WHATWG:

The sandbox attribute, when specified, enables a set of extra restrictions on any content hosted by the iframe. Its value must be an unordered set of unique space-separated tokens that are ASCII case-insensitive. The allowed values are allow-forms, allow-popups, allow-same-origin, allow-scripts, and allow-top-navigation. When the attribute is set, the content is treated as being from a unique origin, forms and scripts are disabled, links are prevented from targeting other browsing contexts, and plugins are secured. The allow-same-origin keyword allows the content to be treated as being from the same origin instead of forcing it into a unique origin, the allow-top-navigation keyword allows the content to navigate its top-level browsing context, and the allow-forms, allow-popups and allow-scripts keywords re-enable forms, popups, and scripts respectively

[http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#attr-iframe-sandbox]

srcdoc

The SRCDOC attribute is very similar to the SRC attribute, but at this point appears that a source targeted by srcdoc does not have to be a complete html document but rather just valid html text.