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
250
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
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.5k
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
2.9k
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
gree_tech
PRO
0
550
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
310
「魔法少女まどか☆マギカ Magia Exedra」の必殺技演出を徹底解剖! -キャラクターの魅力を最大限にファンに届けるためのこだわり-
gree_tech
PRO
0
570
異業種出身エンジニアが気づいた、転向して十数年経っても変わらない自分の武器とは
macnekoayu
0
290
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
110
Bye-Bye Query Spaghetti: Write Queries You'll Actually Understand Using Pipelined SQL Syntax
tobiaslampertlotum
0
140
kubellが考える戦略と実行を繋ぐ活用ファーストのデータ分析基盤
kubell_hr
0
140
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
masahirokawahara
1
1.5k
AI時代にPdMとPMMはどう連携すべきか / PdM–PMM-collaboration-in-AI-era
rakus_dev
0
280
Obsidian応用活用術
onikun94
1
390
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
74
5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Making Projects Easy
brettharned
117
6.4k
Faster Mobile Websites
deanohume
309
31k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
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