5. What is AngularJS?
• AngularJS is open-source web application framework
maintained by Google
• Front-end MVC framework
• Built-in data-binding
• Client-side templates
• Back-end can use any technology(Java, .NET, Ruby, etc.)
• Single Page Applications (SPAs)
• AngularJS simplifies development and testing
6. Model - View - Controller – on the Client
Client
Data (JSON)
11. View - (Jade Template)
doctype
html(ng-app='app')
head
title Cigital
link(rel="stylesheet", href="/bootstrap.css")
base(href="/")
body(ng-controller=‘controller')
p {{hello}}
include scripts
12. Directives
• Angular is sandboxed (Moved From The DOM)
• Directives are markers on a DOM element
• Attribute
• element name
• Talk to the HTML compiler
• Transform DOM elements + children elements
• ngClick – On Click
• Developers can create custom directives
13. Services
• Used to organize and share code across an application
• AngularJS has built in services
• $http
• You can build your own services
• loginService
• Logging
14. An Angular Application Summed Up
• MVC – Or Model View (Whatever)
• Config
• Controllers
• Templates - View
• Routing
• Directives
• Services
• Scopes
• $scope/$rootScope
• Expressions
• {{helloWorld}}
23. Sandbox
• Angular separates from the DOM using expressions
• AngularJS uses a sanitization function to prevent the
execution of an unsafe expression
• This means we can’t access
• Window object
• DOM elements
• Global variables
• Object constructor
• Sandbox is *not for security reasons
24.
25. Sandbox Escapes – 1.0 – 1.1.5
• First found by Mario Heiderich
• Within an expression you could call a constructor
• Which could call the constructor of the constructor
• Which returns the function constructor that can access eval
{{constructor.constructor('alert(1)')()}}
• But AngularJS Team Fixed it
31. Summarizing Sandbox Escapes
• In the end (it doesn’t even matter)
• Developers cannot rely on updating Angular to be secure
• Essentially attackers have a universal Sandbox Bypass
• Expression Interpolation == XSS
• Unclear if the Angular team will fix it
• Lets see what 2.0 has instore
33. CSP
• Content Security Policy (CSP)
• Helps protect against XSS
• Allows you define where scripts are loaded / ran
• Angular Harmonizes with CSP with its ngCSP directive
• Abusing browser and framework functionality allows XSS
34. CSP Bypasses
• Early bypasses were trivial
• onclick isn’t accessible, but you can abuse the framework
• ng-click=“$event.window.alert(1)”
• Issues within the browser
• Chrome ES6 Reflect API
• Universal CSP Bypass
• Does anyone whitelist CDNs in their CSP?
• What about ajax.googleapis.com?
38. Sanitizer Bypasses
• The Sanitizer is essentially an XSS filter
• It’s a component called $sanitize
• It returns a clean string of HTML ready for use within the view
• First (OLD) Sanitizer used a HTML parser from 2008
• Which could be bypassed by including SVG and using the use
element which allows you pulls resources
• Second (New) Sanitizer uses the DOM.
• Document.implementation
• Chrome Unicode Bypass
42. Ensure Strict Contextual Escaping (SCE) Is Enabled
• SCE allows for displaying dynamic formatted data, such
as HTML, while preventing XSS attacks by implicitly
passing it through encoding and sanitization methods
• SCE is enabled by default in version 1.2+
• Include the ngSanitize module dependency
• Enable $sce through $sceProvider.enabled(true)
• SCE can be disabled altogether – do not do this!
• $sceProvider.enabled(false)
42
43. Ensure Strict Contextual Escaping (SCE) Is Enabled
• SCE is implemented for HTML content by ngBindHtml
directive
• SCE can be disabled for particular elements with explicit
calls to:
• $sce.trustAs(type, value)
• $sce.trustAsHtml(value)
44. Overriding or Disabling SCE May Lead to XSS
44
Template:
<body ng-app=“myApp">
<div ng-controller=“myCtrl">
<p ng-bind-html=“hello"></p>
</div>
</body>
45. Overriding or Disabling SCE May Lead to XSS
45
angular.module(myApp', ['ngSanitize'])
.controller(‘myCtrl', function ($sce) {
this.hello = $sce.trustAsHtml('<p
style="color:blue">Hey!! Come and ' +
'<em style="color:Red"
onmouseover="this.textContent='Click'">rn' +
'Mouse Hover</em> Over Me</p>');
});
Controller:
48. Incorrect use of $eval
• The $eval function evaluates Angular Expressions
• $scope.$eval(‘a+b’)
• $scope.$eval(‘functionName’)()
• If data is not wrapped within single quotations, this can
cause security issues
• $scope.$eval($scope.a+$scope.b)
• This can lead to XSS
• This can lead to attackers accessing $scope/$rootScope
49. 49
AngularJS Sample Code – Correct use of $eval
<body ng-controller="main">
<p> Current Message
= {{message}}</p>
<input type="text"
placeholder="First Search" ng-
model="scope.a">
<button type="button" ng-
click=“correctEval(scope)">try
to create an XSS</button>
</body>
</html>
angular.module('app',
[]).controller('main',
function($scope,$rootScope) {
$scope.message = "Default
Text";
$scope.correctEval =
function(value) {
$scope.a = value.a;
$scope.message =
$scope.$eval(‘a’);
}
})
HTML template: JavaScript controller:
52. Client Side Routes Authorization
Article “AngularJS Security - Authorization on Angular Routes”
http://www.codeproject.com/Tips/811782/AngularJS-Security-Authorization-
on-Angular-Routes
• Permission model on the client side
• Angular stores the role for the duration of the session
var appModule = angular.module("appModule", ['ngRoute', 'ngResource'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/superUserSpecificRoute', {
templateUrl: '/templates/superUser.html', //view path
caseInsensitiveMatch: true,
controller: 'superUserController', //controller for the route
resolve: { //use the authorizationService to check the role
permission: function(authorizationService, $route) {
return authorizationService.permissionCheck(
[roles.superUser]);
},
}
})
And all of
this is
client-
side!
53. Do Not Rely on AngularJS Security Controls
53
• Client side routing and route authorization functionality
provided by Angular should be considered a user
experience and business logic optimization only.
• Any authentication and authorization controls
implemented on the client can be easily bypassed.
• Any authorization, authentication, or business logic
controls must be enforced on the server.
Never trust the client!
56. Server-side templates Client-side templates
Javascript: Jade, ejs, Pug
AngularJS
ReactJS
Java: JSP
PHP: Smarty
Prevent Cross-Site Scripting via Template Injection
• Mixing server-side & client-side templates can cause XSS
without the need to inject HTML tags
• User input added to a server-side template and then sent to
the client-side template
• The server-side template engine only escapes malicious HTML
characters (e.g <, >, “, ‘)
• An attacker can place AngularJS expression language within {{ }}
• won’t 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
• Avoid using both client-side & server-side templates!
• Keep app logic on the server side & presentation on the client side
57. Template Injection Diagram
57
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
58. Combined Template Injection Code
app.get('/mixed', function(req,res){
//Send the name to the ejs template
res.render('../server/views/index', {name: req.query.name});
});
<body ng-app=“templateSampleApp”>
<div ng-controller=“sampleController”>
<p> Profile name : <%= name %> </p>
</div>
</body>
Server Code:
EJS template:
Valid payload (assuming controller has a logout function):
• http://www.example.com/mixed?name={{logout%28%29}}
Client-side template:
<body ng-app=“templateSampleApp”>
<div ng-controller=“sampleController”>
<p> Profile name : {{ logout() }} </p>
</div>
</body>
61. Where to look
• Verify the Angular Version
• Check third-party libraries
• Check for module dependencies
• Look at what is dependency injected into controllers
• Look at Custom Directives/Services
• Look at what they are storing within localStorage
• You will have to spend some time on the controller and
understand client-side logic
64. Retire.js
• The goal of Retire.js is to help detect the use of JS-
library versions with known vulnerabilities
• Retire.js can be used
• A command line scanner
• A grunt plugin
• A Chrome extension
• A Firefox extension
• Burp and OWASP Zap plugin
• Full list of vulnerabilities - http://retirejs.github.io/retire.js
71. Summarizing…
• Angular is an Interesting MVW
• There are some/were interesting issues within the
framework
• Strict Contextual Escaping (SCE)
• Use $eval wisely
• Never trust the client
• Don’t mix Client/Server Side Templates
