Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
iframe: a less than useful look at the abuse th...
Search
Remy Sharp
December 02, 2013
Technology
8
1.2k
iframe: a less than useful look at the abuse the iframe takes
A 20 minute version for dotjs of my iframe abuse talk
Remy Sharp
December 02, 2013
Tweet
Share
More Decks by Remy Sharp
See All by Remy Sharp
Using a Modern Web to Recreate 1980s Horribly Slow & Loud Loading Screens
rem
0
140
Recreating the ZX Spectrum loader with Web APIs
rem
0
240
Living Standard
rem
1
300
State of the Gap
rem
1
890
The Art of Debugging
rem
2
2.2k
EdgeConf - Progressive Enhancement
rem
0
300
Toxic Side of Free. Or: how I lost the love for my side project.
rem
0
770
Muddling my way through real time
rem
0
770
The Bits Behind JS Bin
rem
4
920
Other Decks in Technology
See All in Technology
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
470
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
9
4.3k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
Operating Operator
shhnjk
1
580
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
300
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
140
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.8k
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
Connect 100+を支える技術
kanyamaguc
0
200
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
560
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Adopting Sorbet at Scale
ufuk
77
9.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Bash Introduction
62gerente
613
210k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Unsuck your backbone
ammeep
671
58k
Transcript
<iframe> A less than useful look at the abuse the
iframe takes. Remy Sharp • @rem • Left Logic
2007: detect globals 2008: jsbin 2010: jsconsole 2011: responsivepx
2008: 1.jsbin.com
2010: 2.jsbin.com
2012: 3.jsbin.com
framesets
Amazingly still work! two frames side by side
document.body = frameset
Scott Isaacs @ Microsoft 1997
iframe support dropped in XHTML 1.1 Lack of <object> support
in IE7 meant iframes stuck around.
Foundation of early comet techniques 2000/2006 var iframe = document.createElement('iframe');
iframe.style.display = 'none'; document.head.appendChild(iframe); iframe.src = '/live-stream'; require('http').createServer(function (req, res) { res.writeHead(200, { 'content-type': 'text/html' }); res.write(sendPadding()); setInterval(function () { res.write(getLiveData()); }, 1000); });
iframe must be in DOM to start writing to it
var window = iframe.contentWindow || iframe.contentDocument.parentWindow;
function iframe() { var iframe = document.createElement('iframe'); document.body.appendChild(iframe); return iframe.contentWindow
|| iframe.contentDocument.parentWindow; } var window = iframe(), document = window.document; document.open(); document.write(myAwesomeHTML); document.close();
Load won't fire until .close is called - though content
loads
Take a generated iframe out of the DOM, it'll reset
Dynamic iframes don't behave like regular windows !
The "stick it in an iframe" bit
Auto-play! Missing <bgsound> on mobile? <iframe src="muzak.mp3"></iframe> iOS 4 only
:(
Site doesn't have JSON API? Put their HTML embed in
an iframe and scrape away!
Detecting globals
Mobile WebView (PhoneGap, Chrome for iOS, etc)
Click-jacking Watch out!
Preventable in IE9+ via X-Frame-Options: SAMEORIGIN
Damn you mobile version <meta name="viewport" ...>
"Damn flash-ad is showing through the dropdown!"
Sync loading can be offloaded to iframes, as it won't
block the parent frame.
Factory reset a Samsung S3? <iframe src="tel:*2767*3855%23"></iframe>
x-frame comms
For bi-directional non- sockets comms
Used in jsconsole's remote
your mobile site add <script> iframe origin: jsconsole.com jsconsole.com postMessage
& onmessage EventSource Ajax post
Set "base" origin via document.domain
iframe a.com – iframe b.com — iframe a.com Deep communication
http://bit.ly/cross-domain-barrier
Passing data before load event via: window.name
Sandboxing iframe return "clean" object
Enable appcache on unknown urls
•Request / == "app chrome" •All other urls include iframe
to light manifest page •Manifest says: FALLBACK: /* / •Therefore: any request to an unknown url, the "app chrome" will load via the fallback
Future / Now / Good Parts • postMessage/onMessage • seamless
• srcdoc • sandbox="allow-same-origin allow-forms allow-scripts" http://benvinegar.github.com/seamless-talk/
In the next episode: setTimeout! Remy Sharp • @rem •
Left Logic leftlogic.com/hiring