How Secure Is AngularJS?

How Secure Is AngularJS?

• 1.
  Ksenia Peguero How Secureis AngularJS?
• 2.
  © 2016 Synopsys,Inc. 2 Who Am I? • Ksenia Peguero, previously Ksenia Dmitrieva • Principal Consultant at Synopsys, previously Cigital • 7 years of application security experience • Frequent conference speaker: RSA, AppSec EU, B-sides, Nullcon, No Fluff Just Stuff • Twitter @KseniaDmitrieva • Ballroom dancer Research Interests: • JavaScript frameworks • HTML5 • Static analysis
• 3.
  © 2016 Synopsys,Inc. 3 Agenda • AngularJS Intro • AngularJS and OWASP Top 10 • AngularJS Built-in Security Controls • AngularJS Security Issues • DOM-XSS • Template Injection • Sandbox Bypass • Demos
• 4.
  © 2016 Synopsys,Inc. 4 AngularJS Pop Quiz What is AngularJS? What is the current version of AngularJS? What software design pattern is used for implementing user interface? Who invented and who maintains AngularJS? What are the benefits of AngularJS? If AngularJS is on the front- end, what is used on the back end? What is a popular type of applications that AngularJS enables?
• 5.
  © 2016 Synopsys,Inc. 5 AngularJS Pop Quiz - Answers • AngularJS is an open source front-end JavaScript framework • What is the current version of AngularJS: – Angular 1.6.2 – Angular 2.4 – Angular 4 to be released on March 1, 2017 • Angular – MVC - Model View Controller – MVVM - Model View ViewModel – MVW - Model View Whatever • Originally developed by Miško Hevery, then open sourced, and now maintained by Google • What are the benefits of AngularJS? – Separation of HTML, CSS, and JavaScript logic – Convenience in DOM manipulations – Performance • If AngularJS is on the front-end, what technologies are used on the back end? – Whatever: NodeJS, Java, C#, you name it • A lot of Angular applications are built as single-page applications (SPA)
• 6.
  © 2016 Synopsys,Inc. 6 Angular and OWASP Top 10 • Angular is a client-side framework! It cannot have all Top 10 issues! OWASP Top 10 Angular Injection (SQL, Command, LDAP) Broken AuthN and Session Management Cross-site scripting Insecure Direct Object Reference Security Misconfiguration Sensitive Data Exposure Missing Function Level Access Control CSRF Using components with Known Vulnerabilities Unvalidated Redirects and Forwards ? ? ?
• 7.
  © 2016 Synopsys,Inc. 7 Angular and OWASP Top 10 • OWASP Top 10 issues that Angular code may have: OWASP Top 10 Injection (SQL, Command, LDAP) Broken AuthN and Session Management Cross-site scripting Insecure Direct Object Reference Security Misconfiguration Sensitive Data Exposure Missing Function Level Access Control CSRF Using Components with Known Vulnerabilities Unvalidated Redirects and Forwards
• 8.
  © 2016 Synopsys,Inc. 8 AngularJS Built-in Security Controls
• 9.
  © 2016 Synopsys,Inc. 9 XSS Protection: Output Encoding and SCE • Automatic context-aware output encoding – Encoding is context aware (HTML element, attribute, URL) – All unsafe symbols are encoded, nothing is removed – Used with ng-bind <p ng-bind=“htmlCtrl.html"></p> • SCE (Strict Contextual Escaping) – uses ngSanitize module – Sanitization for a particular context: HTML, URL, CSS – Used with ng-bind-html – Enabled by default in versions 1.2 and later, but can be disabled – $sceProvider.enabled(false) – $sce.trustAs(type, value) or $sce.trustAsHtml(value)
• 10.
  © 2016 Synopsys,Inc. 10 XSS Protection: Content Security Policy • CSP disallows the use of eval() and inline scripts • Angular separates HTML, CSS, and JavaScript > no inline scripts! • Angular code is compatible with CSP by out of the box • Caveats: – Angular uses eval() internally to parse expressions – Angular may use inline styles, not inline scripts (for ngCloack, ngHide) • Angular without inline eval() runs 30% slower
• 11.
  © 2016 Synopsys,Inc. 11 XSS Protection: Enforcing Content Security Policy Note: inline styles may be abused by attackers • See Mario Heiderich’s paper on scriptless attacks https://www.nds.rub.de/media/emma/veroeffentlichungen/2012/08/16/scriptlessAttacks- ccs2012.pdf Instead of allowing ‘unsafe-inline’ for styles, developers can include angular-csp.css in the HTML for ngCloak and ngHide directives to work. Angular Setting Code Angular Behavior Nothing <body ng-app> Use inline styles, check for unsafe eval in the CSP header Default CSP <body ng-app ng-csp> No inline styles, no eval No-unsafe-eval <body ng-app ng-csp="no-unsafe-eval"> Eval cannot be used, but it’s ok to use inline styles CSP must have: style-src ‘unsafe-inline’ No-inline-style <body ng-app ng-csp="no-inline-style"> Angular can use eval, but cannot use inline styles CSP must have: script-src ‘unsafe-eval’
• 12.
  © 2016 Synopsys,Inc. 12 XSS Protection: Sandbox? Not Really • All versions of Angular up to 1.6 executed Angular Expressions in a sandbox • Angular Expressions are evaluated against the scope object https://www.youtube.com/watch?v=Hium4FVAR5A&index=4&list=PLhixgUqwRTjwJTIkNopKuGLk3P m9Ri1sF • Every version had a sandbox escape “vulnerability” • Sandbox was never considered to protect code for security reasons • What does it mean “to escape a sandbox”? – Directly manipulate the DOM – Execute plain old vanilla JavaScript • Example payload: {{x = {'y':''.constructor.prototype}; x['y'].charAt=[].join;$eval('x=alert(1)');}} • As of Angular 1.6 sandbox has been completely removed https://blogs.synopsys.com/software-integrity/2016/12/28/angularjs-1-6-0-sandbox/
• 13.
  © 2016 Synopsys,Inc. 13 CSRF Protection: Help from the Client • CSRF token must be generated and validated on the server side • Angular automatically reads a cookie sent from the server and saves the value to an HTTP header • What a developer needs to do: – Securely generate CSRF token on the server side – Add a cookie XSRF-TOKEN with the token value – Angular will add a custom header X-XSRF-TOKEN with the token value – Verify on the server if the X-XSRF-TOKEN value matches the cookie XSRF-TOKEN value – If the token and the cookie values do not match, reject the request • Note: if XSS is present on a page any CSRF protection is bypassable! https://blogs.synopsys.com/software-integrity/2017/01/25/angularjs-security-series-introduction/
• 14.
  © 2016 Synopsys,Inc. 14 AngularJS Security Issues
• 15.
  © 2016 Synopsys,Inc. 15 DOM-XSS • DOM-XSS happens when a malicious payload can manipulate the DOM to cause JavaScript code to execute • Angular does a pretty good job of protecting from DOM-XSS, except: – Explicitly using $sce.trustAsHtml() with untrusted input – Angular.element module (subset of jQuery) – Third-party Angular modules have vulnerabilities  angular-translate  textAngular  typeahead
• 16.
  © 2016 Synopsys,Inc. 16 XSS in angular.element Reading data from user <form> <label>After:</label><input type="text" ng-model="afterinput" /> <button type="submit" nb-click="aftersubmit()">Submit</button> </form> <div ng-controller="View1Ctrl"> <div id="testDiv">{{name}}</div> </div> controller('View1Ctrl', ['$scope', '$document', function($scope, $document) { $scope.name = "ChangeMe"; var element = angular.element($document[0].querySelector('#testDiv')); $scope.aftersubmit=function() { if($scope.afterinput) element.after($scope.afterinput); } Inserting data in Angular code
• 17.
  © 2016 Synopsys,Inc. 17 XSS in angular.element Payload: <p onmouseover=alert('after');>After</p> Why is there an injection? SCE is not automatically applied to angular.element
• 18.
  © 2016 Synopsys,Inc. 18 XSS in angular-translate • Plugin angular-translate is used for pages internationalization angular.module('app').config(function($translateProvider) { $translateProvider.translations('en', {GREETING: 'Hello <b>{{name}}</b>'}); $translateProvider.translations('de', {GREETING: 'Hallo <b>{{name}}</b>'}); $translateProvider.preferredLanguage('en'); }); angular.module('app').controller('Ctrl', function($scope, $translate, $routeParams, $route, $translateSanitization){ $translateSanitization.useStrategy(); $scope.translateValues = {name: $routeParams.name}; var lang = $routeParams.lang; if (lang !== undefined) { $translate.use(lang); } ... } <div translate="GREETING" translate-values="{translateValues.name}"></div> • Setting translation strategy to ‘null’ or leaving it out (default) leads to XSS
• 19.
  © 2016 Synopsys,Inc. 19 XSS in TextAngular • The textAngular module is a WYSIWYG editor with collaborative editing functionality • The editor processes the input and displays it (including HTML tags) • textAngular uses textAngular-sanitizer module – Only verifies that an href starts with “http” • Sample payload: http://A/A<img src=x onerror=alert('XSS_Success')> <p> Enter your comment <a target="" href="http://A/A<img src=x onerror=alert('XSS_Success')>">here!</a > </p>
• 20.
  © 2016 Synopsys,Inc. 20 XSS in TypeAhead • TypeAhead module shows hints as the user starts typing in a text field • The list of hints is not sanitized if at least one condition is met: – ui.bootstrap version prior to 0.13.4 is used – ngSanitize is not included <form ng-submit="submit()"> <input type="text" ng-submit="submit()" ng-model="search_val" typeahead="search_val for search_val in searches" class="form-control"> <input type="submit" value="Search"/> </form> module.controller( 'TypeaheadCtrl', function($scope,$http) { $scope.selected = undefined; $scope.searches = [ decodeURIComponent(window.location.search.split("?")[1]) ]; } <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script> var module = angular.module('app', ['ui.bootstrap']
• 21.
  © 2016 Synopsys,Inc. 21 Demo DOM-XSS in typeahead module
• 22.
  © 2016 Synopsys,Inc. 22 Server-side templates Client-side templates JavaScript: Jade, ejs, Pug AngularJS ReactJS Java: JSP PHP: Smarty Template Injection • Mixing server-side and client-side templates can cause XSS without the need to inject HTML tags • User input added to server-side template and then sent to client-side template: – Server-side template engine only escapes malicious HTML characters (e.g., <, >, “, ‘) – Attacker can place AngularJS expression language within {{ }} – Will not be escaped by server-side code – Will be executed by the client-side AngularJS template – Will run within a sandbox with limited execution of JavaScript (prior to version 1.6) – Sandbox bypass is always possible! • Avoid using both client-side and server-side templates! – Keep app logic on server side and presentation on client side
• 23.
  © 2016 Synopsys,Inc. 23 Template Injection Template User Input Template Engine Server-side Client-side res.render() Template Engine AngularJS template View compile Malicious AngularJS code is injected through input Template engine only escapes HTML special characters Template engine renders AngularJS expressions including malicious code Malicious code executes within the view 1 2 3 4
• 24.
  © 2016 Synopsys,Inc. 24 Demo Template Injection and Sandbox Bypass
• 25.
  © 2016 Synopsys,Inc. 26 Conclusion • Use Angular, as it is a very secure framework: – Contextually-aware encoding – Strict contextual encoding – Separation of HTML and JavaScript – CSP compatible • Do not rely on Angular sandbox • Do not mix server-side and client-side templates • Check plugins for security issues and use the latest version • … • Profit
• 26.
  © 2016 Synopsys,Inc. 27 Thank you! Questions? Ksenia Peguero ksenia@synopsys.com Twitter: @KseniaDmitrieva https://www.synopsys.com/software