WDC 2.6 frontend security

--untrusted data

location & uirs

cookies

referrer

window name

indirect sources

other objs. always validate from event sources.

--sinks

-execution sink

eval() - click handler

-html elements sink

-location sink

window.location=input

if someone else to navigate u

-control flow sink

--

solutions

- minimize attack surface

avoid convert string to script

eval,timeout, etc

avoid innerhtml where possjble

use .textContent, document.createElement

- template approach

placeholder like angularjs

use bind instead of {{}}

- html input?

dont write ur own sanitizer

but if u do

parse input (using document.createElement) instead regex

whitelist of dom nodes

keep only that it safe instead of blacklist

- sanitizer

angular $sanitize

bleach.js

DomPurify

--

summary

avoid eval & innerHtml

use template language but be careful with attribhte

filter html input conservatively

--

do framework make things better?

domxss wiki

mustache security wiki

--

jquery? 

$(location.hash) is fixed but reintroduxe agajn

element.add(usercontent)

append after before html, etc

knockout? 

ko.applyBinding()

data-bind="click:.."

this won't be pickup by security analysis

angularjs?

{{expression}} in 1.1.5 will execute script

but it fixed now.

--

in general frameworks add complexity so u need to understand

e.g web components

--

this is really easy to get wrong

--

but there is 

content security policy

whitelist of content sources

its a bit restrictive

angular is the best coz has csp mode

ng-csp

angular 1.2 is good

--

summary

- avoid innerhtml

- understand frameworks

- csp provide additional layer of protection

- csp solve script injection but not all problems like control flows

--