Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
iframe: a less than useful look at the abuse the iframe takes
Remy Sharp
December 02, 2013
Technology
8
980
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
61
Recreating the ZX Spectrum loader with Web APIs
rem
0
95
Living Standard
rem
1
150
State of the Gap
rem
1
620
The Art of Debugging
rem
2
1.8k
EdgeConf - Progressive Enhancement
rem
0
140
Toxic Side of Free. Or: how I lost the love for my side project.
rem
0
540
Muddling my way through real time
rem
0
470
The Bits Behind JS Bin
rem
4
700
Other Decks in Technology
See All in Technology
USB PD で迎える AC アダプター大統一時代
puhitaku
2
2k
CES_2023_FleetWise_demo.pdf
sparkgene
0
130
Stripe / Okta Customer Identity Cloud(旧Auth0) の採用に至った理由 〜モリサワの SaaS 戦略〜
tomuro
0
140
KyvernoとRed Hat ACMを用いたマルチクラスターの一元的なポリシー制御
ry
0
250
API連携に伴う規制と対応 / Regulations and responses to API linkage
moneyforward
0
170
CUEとKubernetesカスタムオペレータを用いた新しいネットワークコントローラをつくってみた
hrk091
1
300
MoT/コネヒト/Kanmu が語るプロダクト開発xデータ分析 - 分析から機械学習システムの開発まで一人で複数ロールを担う大変さ
masatakashiwagi
3
800
Hatena Engineer Seminar #23 「チームとプロダクトを育てる Mackerel 開発合宿」
arthur1
0
660
OpenShiftでスポットVMを使おう.pdf
jpishikawa
1
420
cdk deployに必要な権限ってなんだ?
kinyok
0
210
Deep Neural Networkの共同学習
hf149
0
360
IoT から見る AWS re:invent 2022 ― AWSのIoTの歴史を添えて/Point of view the AWS re:invent 2022 with IoT - with a history of IoT in AWS
ma2shita
0
290
Featured
See All Featured
Embracing the Ebb and Flow
colly
75
3.6k
Building Applications with DynamoDB
mza
85
5k
Web Components: a chance to create the future
zenorocha
304
40k
Testing 201, or: Great Expectations
jmmastey
25
5.7k
Three Pipe Problems
jasonvnalue
89
8.9k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
197
10k
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.3k
Bash Introduction
62gerente
601
210k
No one is an island. Learnings from fostering a developers community.
thoeni
12
1.5k
Code Review Best Practice
trishagee
50
11k
Debugging Ruby Performance
tmm1
67
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
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