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
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Alex Sexton
February 12, 2014
Technology
3
2.5k
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
Tweet
Share
More Decks by Alex Sexton
See All by Alex Sexton
Your Very Own Component Library
slexaxton
5
740
Front-End Ops - jQuery Conf Chicago 2014
slexaxton
1
1k
Practicing Safe Script
slexaxton
18
2.9k
Other Decks in Technology
See All in Technology
AIで 浮いた時間で 何をする? 2026春 #devsumi
konifar
16
3.2k
AITuberKit+Bedrock AgentCoreで作る 3Dキャラクターエージェント
yokomachi
2
1.6k
Goで実現する堅牢なアーキテクチャ:DDD、gRPC-connect、そしてAI協調開発の実践
fujidomoe
3
740
Agent Payments Protocolで実装するAIエージェント間取引
tokio007
0
160
作るべきものと向き合う - ecspresso 8年間の開発史から学ぶ技術選定 / 技術選定con findy 2026
fujiwara3
4
580
Intro SAGA Event Space
midnight480
0
150
vol11_ねこIoTLT_お遊びVibeCoding
1027kg
0
180
Claude Codeと駆け抜ける 情報収集と実践録
sontixyou
1
910
「OSアップデート:年に一度の「大仕事」を乗り切るQA戦略」_Mobile Tech Flex 〜4社合同!私たちのモバイル開発自慢大会〜
gu3
0
230
『誰の責任?』で揉めるのをやめて、エラーバジェットで判断するようにした ~感情論をデータで終わらせる、PMとエンジニアの意思決定プロセス~
coconala_engineer
0
1.7k
社内でAWS BuilderCards体験会を立ち上げ、得られた気づき / 20260225 Masaki Okuda
shift_evolve
PRO
1
100
Agent Skills 入門
puku0x
0
920
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.3k
Ruling the World: When Life Gets Gamed
codingconduct
0
160
The agentic SEO stack - context over prompts
schlessera
0
670
How GitHub (no longer) Works
holman
316
140k
The Invisible Side of Design
smashingmag
302
51k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
110
Building the Perfect Custom Keyboard
takai
2
700
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.7k
How to make the Groovebox
asonas
2
2k
Optimising Largest Contentful Paint
csswizardry
37
3.6k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
2
460
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
450
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