Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Taking Front-End Security Seriously

Taking Front-End Security Seriously

Paul Theriault

May 02, 2014
Tweet

Other Decks in Technology

Transcript

  1. 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
  2. Sources • location & URI sources • Cookies • Referrer

    • Window Name • Indirect sources • Other objects (e.g postMessage)
  3. Sinks ! • Execution Sinks • HTMLElement Sinks • Set

    Location Sinks • Control Flow Sinks ... and many others: https://code.google.com/p/domxsswiki/
  4. 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
  5. 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
  6. Template Approach • Create a HTML template • Use placeholders

    for {{data}} • Escape characters then replace • Insert filled template into the DOM • (ie .innerHTML= filled template)
  7. 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
  8. Recap • Avoid eval & innerHTML • Use a template

    language, take care with attributes • Be very careful with HTML input, filter conservatively
  9. Frameworks • DomXSS Wiki • Mustache Security Wiki See also

    talks by Mario Heiderich JSMVCOMFG & The InnerHTML Apocolypse
  10. 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
  11. Frameworks? • Add complexity • Abstract away sinks • Add

    syntactic sugar • Add loopholes to browser security controls
  12. 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
  13. 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
  14. 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; }
  15. Knockout + CSP ? • Knockout Secure Binding • Created

    to work with Chrome extensions ! • https://github.com/brianmhunt/ knockout-secure-binding
  16. 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/
  17. 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";