HTML iframe Insecurities and Prevention
HTML Insecurities and Prevention – Part 2
Foreword: In this part of the series I talk about the threats from the iframe element, and prevention.
By: Chrysanthus Date Published: 1 Jan 2001
Introduction
The sandbox attribute and Security
The iframe element has an attribute called, the sandbox attribute. This attribute enables a set of extra restrictions on any content of the iframe. Its value can be one or more of the following in any order, separated by spaces, all within quotes: allow-forms, allow-popups, allow-scripts, allow-top-navigation, allow-same-origin, and allow-pointer-lock. The sandbox attribute may take no value, making it a Boolean attribute as well.
Code examples for the use of the iframe element are:
<iframe sandbox="allow-forms allow-scripts allow-same-origin"
src="http://maps.example.com/embedded.html"></iframe>
<p>We're not scared of you! Here is your content, unedited:</p>
<iframe sandbox src="http://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>
The Boolean sandbox Attribute
When the sandbox attribute does not take any value, as in the second code above, it means that the iframe content cannot access any resource outside the iframe. It also means that scripts in the iframe, forms in the iframe and various annoying APIs in the iframe, are disabled. This also means that the iframe content is treated as being from a unique origin.
You can remove one or more of these restrictions as explained below:
allow-forms
A form can be submitted to any cross origin. If the value of the sandbox attribute is "allow-forms", then an HTML form as part of the iframe content, will be submitted (when its submit button is clicked).
To try this: save the following file in localhost:
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Sample Page</h1>
<iframe src="ifra.htm" sandbox></iframe>
</body>
</html>
Save the following file with the name, ifra.htm in the same directory.
<!DOCTYPE html>
<html>
<head>
<title>Sample page</title>
</head>
<body>
<form action="http://www.google.com/search" method="get">
<label>Google: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>
</body>
</html>
Load the first file in a browser, and click the Search (submit) button. Note that the form has not been sent.
Now, modify the sandbox attribute of the iframe element (start tag) as follows.
sandbox="allow-forms"
Reload (refresh) the page (in a new window tab). Click the Search button again. The form should be submitted.
If the value of the sandbox attribute is "allow-popups", then the content of the iframe will be allowed to produce popup, such as opening (displaying) a small window. Actually, the iframe content is allowed to create new auxiliary browsing contexts (e.g. using the target attribute, or the window.open() method).
To try the code, replace the content of the ifra.htm file with
<!DOCTYPE html>
<html>
<head>
<title>Sample page</title>
</head>
<body>
<script type="text/ecmascript">
window.open();
</script>
</body>
</html>
- Save the file.
- Remove the value (not the name) of the sandbox attribute from the first file. Reload the first file. A new window should not be opened by the iframe.
Now, modify the sandbox attribute of the iframe element (start tag) as follows, and reload the first file:
sandbox="allow-popups"
There should be a popup.
allow-scripts
If the value of the sandbox attribute is "allow-scripts", then the content of the iframe will be allowed to run a script (e.g. ECMAScript).
To try the code, replace the content of the ifra.htm file with
<!DOCTYPE html>
<html>
<head>
<title>Sample page</title>
</head>
<body>
<script type="text/ecmascript">
alert("seen");
</script>
</body>
</html>
- Save the file.
- Remove the value of the sandbox attribute from the first file. Reload the first file. You should not see the ECMAScript alert box.
Now, modify the sandbox attribute of the iframe element (start tag) as follows, and reload the first file:
sandbox="allow-scripts"
You should see the ECMAScript alert box with the text, “seen”.
If the value of the sandbox attribute is "allow-top-navigation", then the content of the iframe will be allowed to navigate the main HTML document (that nests the iframe).
To try this: save the following file in localhost with the name, temp.htm:
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Sample Page</h1>
<iframe src="ifra.htm" sandbox></iframe>
<br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br>
<span id="reach">Some Text</span><br>
</body>
</html>
Save the following file with the name, ifra.htm in the same directory.
<!DOCTYPE html>
<html>
<head>
<title>Sample page</title>
</head>
<body>
<a href="http://localhost/temp.htm#reach">A Link</a>
</body>
</html>
Load the first file in the browser, and click the hyperlink in the iframe area. Note that there has been no navigation.
Now, modify the sandbox attribute of the iframe element (start tag) as follows:
sandbox="allow-top-navigation"
Reload (refresh) the first page (in a new window tab). Click the link again. There should be navigation.
With this reserved word as value to the sandbox attribute, if the document in the iframe is from the same origin as the main HTML document, then some or all of the restrictions will be removed.
allow-pointer-lock
I will talk about this value later.
iframes can be nested. I will say more about that later.
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Basics of HTML 5Basics of ECMAScript
HTML DOM Basics
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
BACK NEXT