Angular / AngularJS

Angular is a development platform, built on TypeScript. Components are the building blocks that compose an application. A component includes a TypeScript class with a @Component() decorator, an HTML template, and styles.

AngularJS is a popular JavaScript library, which scans the contents of HTML nodes containing the ng-app attribute (also known as an AngularJS directive). When a directive is added to the HTML code, you can execute JavaScript expressions within double curly braces.

See Cross Site Scripting (XSS).

Detection

Search for ng-app attributes in Burp Suite responses.

ng-app in the body tag means it is a template

<body ng-app>

Sandbox

The AngularJS sandbox is a mechanism that prevents access to potentially dangerous objects, such as window or document, in AngularJS template expressions. It also prevents access to potentially dangerous properties, such as __proto__. Despite not being considered a security boundary by the AngularJS team, the wider developer community generally thinks otherwise. Although bypassing the sandbox was initially challenging, security researchers have discovered numerous ways of doing so. As a result, it was eventually removed from AngularJS in version 1.6. However, many legacy applications still use older versions of AngularJS and may be vulnerable as a result.

https://portswigger.net/web-security/cross-site-scripting/contexts/client-side-template-injection

Vulnerabilities

Client-Side Template Injection

Payloads

AngularJS is an MVC client side framework written by Google. With Angular, the HTML pages you see via view-source or Burp containing ‘ng-app’ are actually templates, and will be rendered by Angular. This means that if user input is directly embedded into a page, the application may be vulnerable to client-side template injection. This is true even if the user input is HTML-encoded and inside an attribute.

https://portswigger.net/research/xss-without-html-client-side-template-injection-with-angularjs

To exploit, you need to have “ng-app” above the expression in the DOM tree (e.g. “<html ng-app>”).

Examples

Example 1

<!doctype html>
<html ng-app>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    </head>
    <body>
        <div>
          <label>Name:</label>
          <input type="text" ng-model="yourName" placeholder="Enter a name here">
          <hr>
          <h1>Hello {{yourName}}!</h1>
        </div>
    </body>
</html>

Example 2 – Execute expressions (JavaScript-like code snippets inside double curly braces)

Test online with jsfiddle. The text input {{1+1}} is evaluated by Angular, which then displays the output: 2. This means anyone able to inject double curly braces can execute Angular expressions.

<html>
<head> 
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
</head>
<body>
<div ng-app>{{1+2}}</div>
</body>
</html>