A study by Contrast Security found that 90% of applications aren’t tested for vulnerabilities during the development and QA stages. In fact, a bigger percentage of these go unnoticed during production. This highlights the importance of securing application development frameworks. As per a StackOverflow survey, around 31% of software engineers use AngularJS to create user interfaces. So, AngularJS security becomes paramount.
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
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
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.