AngularJS Security

AngularJS is an open-source front-end JavaScript framework. It provides convenient data binding options on the client side and lets developers decouple HTML templates, leading to smoother development. Though it has certain security features like automatic output encoding, supports strict contextual escaping and has an in-built content security policy (CSP), it does have its own issues which need to be taken care of.

Since the security of AngularJS acts as a bedrock for the overall security of applications, it makes sense to prioritise and work on AngularJS security practices. Surprisingly, in an independent survey, only 43% developers as compared to 55% managers said that they follow secure coding practices. 79% also agreed on the growing importance of ‘secure code’. That does leave a lot of room for understanding and implementing best practices in application security and more so from an AngularJS perspective.

AngularJS specifically uses inline styles which can be easily bypassed by attackers through custom injected content. Some common areas which are especially vulnerable are: Cross site scripting (XSS), prototype pollution, Denial of Service (DoS), Clickjacking, arbitrary code execution, arbitrary command execution, unsafe object deserialization, protection bypass and arbitrary script injection.

Templates can be controlled by attackers by:

Generating templates on the server side containing user-provided content.
Passing an expression generated from user-provided content in calls to specific methods or in calls to services that parse expressions or as a predicate to orderBy pipe

Sandbox, an isolated virtual machine for execution of potentially unsafe software code without any impact on local applications, doesn’t really help here. The sandbox does restrict an AngularJS expression from evaluating unsafe expressions, thereby limiting access to Function constructor, window object, DOM element, global variables, or the Object constructor. An attacker can then only run an already executed function, execute a mathematical function or display / modify data from a scope variable. This definitely limits the impact of an attack. But this alone is not sufficient since an attacker can break out of the sandbox and execute malicious JavaScript within the HTML page. So, a sandbox alone isn’t sufficient from an AngularJS Security perspective.

Tips to Ensure Secure AngularJS Applications

Developers are suggested to follow some best practices like the following in order to move to a higher AngularJS Security posture:

Get the basics right

Design the applications in a way that doesn’t let attackers change client-side templates. Not mixing client and server templates to avoid XSS vulnerabilities, not using user input for dynamic template generation and using a tightly-integrated CSP are some good practices.

Use the latest versions and avoid customizations

Using the updated versions and library releases of AngularJS is a good start to get all the latest security-centric features. Make sure to check the Angular Change log for security-related updates and patches. Also, customizing the libraries to fit specific needs is best avoided as it provides two challenges: 1. Issues in upgrading to later versions of AngularJS, 2. Missing out on important security patches

Leverage default AngularJS security features

Automatic output encoding and context-aware input sanitization provided by AngularJS by default are good options too. They are helpful in mitigating XSS vulnerabilities whereby all unsafe symbols and HTML control characters are encoded. It is used with ng-bind.

Limit the use of DOM APIs

Avoid Angular DOM-related input injection or the direct use of DOM APIs and instead, use Angular templates and data binding when interacting with the DOM. Unless enforcing ‘Trusted Types’, using third-party APIs or libraries can introduce unsafe methods. Ensure to sanitize untrusted values with DomSanitizer.sanitize. Quite a few Angular APIs pose security risks (most notably ElementRef which grants direct access to DOM). Other native options like templating or data binding capabilities could be used instead.

Leverage Template Injection and stick to internal templates

Use Template Injection which is an offline template compiler to get better performance and a whole set of security features. Remember to use it in production deployments. Another recommendation is to use Angular’s Ahead of Time compiler which can help compile templates offline. Developers, understandably so, have a habit of loading templates from multiple sources. However, untrusted domains could open the road to further vulnerabilities. If third party open-source packages are being used, make it a point to have regular scans and fixes for them too

Avoid specific unsafe patterns and treat templates within one application context

Patterns such as window.location.href = $location.hash could be a direct invitation to hackers. Avoid open redirects and JavaScript code injection and use dictionary maps for page references and navigation. Mitigate server-side code injection by treating templates within only one application context of either client or server. Also, avoid using Angular’s angular.element() jQuery-compatible API for DOM manipulation which can create HTML elements directly on DOM, further leading to more XSS vulnerabilities

Use security linters

Developers can leverage security linters to perform basic static code analysis and provide red flags for errors, bugs or security vulnerabilities. In AngularJS’ case, we are talking about ‘eslint-plugin-scanjs-rules’ and ‘eslint-plugin-angular’ which help with general coding conventions, rules and guidelines around security

Look at inbuilt security features

Use AngularJS’ inbuilt cross-site request forgery (CSRF) token and cross-site script inclusion (XSSI) feature to mitigate HTTP-level vulnerabilities. CSRF involves attackers redirecting users to a different page and sending malicious requests to the servers.Developers can use auto-generated authentication tokens, check the origin header sent by the user’s browser and make authentication tokens visible only to their own application(s). In case of CSRF, token values from both client and server sides are compared to see if there is a match post which the request goes ahead. But the developers have to implement this functionality at the server side on their own.

Make the right use of DomSantizer

XSS attacks are the most common data stealing attacks where hackers insert scripts into a DOM element on specific packages. The next horrors could be data stealing and malware attacks. So sanitisation (which encompasses inspecting untrusted values and turning them into safe values) of untrusted inputs across HTML, CSS, Resource URL, style, URL, attributes and referring files is advised. DomSanitizer is a good option. 3 important functions here are:

sanitizeHTML function – Checks HTML values by first parsing them and then validating their tokens
sanitizeStlye function – Leverages regular expressions to sanitize untrusted styles and URL values
sanitizeURL function – Uses regular expressions to fix untrusted URL values

Future of AngularJS Security

With so many applications being developed at breakneck speeds, having human interventions to check for incoming traffic is definitely not a long-term solution. Here is where Runtime Application Self-Protection (RASP) comes in. Unlike general purpose firewalls or Web Application Firewalls which simply block all suspect traffic and look at just the perimeter, RASP proactively intercepts incoming calls to an application to check for malwares and threats. Since it integrates with the application, it not only neutralizes known vulnerabilities but also protects the application against unknown attacks.

It works in real time, requires zero human intervention and provides contextualized service by taking necessary information from the codebase, APIs, system configuration etc. Since it resides within the application, it limits false positives and monitors the application very closely to track untoward behaviour.

It protects both web and non-web applications and can secure a system even after an attacker has penetrated perimeter defences. The insights from application logic, configuration and data event flows ensure higher accuracies of threat detection and prevention.

AppSealing for Enhanced AngularJS Security

In the same survey spoken about earlier, though 97% believed they were trained sufficiently, a whopping 91% still admitted they faced greater difficulty when it came to actually implementing secure coding practices. 88% also found coding securely a big challenge. Application security definitely is the need of the hour but the road is not very straightforward. But we, at AppSealing, are here to help.

This is where AppSealing’s rich experience and expertise of protecting and securing applications without writing a single line of code comes into play. AppSealing’s robust security framework and dynamic pay-as-you-go pricing with a strong support for Android and IoS will ensure complete, holistic security of your applications.

Govindraj Basatwar, Global Business Head

A Techo-Commerical evangelist who create, develop, and execute a clear vision for teams. Successfully created a SaaS business model with multi Million Dollar revenues globally. Proven leadership track record of establishing foreign companies in India with market entering strategy, business plan, sales, and business development activities.