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
86
Recreating the ZX Spectrum loader with Web APIs
rem
0
180
Living Standard
rem
1
250
State of the Gap
rem
1
810
The Art of Debugging
rem
2
2.1k
EdgeConf - Progressive Enhancement
rem
0
240
Toxic Side of Free. Or: how I lost the love for my side project.
rem
0
710
Muddling my way through real time
rem
0
670
The Bits Behind JS Bin
rem
4
850
Other Decks in Technology
See All in Technology
自社サービスのための独自リリース版Redmine「RedMica」の取り組み
vividtone
0
1.3k
JEP 480: Structured Concurrency
aya_ebata
0
130
より快適なエラーログ監視を目指して
leveragestech
4
1.4k
不動産 x AIことはじめ~データの真価を拓くために
estie
0
110
AIで変わるテスト自動化:最新ツールの多様なアプローチ/ 20240910 Takahiro Kaneyama
shift_evolve
0
210
ナレッジグラフとLLMの相互利用
koujikozaki
0
400
「家族アルバム みてね」における運用管理・ オブザーバビリティの全貌 / Overview of Operation Management and Observability in FamilyAlbum
isaoshimizu
4
160
社内の学びの場・コミュニティ形成とエンジニア同士のリレーションシップ構築/devreljapan2024
nishiuma
3
270
四国クラウドお遍路 2024 in 高知 オープニング
yukataoka
0
200
効果的なオンコール対応と障害対応
ryuichi1208
5
2.9k
o1のAPIで実験してみたが 制限きつすぎて辛かった話
pharma_x_tech
0
110
Developer Experienceを向上させる基盤づくりの取り組み事例集
coconala_engineer
0
140
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
The Invisible Customer
myddelton
119
13k
Speed Design
sergeychernyshev
22
430
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
Building an army of robots
kneath
302
42k
Web development in the modern age
philhawksworth
204
10k
Six Lessons from altMBA
skipperchong
26
3.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
227
52k
Rails Girls Zürich Keynote
gr2m
93
13k
Adopting Sorbet at Scale
ufuk
73
8.9k
Thoughts on Productivity
jonyablonski
66
4.2k
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