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
DotSecutiry - Counter Spells and the Art of Kee...
Search
ingrid epure
April 21, 2017
Programming
730
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
DotSecutiry - Counter Spells and the Art of Keeping your Application Safe
dotSecurity Paris 2017
ingrid epure
April 21, 2017
More Decks by ingrid epure
See All by ingrid epure
Counter spells and the art of keeping you application safe
ingride
0
660
Making good testing decisions
ingride
0
140
Other Decks in Programming
See All in Programming
さぁV100、メモリをお食べ・・・
nilpe
0
130
Signal Forms: Beyond the Basics @ngBaguette 2026 in Paris
manfredsteyer
PRO
0
230
正しくソフトウェアを作る、前提を疑うための認知の視点 / doubt-premise
minodriven
17
6.1k
「エンジニアインターン、どうやって取った?」準備のリアルを語るLT会 Progate BAR
akiomatic
0
120
Lemonade + Foundry Toolkit でお手軽アプリ開発
seosoft
1
310
A2UI という光を覗いてみる
satohjohn
1
110
TypeSpec で繋ぐ複数プロダクトの型安全
maroon8021
1
420
Old Dog, New Tricks: The Java 25 Reinvention - JNation
bazlur_rahman
0
150
IBM Bobを活用したレガシーアプリの最新化
oniak3ibm
PRO
1
170
The Arts and Crafts of Work in the AI Era — Toward Mastery in Software Development
kuranuki
1
730
不変条件と整合性境界—ビジネスが決める設計判断と実現パターン / Invariants and Consistency Boundaries
nrslib
13
3.5k
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
chobishiba
3
550
Featured
See All Featured
Un-Boring Meetings
codingconduct
0
310
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
201
75k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.2k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
940
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.9k
What does AI have to do with Human Rights?
axbom
PRO
1
2.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.1k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
140
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
190
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
330
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
1
2.7k
How GitHub (no longer) Works
holman
316
150k
Transcript
counter-spells KEEPING YOUR APPLICATION SAFE and the art of
IN WHICH I REALLY WISH I DON’T DIE
None
story time
55 authors 665 commits to master 750 commits to all
branches March 20, 2017 – April 20, 2017 1,967 file changes 29,064 additions / 21,314 deletions shipping to prod > 100times a day
real-time editor that allows HTML input data sanitization is required
⚡
None
[ browsers are wonderful and weird ] ( really really
weird )
[ .href can sometimes be undefined even if present ]
None
None
[ know your enemy. ] ( and that might not
always be just users )
prepare for battle [ prepare your spells. ]
[ code that deals with weirdness better ] [ detect
& alert on weirdness ]
HTML templates JavaScript controllers components
Html Escaping Hypertextescaptus (hyper-text-ESC-aptus ) web framework’s rendering layer escape
HTML H Use for protection against XSS
.js .hbs .html
https://gist.github.com/ingride
[ avoid having to decide if html is safe ]
dangerouslySetInnerHTML - React htmlSafe in Ember trustAsHtml - Angular
Good Components BonumPars (bonum-pars) GC make component arguments not be
de-facto public API smaller components
just a simple title a styled message
] - title component ] - body component super-card-component
each component decides on implementation while invocation remains the same
composition instead of inheritance better encapsulation and clarity
https://embermap.com/topics/contextual- components/flexible-interfaces https://facebook.github.io/react/docs/composition-vs- inheritance.html
Good Helpers BonumAuxilium (bonum-auxilium) GH prefer updating the DOM over
returning HTML
create a text node set attributes append the anchor child
element return the the node use the DOM to create an element
Avoid Triple Curlies TripliciCrispusExpellus (Tri-pli-ci-crispus ) using on direct user
input can introduce vulnerabilities {{{ {{{ = htmlSafe() for templates
good helpers + good components = ♥
Thou Shall Noopen NoopenerNoreferrerExpellus (apertus-tour-expellus) N always use noopener AND
noreferrer with target=‘_blank’
newly opened tab can change the window.opener.location to a phishing
page window.opener.location is fair game Firefox uses noreferrer-only until v.52 partial access to the linking page via window.opener
static analysers regexp are evil watermarks are ♥ Detect &
Alert esLint & template linters
use the abstract syntax tree ( AST ) for Mustache:
MustacheStatement target= ‘_blank’ / elements : ElementNode & node attributes plug it in with your cli
https://github.com/rwjblue/ember-template-lint
story time
[ before esLint there was… grep]
postBuild hook to get real-time feedback find + grep +
regexp + wc to get the count compare the count against a static limit fail the build if numbers don’t match
[ regexp are like black magic. They're powerful & get
the job done, but you also fear them and might have to sell your soul in the process ] [ regexp rage by ingride ]
EsLint BonumLintum (bonum-LINT-um) EL Introduce a line in the sand
for blacklisted methods Use linters for real-time feedback in dev
esLint plugin with a custom rule that checks for blacklisted
methods
None
esLint CLI + custom rule to get the count fail
the build if errorCount > max allowed enable esLint cache for increased performance integration with ember-cli
None
from ♥ with [ blacklist methods addon coming soon ]
Content Security Policy SecuritasContentus (SECUR-itas-kontent-us ) mitigates XSS & data-injection
attacks CSP use to whitelist "safe" script hosts use v2 and v3 only use with hash-source & nonce-source
CSP Clean code Tools block deal with weirdness alert on
weirdness
[ thank you. ] @ingridepure @ingride