Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

(Nora) #1
Lesson 2: Embedding content CHAPTER 2 45

“Working with hyperlinks” section that follows. A valid browsing context name is any string
with at least one character that does not start with an underscore because the underscore is
used for these special key names: _blank, _self, _parent, and _top.

Sandboxing embedded content
Sandboxing is a means for preventing malware and annoyances such as pop-ups from being
introduced when the content is embedded on your HTML page. The <iframe> element pro-
vides the sandbox attribute for this purpose.
The sandbox attribute places a set of extra restrictions on any content hosted by the
iframe. When the sandbox attribute is set, the content is treated as being from a unique and
potentially dangerous origin. Forms and scripts are disabled, and links are prevented from
targeting other browsing contexts. Consider the following example.
<iframe sandbox src="http://someOtherDomain.net/content">
</iframe>

In the example, the source is referencing potentially hostile content in a different domain.
This content will be affected by all the normal cross-site restrictions. In addition, the content
will have scripting, plug-ins, and forms disabled. The content cannot navigate any frames or
windows other than itself.
The restrictions can be overridden by space-separating any of the following.
■■allow-forms Enables forms
■■allow-same-origin Allows the content to be treated as being from the same origin
instead of forcing it into a unique origin
■■allow-scripts Enables scripts except pop-ups
■■allow-top-navigation Allows the content to navigate its top-level browsing context
In the following example, allow-same-origin, allow-forms, and allow-scripts are enabled.
On the surface, it might seem that the sandbox is not providing any protection, but the sand-
box still disabling plug-ins and pop-ups.
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
src="http://otherContent.com/content.html"></iframe>

Seamless content embedding
The <iframe> tag has a seamless attribute that indicates that the source content is to appear
as though it’s part of the containing document. This means that the <iframe> element will
not have borders and scrollbars. The seamless attribute is a Boolean attribute, so its presence
on the <iframe> tag indicates that you want this option, but there are three ways to set a
Boolean attribute. Here are three ways to specify seamless embedding of content.
<iframe seamless="seamless" src="http://otherContent.com/content.html"></iframe>
<iframe seamless="" src="http://otherContent.com/content.html"></iframe>
<iframe seamless src="http://otherContent.com/content.html"></iframe>

Key
Te rms

Free download pdf