Iframes and Sandboxed Iframes

IFRAMES
A webpage within a webpage

IFRAMES
An iframe or an inline frame

allows you to load content from
another site inside your webpage
Iframes add a whole other

capability to your browser
which allows you to do cool stuff
IFRAMES
iframes have their own URL which
can point to any site on the internet
<iframe src=“http://www.nytimes.com/" width="800" height="300"></iframe>
This allows you to include

the content of the New
York Times on your site!
IFRAMES
iframes have their own URL which
can point to any site on the internet
<iframe src=“http://www.nytimes.com/" width="800" height="300"></iframe>
In fact ads displayed on sites are just

iframes which reference an ad
net work which supplies contextual ads
IFRAMES
Iframes allow:
1. Frame based layouts - where each frame is

independent and can be resized separately
2. 3rd party content embedding - YouTube URLs,
audio, forms, documents anything can be embedded
3. Content isolation - Content on your page
is isolated from iframe and vice versa
IFRAMES
Iframes come with their own set of issues
Clickjacking
If you do not own the source URL you
cannot control the content of the iframe
Users might be led to click on hyperlinks

hidden beneath legitimate content -
resulting in unintended actions
Clickjacking
IFRAMES
Display malicious content

What if an ad on your site
shows a login box?
The user name and password for your

site could be compromised!
Clickjacking
Display malicious content IFRAMES
Webpage redirection
What if the iframe used location.href
and sent the user to another site?
yourbank.com -> yourbank.fake.com

Clickjacking
Webpage redirection Iframes come with their own set of issues
malware
If the page is from a 3rd party site,

it could infect the user’s machine
Clickjacking
Webpage redirection Iframes come with their own set of issues
malware
interference
The page could just be plain annoying

- showing popups, autoplaying video
etc.
IFRAMES
Clickjacking
Display malicious content
Webpage redirection
malware
interference
IFRAMES
Example17-iframes-embedded.php
IFRAMES
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iframes - embedded</title>
</head>
<body>
<iframe src = "http://nytimes.com" height="400px" width="600px"
scrolling="yes" frameborder="0">
</iframe>
<iframe src = "Example17-iframes-annoying.php" height="400px" width="600px"
</iframe>
</body>
</html>
This page is pretty annoying - look

carefully
IFRAMES
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</iframe>
</iframe>
</body>
</html>
Here is an embedded iframe

displaying the front page of the NYT
IFRAMES
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</iframe>
</iframe>
</body>
</html>
And another local page - now this

local page could do a bunch of stuff
to annoy users
IFRAMES
<!DOCTYPE html>
<html lang="en">
<head>
<title>Iframes - annoying iframe</title>
</head>
<body>
<h3> This is a pretty annoying iframe </h3>
<script>
window.onload = function() {
setTimeout(function() { alert("Hello - am I annoying you yet? "); }, 3000);
}
</script>
</body>
</html>
IFRAMES
<!DOCTYPE html>
<html lang="en">
<head>
<title>Iframes - annoying iframe</title>
</head>
<body>
<h3> This is a pretty annoying iframe </h3>
<script>
window.onload = function() {
setTimeout(function() { alert("Hello - am I annoying you yet? "); }, 3000);
}
</script>
</body>
</html>
This one displays a popup every 3

seconds
IFRAMES
We need a way to allow iframes to

do stuff without interfering with
our site
The principle of least privilege
using the sandbox attribute
IFRAMES
This allows you to You have very

specify what granular control
exactly your iframe over the privileges
can and cannot do of the iframe
IFRAMES
This attribute allows us to have the

advantage of using iframes while having
greater control over what they can do!
IFRAMES
<iframe
src="https://platform.twitter.com/widgets/tweet_button.html"
style="border: 0; width:80px; height:20px;”
sandbox="">
</iframe>
Embed the Twitter t weet button

on your page using an iframe
IFRAMES
<iframe
sandbox="">
</iframe>
This attribute indicates that this

iframe is fully sandboxed and a whole
bunch of restrictions apply to it
<iframe
IFRAMES restrictions
sandbox="" >
</iframe>
No Javascript execution
No JS in script tags, no inline event

handlers, no javascript: URLs
No Javascript execution IFRAMES restrictions
<iframe
sandbox="" >
</iframe>
Unique origin
This means that all same-origin
checks will fail for that frame,
unique origins match no other origin
No access to cookies, DBs of any origin
Unique origin <iframe
sandbox="" >
</iframe>
No new windows or dialogs
The iframe cannot use window.open

or target=“_blank”

sandbox="" >
</iframe>
No forms or plugins
You cannot submit forms on the iframe
nor include any new plugins

sandbox="" >
No forms or plugins
</iframe>
No parent navigation
The iframe can only navigate itself, not

it’s top-level parent

sandbox="" >
No forms or plugins
</iframe>
No auto-triggered features
No autoplaying of videos, auto

focusing of form elements
<iframe
IFRAMES restrictions
sandbox="" >
</iframe>
Unique origin
No forms or plugins
<iframe
IFRAMES
sandbox="" >
</iframe>
Unique origin
Pretty draconian
No new windows set of
or dialogs
restrictions
No forms or plugins
<iframe
IFRAMES
sandbox="" >
</iframe>
Unique origin
These might be fine for embedding
static pages but we have to loosen
No forms or plugins
these when we work with dynamic
content
<iframe
IFRAMES
sandbox="" >
</iframe>
Unique origin
No forms or plugins
IFRAMES
Example18-iframes-sandbox.php
IFRAMES
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Iframes - sandbox</title> 
</head> 
<body> 
<iframe src="http://nytimes.com" height="400px" width="600px" 
scrolling="yes" frameborder="0"> 
</iframe> 
<br> 
<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" 
src="https://platform.twitter.com/widgets/tweet_button.html" 
style="border: 0; width:80px; height:20px;"> 
</iframe> 
</body> 
</html>
IFRAMES
<!DOCTYPE html> 
The Tweet button is embedded

<html lang="en"> 
<head> 
using an iframe
</head> 
<body> 
</iframe> 
<br> 
</iframe> 
</body> 
</html>
It requires a bunch of
permissions to work
IFRAMES
Insert video of how Tweet button works

<!DOCTYPE html> 
IFRAMES
<html lang="en"> 
<head> 
</head> 
<body> 
</iframe> 
<br> 
</iframe> 
</body> 
</html>
This is the URL for the Tweet

button
</head> 
<body> 
IFRAMES
</iframe> 
<br> 
</iframe> 
</body> 
</html>
These are the permissions that

the iframe needs
<body> 
IFRAMES
</iframe> 
<br> 
<iframe sandbox=" allow-same-origin allow-scripts allow-popup

forms" 
</iframe> 
</body> 
</html>
Allows the document in the
frame to maintain its origin
This page is loaded from Twitter
and will be able to access
Twitter’s data such as cookies
e src="http://nytimes.com" height="400px" width="600px" 
me> 
IFRAMES
ame sandbox="allow-same-origin allow-scripts allow-popups allow-
s" 
Allows the frame to run

me> 
> 
>
Javascript and allows features to

trigger automatically e.g. onFocus
The button implements

Javascript to get data from
Twitter to display a form
times.com" height="400px" width="600px" 
IFRAMES
" frameborder="0"> 
allow-same-origin allow-scripts allow-popups allow-forms"

 
latform.twitter.com/widgets/tweet_button.html" 
0; width:80px; height:20px;"> 
Allows window.open(),
showModalDialog(),
target=“_blank” etc
The Twitter form opens up in a

new dialog
t="400px" width="600px" 
"> 
IFRAMES
igin allow-scripts allow-popups allow-forms"  
com/widgets/tweet_button.html" 
height:20px;"> 
Allows the t weeting form to be

submittable to Twitter
IFRAMES
<!DOCTYPE html> 
<html lang="en"> 
<head> 
</head> 
<body> 
</iframe> 
<br> 
</iframe> 
</body> 
</html>
There are other directives to sandbox as

well, but these are the most common!

Iframes and Sandboxed Iframes

Uploaded by

Copyright:

Available Formats

Iframes and Sandboxed Iframes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Iframes and Sandboxed Iframes

Uploaded by

Copyright:

Available Formats

IFRAMES

A webpage within a webpage

An iframe or an inline frame

Iframes add a whole other

<iframe src=“http://www.nytimes.com/" width="800" height="300"></iframe>

This allows you to include

<iframe src=“http://www.nytimes.com/" width="800" height="300"></iframe>

In fact ads displayed on sites are just

1. Frame based layouts - where each frame is

Users might be led to click on hyperlinks

Display malicious content

The user name and password for your

yourbank.com -> yourbank.fake.com

If the page is from a 3rd party site,

The page could just be plain annoying

This page is pretty annoying - look

Here is an embedded iframe

And another local page - now this

This one displays a popup every 3

We need a way to allow iframes to

This allows you to You have very

This attribute allows us to have the

Embed the Twitter t weet button

This attribute indicates that this

No JS in script tags, no inline event

No new windows or dialogs

The iframe cannot use window.open

No new windows or dialogs

No new windows or dialogs

The iframe can only navigate itself, not

No new windows or dialogs

No autoplaying of videos, auto

The Tweet button is embedded

Insert video of how Tweet button works

This is the URL for the Tweet

These are the permissions that

<iframe sandbox=" allow-same-origin allow-scripts allow-popup

Allows the frame to run

Javascript and allows features to

The button implements

allow-same-origin allow-scripts allow-popups allow-forms"

The Twitter form opens up in a

Allows the t weeting form to be

There are other directives to sandbox as

You might also like