Angular JS Security Fundamentals

Latest posts by Aniket (see all)

AngularJS Vulnerability Assessment on Web

⦁ Introduction:
In this era of digitization, technology has been changing at a rapid pace and businesses are always looking for adopting new and disruptive technologies. Most of these technologies are easy to use, expressive and more convenient for the clients. No doubt that these technologies are powerful but at the same times their security considerations are getting compromised.

⦁ What is AngularJS?
AngularJS is a java script framework that is structural and can be used for designing dynamic web apps. It is an open source front end web application framework maintained by Google and a community of individuals. This platform helps to extend the HTML vocabulary for your application and used in Single Page Application (SPA) projects . It follows a Model-View-Controller (MVC) architecture .

⦁ How to identify AngularJS page?
⦁ Manual way: In order to identify whether a given page is developed in AngularJS or not, we can check for the directive named ‘ng-app’ in the HTML page in view source of the page. This means templates are used in the application and will be rendered by AngularJS.

Credit Source :

⦁ By using plug-ins : We can also identify an angular page by using chrome plug-ins such as ng-inspector, ng-inspect, AngularJS inspector. The AngularJS inspector gives even the angular version used and dependencies injected in the application which can be viewed under the AngularJS tab in inspect element as follows:

Credit Source :

⦁ How to check for vulnerabilities on an Angular page?
AngularJS comes with its own expression language. So any java script written within scope of the page in curly braces, it can be successfully executed. This is where the known security issues seem to occur. If an attacker has access to control AngularJS templates or expressions, the attacker can execute any java script code.

⦁ Step 1 : We first find any input field on the web page that is associated with the GET method.
⦁ Step 2 : If you find any such input field try assessing it by passing expressions and check whether it gets evaluated or not as follows :

Credit Source :

In this case, binding occurs in the code and {{this}} gets associated to $SCOPE parameter which indicates that anything in an expression can get evaluated. Similarly we can try passing following expressions :

Credit Source :

Credit Source :

What are the different vulnerabilities found and their types?

⦁ XSS: In order to carry out cross site scripting, client side template injection needs to be done with a bypass payload to execute the $scope bound functions. Here, the attacker needs to escape the sandbox by using a payload which overrides a particular AngularJS object and helps to execute a malicious code. Usage of objects such as toString(), Constructor(), Prototype(), CharAt() can be overridden or manipulated to call a malicious code in the case of XSS.

Credit source :

The payload used here was {{x = {‘y’:”.constructor.prototype}; x[‘y’].charAt=[].join;$eval(‘x=alert(1)’);}}

⦁ Remote Code Execution (RCE) : Here, if the GET method/parameter is assigned to any input field, it can be exploited using server side template injection or metasploit framework. A recent example of remote code execution on can be found out on the following link This weakness exists because of developers bad practice of mixing client side and server side templates.

⦁ Broken authentication and session management : This is one of the OWASP Top 10 vulnerabilities i.e. In this case, $scope exposes the session objects that could be exploited. This can be checked in the dev console by searching for angular.element(‘html’).scope() which returns the scope object for that particular element.

Credit source :

So we can see loads of data and functionality available within this scope. If proper session management is not
implemented, we can fetch some critical data out from the session object. If you further see session.activeBuffer.content
contained in the HTML, it can be further exploited by sending a GET request user’s session id as a parameter.

⦁ What are the coding practices that make AngularJS apps vulnerable?
Some of above vulnerabilities are caused because of the AngularJS framework issues and some because of the bad practices followed by developers while designing the web pages. Some of them are as follows:

⦁ Assigning ‘ng-app’ directive to whole HTML page : The ng-app directive is the starting point of AngularJS application and it tells AngularJS that this is the root element of the application. Placing it in the or tag gives control to the entire DOM hierarchy and this makes it vulnerable to attacks than it would be otherwise.

⦁ Mixing server side and client side templates: Mixing client side and server side templates is not a good idea because it can include XSS vulnerabilities. It is because server side template is a dynamic template and its content will be based on some stored data. If any JS is passed in that stored data and its not escaped in the template then it can be used as an XSS attack. This is where data gets evaluated as a code and attacks can be made. It is a typical injection scenario.

⦁ Developers are not aware of the latest bypasses and upcoming security patches : If developers do not keep a track of the latest security exploits or bypasses then this can make their application vulnerable to attacks. Also, if any latest patch is not applied to the application, it gives an entry for the attackers to exploit.

⦁ Usage of ng-csp : CSP is content security policy that is used to change security policy for any angular application as it does not allow running any eval functions and injecting any inline styles. But recently attempts have been made to bypass the ng-csp module by attackers and they were quite successful. By using ng-csp, inline java scripts are enabled which can be bypassed by using different payloads. This happens because “$event” exposes “window” by event binding mechanism through “view”.

⦁ Usage of objects such as toString(), Constructor(), Prototype(), CharAt() : These functions can be overridden/manipulated and a call to malicious code can be made by attackers. It is usually used by attackers to escape the sandbox by making AngularJS execute traditional java script (e.g., pop up an alert() function or execute an AJAX call to a third-party domain to send data from the AngularJS application). Below is how overriding functions can be helped to bypass a sandbox and execute malicious code using payloads.

Credit source :

Dynamic generation of templates or expressions from user provided content : If user provided content is passed through the functions such as $eval, $watch, $apply then the web application is at the risk of XSS attacks.

Related Post