Slide 1
Slide 1 text
counter-spells
KEEPING YOUR APPLICATION SAFE
and the art of
Slide 2
Slide 2 text
IN WHICH I REALLY WISH
I DON’T DIE
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
story time
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
real-time editor that allows HTML input
data sanitization is required
⚡
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
[ browsers are wonderful and weird ]
( really really weird )
Slide 9
Slide 9 text
[ .href can sometimes be undefined even if
present ]
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
[ know your enemy. ]
( and that might not always be just users )
Slide 13
Slide 13 text
prepare for battle
[ prepare your spells. ]
Slide 14
Slide 14 text
[ code that deals with weirdness better ]
[ detect & alert on weirdness ]
Slide 15
Slide 15 text
HTML
templates
JavaScript
controllers
components
Slide 16
Slide 16 text
Html Escaping
Hypertextescaptus
(hyper-text-ESC-aptus )
web framework’s rendering layer
escape HTML
H
Use for protection against XSS
Slide 17
Slide 17 text
.js
.hbs
.html
Slide 18
Slide 18 text
https://gist.github.com/ingride
Slide 19
Slide 19 text
[ avoid having to decide if html is safe ]
dangerouslySetInnerHTML -
React
htmlSafe in Ember
trustAsHtml - Angular
Slide 20
Slide 20 text
Good Components
BonumPars
(bonum-pars)
GC
make component arguments
not be de-facto public API
smaller components
Slide 21
Slide 21 text
just a simple title a styled message
Slide 22
Slide 22 text
] - title component
] - body component
super-card-component
Slide 23
Slide 23 text
each component decides on implementation while invocation
remains the same
composition instead of inheritance
better encapsulation and clarity
Slide 24
Slide 24 text
https://embermap.com/topics/contextual-
components/flexible-interfaces
https://facebook.github.io/react/docs/composition-vs-
inheritance.html
Slide 25
Slide 25 text
Good Helpers
BonumAuxilium
(bonum-auxilium)
GH
prefer updating the DOM over
returning HTML
Slide 26
Slide 26 text
create a text node
set attributes
append the anchor child element
return the the node
use the DOM to create an element
Slide 27
Slide 27 text
Avoid Triple Curlies
TripliciCrispusExpellus
(Tri-pli-ci-crispus )
using on direct user input can
introduce vulnerabilities
{{{
{{{ = htmlSafe() for templates
Slide 28
Slide 28 text
good helpers +
good components
=
♥
Slide 29
Slide 29 text
Thou Shall Noopen
NoopenerNoreferrerExpellus
(apertus-tour-expellus)
N
always use noopener AND noreferrer
with target=‘_blank’
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
static analysers
regexp are evil
watermarks are ♥
Detect & Alert
esLint & template linters
Slide 32
Slide 32 text
use the abstract syntax tree ( AST )
for Mustache: MustacheStatement
target= ‘_blank’ / elements : ElementNode & node attributes
plug it in with your cli
Slide 33
Slide 33 text
https://github.com/rwjblue/ember-template-lint
Slide 34
Slide 34 text
story time
Slide 35
Slide 35 text
[ before esLint there was…
grep]
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
[ 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 ]
Slide 38
Slide 38 text
EsLint
BonumLintum
(bonum-LINT-um)
EL
Introduce a line in the sand
for blacklisted methods
Use linters for real-time feedback
in dev
Slide 39
Slide 39 text
esLint plugin with a custom rule that
checks for blacklisted methods
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
from ♥
with
[ blacklist methods addon coming soon ]
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
CSP
Clean
code
Tools
block
deal with
weirdness
alert on
weirdness
Slide 46
Slide 46 text
[ thank you. ]
@ingridepure @ingride