IFRAME in HTML5

    Few important change in in HTML5
  • IFrame can be more securely used.
  • IFrame in HTML5 provides various control attributes and values to achieve the desired security level.

IFRAME Attribute - sandbox:

As the word "sandbox" gives feeling, it really creates a sandbox for Iframe content. Iframe work as a sandbox for the document it includes by means of src="" attribute. It allows better control of the iframe content by parent document. What Iframe content can get access of its parent document will be controlled by sandbox attribute value. Earlier it was just cross-domain policy which restrict the Iframe content at some level.

To enable sandbox,
<iframe sandbox="" >
or,
<iframe sandbox> is enough.

To relax any restriction, we need to mention those as value of sandbox attribute. To relax on restrictions, use these value in sandbox value:
allow-forms, allow-scripts, allow-same-origin, allow-top-navigation, and ms-allow-popups. After reading the above line, we are aware of what restrictions were applied to sandbox-ed Iframe!

Same domain usually allow to access parent document DOM accessed by Iframe. But due to sandbox use, this is not the case. Using allow-same-domain, we can relax the restriction.
Sandboxed Iframe cannot replace parent page with its own link. So, allow-top-navigation is required when we need to relax this restriction.

IFRAME attribute - seamless:

Seamless is seamlessly including IFrame content to the parent document. Clear!
Yes, it is like that. If we greatly trust the document which is coming through IFrame then we can use this attribute.

<iframe seamless>

IFrame attribute - srcdoc:

I could not understand it clearly why we need this. This attribute will allow us to mention the content of IFrame. When it is available then Iframe's own src="" attribute document will not be shown in Iframe content.

<iframe srcdoc="<div> Hello, How are you?</div>" src="http://xyz.com/">
Now, srcdoc value should be visible on iframe content if browser support srcdoc attribute. If not then src="" url's doc will be shown.