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
150
Recreating the ZX Spectrum loader with Web APIs
rem
0
260
Living Standard
rem
1
310
State of the Gap
rem
1
900
The Art of Debugging
rem
2
2.2k
EdgeConf - Progressive Enhancement
rem
0
310
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
930
Other Decks in Technology
See All in Technology
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
230
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
420
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
260
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
480
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
120
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
Rustから学ぶ 非同期処理の仕組み
skanehira
1
140
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Rails Girls Zürich Keynote
gr2m
95
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
KATA
mclloyd
32
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
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