Broad Network

The HTML iframe Element and Basic Security

HTML Embedded Content Part 4

Foreword: In this part of the series, I talk about the HTML iframe element and basic related security.

By: Chrysanthus Date Published: 18 Jan 2016


This is part 4 of my series, HTML Embedded Content. The iframe element is an embedded element. In this part of the series, I talk about the HTML iframe element and basic related security. You should have read the previous parts of the series before coming here, as this is a continuation. The iframe element can be placed inside a sectioning content element or a grouping element. The iframe element is not a component of the frameset; it is an embedded element.

The iframe element is a double tag element:


The content of the iframe would be an HTML document: <!DOCTYPE HTML> <html><head></head><body> </body></html>

<!DOCTYPE HTML> is optional for the iframe content.

iframe Attributes
Attributes of the iframe element and their brief meanings are:

src - Address of the resource
srcdoc - A document to render in the iframe
name - Name of nested browsing context
width - Horizontal dimension
height - Vertical dimension
sandbox - Security rules for nested content

src: This holds the URL of the HTML document that the iframe displays.

srcdoc: If you do not want to download the document from a server (website), you would have to type the content of the document delimited by double quotes. Do not forget to escape any double quote (like \") within the content; this prevents conflict between double quote within the content and the delimiters. That content in double quotes will be the value of the srcdoc attribute. If the src attribute and the srcdoc attribute are both specified together, the srcdoc attribute takes priority.

name: This holds the name of the iframe (precisely, name of browsing context).

width: This is the width of the iframe in px
height: This is the height of the iframe in px.

The sandbox attribute and Security
The iframe element has an attribute called, the sandbox attribute. This attribute enables a set of extra restrictions on the content of the iframe. It is a Boolean attribute as well as it can take value. As a Boolean attribute, its presence means true and its absence means false. If present as Boolean attribute, it means all the following features are forbidden: allow-forms, allow-popups, allow-scripts, allow-top-navigation, allow-same-origin, and allow-pointer-lock.

If the attribute (and value) is absent, it means some of these features are allowed and the iframe content may not be able to access the main HTML document.

I will say more about the iframe sandbox security in a different series.

A code example for the use of the iframe element is:

<p>We're not scared of you! Here is your content, unedited:</p>
<iframe sandbox
src=""> </iframe>

That is it for this part of the series.


Related Links

Basics of HTML 5
Basics of ECMAScript
CSS Basics
Text Elements in HTML
Grouping Content
Microsyntax Dates and Times in HTML
Sectioning Content
Common Idioms without Dedicated Elements
HTML Embedded Content
HTML Insecurities and Prevention
Presentation Mathematical Markup Language
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course



Become the Writer's Fan
Send the Writer a Message