Angular is a popular framework for app development, but its security standards can be tricky to understand. To ensure your applications are secure, you need to familiarize yourself with the most common security vulnerabilities and the latest security practices.
Angular Ecosystem Security Overview
Whether you are already using Angular or are considering using it, you should be aware of where this framework’s security stands. To start, it’s important to note that Angular falls under Google’s publicly available security guidelines. Any issues found in the framework and reported to are disclosed to the public within 90 days.
You should also understand what measures Angular implements to help you develop and maintain secure applications. The framework includes built-in support for output encoding and data sanitation. It also includes built-in support to prevent cross-site request forgery (CSRF) and cross-site script inclusion (XSSI).
Security Vulnerabilities Found in Angular v1.x
Many of the vulnerabilities that exist in Angular stem from the legacy product, AngularJS. This version is also known as v1.x, with x standing for multiple sub-versions.
Of the subversions released, anything below 1.6 should be avoided as these versions have the greatest number of vulnerabilities. However, if you need to remain on AngularJS and cannot update to Angular 2 or 4, you should consider updating to v1.7.9. As of now, this version has no known vulnerabilities.
In particular, cross-site scripting (XSS) vulnerabilities are the most common. However, a prototype pollution vulnerability in v1.4.0 to v1.7.8 is the most severe vulnerability to account for. Prototype pollution attacks overwrite the prototype of default JavaScript (JS) objects to allow arbitrary code execution or to change the way an application operates.
Vulnerabilities in the Angular Module Ecosystem
When using Angular, module vulnerabilities are generally your biggest concern. These vulnerabilities can appear in official Angular modules, third-party modules, or developer tooling.
When choosing modules to include, you should research any existing vulnerabilities. If vulnerabilities are known, check whether a fix exists. If it doesn’t, you should strongly reconsider including that module.
Some popular modules to be cautious of include the following. These modules do not currently have fixes.
- ngx-bootstrap—vulnerable to XSS attacks
- ng-dialog—vulnerable to denial of service (DoS) attacks
- angular-froala—vulnerable to XSS attacks
5 Best Practices for Angular App Security
When building applications with Angular, it is your responsibility to ensure that security is managed. If you do not take the proper precautions, you put your and your users’ application, systems, and data at risk. For example, your application could become the backdoor gateway used in an advanced persistent threat or a means of distributing malware for attackers.
To prevent your application from becoming a liability, consider implementing the following best practices. These practices can help you ensure that your application and reputation as a developer are secure.
1) Sanitize Your Inputs
Input-based vulnerabilities are some of the most important security threats to manage. If you accept inputs blindly, attackers can easily insert scripts and manipulate your application.
One measure you can use is Angular’s HttpClient API. This API enables you to mitigate XSSI attacks by appending user inputs with a string (“)]}’,\n”). This prevents attackers from executing scripts remotely by making JSON responses non-executable. This ending is automatically stripped by HttpClient, enabling you to easily use valid responses.
Another method you can use is DomSanitizer.sanitize. This method enables you to sanitize inputs based on a defined SecurityContext. If an input passes the context, it is unwrapped and used directly. Otherwise, the input is sanitized to pass your context.
2) Keep Your Components Up to Date
Keeping your components up to date ensures that you are protected from vulnerabilities as soon as patches are made available. When updating, make sure that you are accounting for all dependencies. It doesn’t do much good to keep Angular up to date if you are using unpatched components.
To ensure that you are aware of patches and updates at the time of release you should follow project feeds and make sure to check release documentation for security notifications. You should also watch relevant vulnerability databases that can alert you to vulnerabilities even if a fix isn’t yet available.
Additionally, consider periodically auditing dependencies yourself with code analysis tools or npm audit. While an audit can’t update your dependencies, it can help you determine if you need to implement your own fixes or need to find an alternative library.
3) Avoid Risky API Endpoints
When choosing which API endpoints to include in your application take note of those marked as a security risk in the Angular documentation. These APIs often have safer alternatives or can be used in ways that mitigate risk.
For example, the ElementRef API. This endpoint provides direct access to your DOM and can be leveraged by attackers in XSS attacks. Instead of this API, you can typically use data-binding and templating features built-in to Angular. Or, you can use the Renderer2 API which uses template methods.
4) Don’t Add Customizations
It is generally a bad idea to customize any Angular libraries you are using since doing so locks you into a specific Angular version. Once you customize a library, you often cannot apply patches or upgrade versions without affecting the functionality of your application.
If there is something that you absolutely must customize, you might consider creating a new library from the methods you need in the established version. However, this can take a lot of effort and if you aren’t careful you may incorporate vulnerabilities without knowing it.
A better option is to share your proposed changes with the Angular community. This enables community members to review your customizations and can provide you with feedback about the security of your work. Additionally, if changes are beneficial to others, your work may be included in the next release after which it would be supported by patches.
5) Manage Authenticate With JSON Web Tokens
If your application is account-based, you incorporate a system for authenticating users. One of the best ways to accomplish this is with JSON web tokens (JWTs). You can use these tokens to define and authenticate user sessions without passing credential information. This ensures that your users can securely log-in without risking the interception of secrets.
Using a JWT-based method also enables you to set timeouts for token validity. This means that if a users’ browser or device is compromised, attackers cannot use tokens from previous sessions to gain access to your application.
Conclusion
There is no failsafe way to ensure a vulnerabilities-free application, but there are security best practices that can reduce the attack surface available for exploitation. To secure your Angular apps, you can sanitize your inputs, and always keep your components updated. The latter is crucial, because often patches are released in the form of updates.
Author Bio
Gilad David Maayan is a technology writer who has worked with over 150 technology companies including SAP, Samsung NEXT, NetApp and Imperva, producing technical and thought leadership content that elucidates technical solutions for developers and IT leadership.