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.1k
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
130
Recreating the ZX Spectrum loader with Web APIs
rem
0
230
Living Standard
rem
1
300
State of the Gap
rem
1
880
The Art of Debugging
rem
2
2.2k
EdgeConf - Progressive Enhancement
rem
0
290
Toxic Side of Free. Or: how I lost the love for my side project.
rem
0
760
Muddling my way through real time
rem
0
750
The Bits Behind JS Bin
rem
4
910
Other Decks in Technology
See All in Technology
SONiCで構築・運用する生成AI向けパブリッククラウドネットワーク
sonic
1
550
WindowsでGenesisに挑戦した話
natsutan
0
130
MagicPodが描くAIエージェント戦略とソフトウェアテストの未来
magicpod
0
340
Platform Engineering for Private Cloud
cote
PRO
1
160
計装を見直してアプリケーションパフォーマンスを改善させた話
donkomura
2
220
encoding/json v2を予習しよう!
yuyu_hf
PRO
1
230
GitHub ActionsをTypeScriptで作ろう!
sansantech
PRO
2
140
20250514 1Passwordを使い倒す道場 vol.1
east_takumi
0
170
テスト設計、逆から読むとおもしろい──仕様にない“望ましさ”の逆設計
mhlyc
0
200
PythonツールであるpygnmiをSONiCのgNMIに対して使ってみた
sonic
0
340
さくらのクラウド 開発の挑戦とその舞台裏
kazeburo
0
300
Design for Failure - リージョンとAZについて
yuki_ink
0
130
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The World Runs on Bad Software
bkeepers
PRO
68
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Optimising Largest Contentful Paint
csswizardry
37
3.2k
Visualization
eitanlees
146
16k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
620
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Designing Experiences People Love
moore
142
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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