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
Hacking Front-End Apps
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Alex Sexton
February 12, 2014
Technology
2.5k
3
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Hacking Front-End Apps
My talk on client side web security as given at the jQuery Conference 2014 in San Diego
Alex Sexton
February 12, 2014
More Decks by Alex Sexton
See All by Alex Sexton
Your Very Own Component Library
slexaxton
5
760
Front-End Ops - jQuery Conf Chicago 2014
slexaxton
1
1k
Practicing Safe Script
slexaxton
18
3k
Other Decks in Technology
See All in Technology
AIエージェントを雇う前に決める5つのこと
knishioka
1
140
プロダクトエンジニアに必要な「いい感じ」に作る能力 〜たくさん作れる時代に、どこまで作るかの決め方〜
jnishime_dresscode
1
560
DGX Sparkを2台使って いろいろ動かす話
sonoda_mj
1
110
Point Cloud as a Foreign Language for Multi-modal Large Language Model
takmin
0
360
全員がプロダクトへ向き合う組織を持続成長させるために——組織づくりのフライホイールと4象限 / The Flywheel Model and Four Quadrants for Organizational Design
hiro_torii
1
150
Level Up Your CDK DX: 5 Tools I’ve Been Building
gotok365
2
170
全社に広がるMCPサーバーを、 どう安全に管理するか MCPass開発の舞台裏
mtpooh
3
240
Bet AI Day 2026丨AIによって本質に戻るシステムリスク管理
layerx
PRO
0
590
スクラムで身についていた動き方を、XPで捉え直してみた
codmoninc
0
120
「重なり」は迎える側がつくる ― 人もAIエージェントも歓迎するプロダクトエンジニアリング ―
go0517go
PRO
0
110
データエンジニアの困りごとをDevinと一緒に解消する
10xinc
2
350
Jetpack Compose で挑む新聞紙面UI ─ 複合ジェスチャー・ポリゴン記事領域・適応的ページ構成という3つの壁/droidkaigi2026
nikkei_engineer_recruiting
0
140
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
56
3.5k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
74
42k
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
Darren the Foodie - Storyboard
khoart
PRO
3
3.8k
Why You Should Never Use an ORM
jnunemaker
PRO
61
10k
30 Presentation Tips
portentint
PRO
1
380
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
120
120k
HDC tutorial
michielstock
2
830
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
1
390
Java REST API Framework Comparison - PWX 2021
mraible
34
9.7k
Transcript
Hacking Front-End Apps Alex Sexton
I work at .
which is in . California
but…
I live in . Texas
The web has a lot in common with Texas.
“The wild west.”
In 1985, Texas had a problem.
None
Littering
Some Texans defended their “God-given right to litter.”
ಠ_ಠ
There were fines for littering.
photo by Curtis Gregory Perry
But no one seemed to care.
The state tried some slogans.
None
But these slogans apparently did not resonate with the core
offenders
Males 18-24 “Bubbas in Pickup Trucks”
In 1985 Texas tried a new campaign:
None
The campaign reduced litter on Texas highways ! 72% !
from 1986 to 1990.
My point is…
“Hey everyone, you should make your websites more secure because
it’s important.” ! Probably isn’t going to do the trick.
DON’T! MESS! WITH! XSS Also probably won’t work.
Web developers, not security researchers, are the core audience.
Web security is hard.
“All you have to do is never make a single
mistake.” - I Think Mike West
“I discount the probability of perfection.” - Alex Russell
Content Injection
None
None
None
Everyone has a friend that always seems to pick “<script>alert(‘hacked!’);</script>”
as their username.
My User Agent
My Friend, Mike Taylor’s User Agent Mozilla/5.0 (Macintosh; Intel Mac
OS X 10.9; rv:25.0) <script>alert(‘lol’);</script> Gecko/20100101 Firefox/25.0
My Friend, Mike Taylor’s User Agent Mozilla/5.0 (Macintosh; Intel Mac
OS X 10.9; rv:25.0) <script>alert(‘lol’);</script> Gecko/20100101 Firefox/25.0
ಠ_ಠ
Samy
None
None
None
ಠ_ಠ
So let’s just detect malicious scripts!
None
alert(1)
The Billy Hoffman Whitespace Attack <script> ! </script>
The Billy Hoffman Whitespace Attack <script> ! </script> Malicious
Code
The Billy Hoffman Whitespace Attack <script> ! </script> tab
tab tab space space
The Billy Hoffman Whitespace Attack <script> ! </script> 1
1 1 0 0
You cannot detect malicious code.
output.replace(/<script>/, ‘’);
CSS Hacks
Old School
None
Link Visited Link getComputedStyle( getComputedStyle( ) ) === \o\|o|/o/ Pretty
much People Celebrating (or screaming on fire)
Timing Attacks
Security by Inaccuracy
requestAnimationFrame + :visited = ಠ_ಠ
requestAnimationFrame + :visited = ಠ_ಠ
requestAnimationFrame + :visited = ಠ_ಠ
Link Visited Link
Link Visited Link <16ms >60ms Time to render
JSON-P
MORE LIKE JSON-Pretty-Insecure
“I’d really like it if someone could run arbitrary dynamic
scripts on my page” - JSONP Users
You wouldn’t do this.
So don’t do this.
A Leak In The Response
YouProbablyShouldUseCORS.tumblr.com
enable-cors.org
Try to say CROSS SITE! REQUEST FORGERY 5 times fast.
Set-Cookie ‘csrf=0003’
Set-Cookie ‘csrf=0003’
None
None
None
It gets worse.
Contextis White Paper
Cross-Domain Data Snooping via SVG Filters and OCR
None
ಠ_ಠ
We need a new approach.
Content Security Policy
None
Disallow Inline JS, CSS By Default!
Disallow eval By Default!
Disallow Cross Domain JS, CSS, IMG, Fonts
Report Violations!
None
A White List That’s the key!
Good Security Goes Beyond Content Injection
<iframe sandbox>
HTTPS Everywhere
HTTPS Everywhere
HTTPS Only
301 Redirect http
https HSTS
Frame Busting
Disallow as an iFrame X-Frame-Options
It’s “security by default.” At least much closer…
You can rely a little less on being perfect.
it only matters if everyone buys in. But
We need our own slogan.
We need developers to take pride in making secure applications.
Don’t Mess With The Web
ಠ_ಠ
Let’s do something about it together.
Thanks! @SlexAxton Special Thanks To: Mike West * 1000 Adam
Baldwin Contextis MDN