Taking Front-End Security Seriously

.html used to be boring

MORE COMPLEX Web apps (client-side, HTML, JavaScript) are changing. To
do these things safely, we need better security model for client-side code DO MORE THINGS MORE POWERFUL

I AM SUPER DUPER CEREAL CLIENT-SIDE == SRS BSNS

Summary Client-side Attacks Defence Strategies Frameworks Content Security Policy

DOM-Based XSS element.innerHTML = document.location.hash http://example/#<script>...

So why is this happening?

DOM-Based XSS element.innerHTML = document.location.hash SOURCE

DOM-Based XSS element.innerHTML = document.location.hash SINK

Sources • location & URI sources • Cookies • Referrer
• Window Name • Indirect sources • Other objects (e.g postMessage)

Sinks ! • Execution Sinks • HTMLElement Sinks • Set
Location Sinks • Control Flow Sinks ... and many others: https://code.google.com/p/domxsswiki/

Execution Sinks eval() Function() setTimeout() setInterval() setImmediate() anyTag.onclick/etc script.src script.text
script.textContent script.innerText

HTML Element Sinks document.write document.writeln element.innerHTML element.insertAdjacentHTML Range.createContextualFragment HTMLButton.value ...

Location Sink ! • Navigate the window • Inject script
window.location = dangerousInput

Control Flow Sink this[lol](pwned)

Control Flow Sink aMessage.name= "Downloads:getList" ! receiveMessage: function(aMessage){ ... let
c = aMessage.name[10].toLowerCase(); let methodName =c+aMessage.name.substring(11); this[methodName](aMessage.data, aMessage.target); } https://bugzilla.mozilla.org/show_bug.cgi?id=966141

So enough of the problem. What about the solutions?

Minimise Attack Surface Avoid converting strings to script: • eval,
Function.apply, setTimeout("string") • Inline event handlers (on*=string) Avoid .innerHTML where possible: • .textContent • document.createElement/setAttribute

Template Approach • Create a HTML template • Use placeholders
for {{data}} • Escape characters then replace • Insert filled template into the DOM • (ie .innerHTML= filled template)

Template Approach Can't break out of context <div>{{value}}</div> <div id="{{value}}"></div>
Safe? <a href="{{value}}">

What about <HTML> input?

HTML Input Don't write your own HTML sanitizer. But when
you do: • parse input • whitelist of DOM nodes • keep only safe nodes • fail conservatively

Sanitizers • DOMPurify • Angular's $sanitize • Bleach.js ! •
Many others

Recap • Avoid eval & innerHTML • Use a template
language, take care with attributes • Be very careful with HTML input, filter conservatively

Do frameworks make things better?

Frameworks • DomXSS Wiki • Mustache Security Wiki See also
talks by Mario Heiderich JSMVCOMFG & The InnerHTML Apocolypse

jQuery? Knockout? Angular?

jQuery ==

jQuery? • $(location.hash) • Fixed source: http://bugs.jquery.com/ticket/9521

jQuery Migrate ==

jQuery? ! • Re-introduced the bug in 1.9.1 • http://html5sec.org/jquery/
Source: http://blog.mindedsecurity.com/2013/04/jquery-migrate-is-sink-too.html

jQuery ? element.add(userContent) element.append(userContent) element.after(userContent) element.before(userContent) element.html(userContent) element.prepend(userContent) element.replaceWith(userContent) element.wrap(userContent)
element.wrapAll(userContent)

KnockoutJS 3.0.0 <div data-bind="click: alert(1)"></div> <div data-bind="value: alert(2)"></div> <div data-bind="style:
alert(3)"></div> ! <script> ko.applyBindings(); </script>

Angular 1.1.5 <div class="ng-app"> {{expression}} </div> <div class="ng-app"> {{constructor.constructor('alert(1)')()}} </div>
!

Frameworks? • Add complexity • Abstract away sinks • Add
syntactic sugar • Add loopholes to browser security controls

This is really easy to get wrong.

Content Security Policy

Content Security Policy • Originally proposed at Mozilla in 2007
• Mandatory in Firefox OS Apps & Chrome Extensions IE Firefox Chrome Safari Opera iOS Safari Opera Mini Android Browser Blackberry Browser Opera Mobile Chrome for Android Firefox for Android IE Mobile Partial 29.0 34.0 7.0 20.0 7.0 None 4.4: Support ed 10.0: Supported webkit 16.0: Support ed 33.0: Support ed 26.0: Support ed moz Partial

CSP 101 • Whitelist of content sources • http://www.html5rocks.com/en/ tutorials/security/content-security-
policy/

Firefox OS Apps CSP ! default-src *; script-src 'self'; object-src
'none'; style-src 'self' 'unsafe-inline' 40 source: https://developer.mozilla.org/en-US/Apps/CSP

script-src 'self'; <script> foo(); </script> <a href="javascript:alert('foo')"> <script src="http://3rdparty/ nope.js">
!

script-src 'self'; ! eval(); Function(); //etc

Frameworks + CSP?

Handlebars + CSP :( if (asObject) { params.push(source); return Function.apply(this,
params); } else { var functionSource = 'function ' + (this.name || '') + '(' + params.join(',') + ') {\n ' + source + '}'; log('debug', functionSource + "\n\n"); return functionSource; }

Knockout + CSP ? • Knockout Secure Binding • Created
to work with Chrome extensions ! • https://github.com/brianmhunt/ knockout-secure-binding

Angular + CSP <button ng-click="$event.view.alert(1)" > $element.onclick=function($event){ $event['view']['alert']('1'); } <html
ng-app ng-csp>

CanJS Underscore.js KnockoutJS JsRender Kendo UI AngularJS 1.0.8 AngularJS 1.2.0
Nope Nope Nope Nope Nope Nope YAY source: https://code.google.com/p/mustache-security/

CSP + Frameworks Work in progress. ! (both CSP and
frameworks)

What did we learn? • Aim for fool-proof; avoid foot
guns • Understand your frameworks • CSP provides an additional layer of protection element.innerHTML = "Just don't";

Thanks mustache security domxsswiki html5sec.org MDN app security guidelines HTML5
Rocks CSP Article Sources

Taking Front-End Security Seriously

Taking Front-End Security Seriously

Other Decks in Technology

Featured

Transcript