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
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
4
2.8k
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
3k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
1k
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
290
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.3k
TLSから見るSREの未来
atpons
2
310
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
2
2k
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
550
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
230
スタックチャン家庭用アシスタントへの道
kanekoh
0
120
伴走から自律へ: 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
visional_engineering_and_design
3
460
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
A better future with KSS
kneath
238
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Designing for humans not robots
tammielis
253
25k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Why Our Code Smells
bkeepers
PRO
337
57k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Practical Orchestrator
shlominoach
189
11k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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