Security tips for Angular Website and Web App

Security is a hot topic nowadays. Website attacks and cyber attacks are growing in numbers every day and the importance of creating a secure website and web apps, in general, is increasing rapidly. So, being secure in the online world becomes more and more important every day and it is more than important to protect your web and the data it holds now.

One of the most vital aspects during the development of an application is the implementation of security features that prevent its misuse. It also makes up one of the core components of the application around which several other functionalities are built. Thus, security plays a pivotal part in any application and needs its due respect. With Angular, a majority of the security work needs to be implemented on the server.

When it comes to the development of applications using Angular, we can make use of Backend to take care of the security of an application. It also takes care of every aspect, right from the registration of the user to security templates that suit the app.

Angular is a pure client-side framework or technology, so it deals with all clients side components and activities. These client-side activities include scripting across clients, dealing with secure (HTTPS) and non-secure websites, handling cookies etc. So it is quite evident that AngularJS is not going to take care of your network or server security. As a part of Angular app development, we need to understand the component which needs to be secured.

In this post, we are going to effectively discuss the many different ways by which security can be implemented in websites and applications that have been developed with the use of Angular.

So, let's get started -

Check out originated requests

This is related to Cross-site Request Forgery (CSRF or XSRF) attack. This type of attack represents the security vulnerability scenario where a visit to malicious website results in the attacker/hacker hijacking the users’ session (cookie) information and make unprotected APIs invocation or HTTP form submission on behalf of users resulting in the execution of undesired transactions. To prevent this attacks, adopt following approaches such as -

• Make sure your application server code sends a randomly generated authentication token to a cookie, namely, XSRF-TOKEN.

• Enable the client code to read the cookie and add a custom request header, such as X-XSRF-TOKEN, with the token in all subsequent requests.

• Make sure to have your server code compares the received cookie value (with the header such as X-XSRF-TOKEN) to the request header value sent earlier (XSRF-TOKEN). Reject the request if the values are missing or don’t match.

• Angular HttpClient provides built-in support for doing checks on the client side. Read greater details on this page, Angular XSRF Support.

Implement the same origin policy to ensure that only code from the website on which cookies are set can read the cookies from that site and set custom headers on requests to that site.

Verify users’ submitted data

Inspect all the data submitted by users using API or form submission and convert the untrusted data into safe data that can be safely inserted into DOM tree. This is done to avoid Cross-site scripting (XSS) attack.

Angular Store

When a server sends auth token to the client.  The client needs to store it. For this purpose, you need to add Angular Store library.

Update Angular libraries

The angular team is doing releases at regular intervals for feature enhancements, bug fixes and security patches as appropriate. So, it is recommended to update the Angular libraries at regular intervals. Not doing so may allow attackers to attack the app using known security vulnerabilities present within older releases.

Content security policy

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware. To enable CSP, configure your web server to return an appropriate Content-Security-Policy HTTP header. You can find a very detailed manual on how to enable CSP on the MDN website.

Use offline template compiler

Angular templates are the same as executable code: HTML, attributes, and binding expressions (but not the values bound) in templates are trusted to be safe. This means that if an attacker can control a value that is being parsed by the template we have a security leak. Never generate template source code by concatenating user input and templates. To prevent these vulnerabilities, use the offline template compiler, also known as template injection.

Server-side XSS protection

HTML constructed on the server is vulnerable to injection attacks. Injecting template code into an Angular application is the same as injecting executable code into the application: it gives the attacker full control over the application. To prevent this, use a templating language that automatically escapes values to prevent XSS vulnerabilities on the server. Don't generate Angular templates on the server side using a templating language; doing this carries a high risk of introducing template-injection vulnerabilities.

HTTP basic authentication

The simplest of schemes: simply pass a name and password with every request. This requires SSL and is the most RESTful solution. The server requires no knowledge of state whatsoever and authenticates every individual interaction with the user. The problem with this is that you are caching on the client-side a username and password. Even the most basic of XSS vulnerabilities could result in the client beaming his username and password to an evil server.

Separate sensitive data to a secure zone

The larger the application that you’re running, the harder it is to absolutely ensure that they won’t be able to inject some code that changes how you process sensitive data. Some implementers keep ‘sensitive data entry’ on a separate page from the rest of their application, a page that can be tightly controlled and locked down as best as possible, preferably one that is difficult to phish users with.

Avoid direct use of DOM APIs

Inbuilt browser DOM APIs do not automatically protect from security issues. Avoid interacting directly with the DOM and instead, use Angular templates wherever possible.

Must be audited

As the regular web applications are audited, similarly Angular applications must follow the same security principles and must be audited.

 

Securing is very important. With Backend’s two-factor authentication feature for the registration process, you are assured that the users for your website and application shall be genuine and experienced. That could bring better protection for your data. You can further manage permissions easily.

The access control method described above also a great means to ensure the security of your Angular websites and applications. The method allows you to have control over the elements of your code that are visible to users, thus not allowing them to tamper with it. So, what do you think about the website and web app security? Share with us in the comment section. Thank you!