What are some important practices to secure an Angular application ?

In this article, we will see how we can secure our angular application from common types of vulnerabilities which can exploit the angular application. Also, we will see some best practices to protect such applications.

Angular is a JavaScript development framework, which programmers extensively use to create online apps. However, these apps are susceptible to attacks from various angles, and we must protect our data.  

Now, we will try to understand how these vulnerabilities can affect our angular application:

• Cross-Site -Scripting (XSS): By using this vulnerability attacker injects malicious code into web pages so that he/she can steal the user’s login data, or perform actions that impersonate the user. For example, block XSS bugs affect the Document Object Model (DOM), and they can trick by inserting a <script> tag in the DOM and they can arbitrarily code into the website. 
• Cross-site request forgery: Cross-site request forgery, also known as XSRF or CSRF, occurs when an attacker tricks a user into visiting a different web page that contains malicious code and then secretly requests information from the web server of the application.

Suppose the user is logged into the application, example.com. When a user opens an email and clicks on a link to evil.com, a new tab is opened, and the page immediately sends a malicious request to example- example.com cookies, including the authentication cookies. If the example.com server has an XSRF vulnerability and receives this request, it will not be able to distinguish between a legitimate request from the application and a fake request from evil.com.

• Cross-site script inclusion (XSSI): It is also known as JSON vulnerability. It can enable an attacker’s website to access data from the JSON API, however, this kind of attack is only effective if the JSON that is delivered can be run as JavaScript.

Prevention of Angular application:

• Cross-Site Scripting:
  • Angular’s cross-site scripting security model:/>  Provides a security model that helps prevent XSS attacks by sanitizing untrusted values and making them as safe. Angular uses a security context to enforce this model.
  • Sanitization and security contexts: Use a sanitizer to remove malicious content from untrusted values before they are used uses security contexts to mark values as safe or untrusted, allowing you to enforce security policies. Some security contexts:
    • HTML: It is used when we used to explain a value as HTML, for example, when binding to innerHtml. In the following code, we are binding the htmlSnippet value with the innerHtml.

      <h1> Bound value:</h1>
      <p class="e2e-inner-html-interpolated">{{htmlSnippet}}</p>
      <h2>Result of Binding to innerHTML:</h2>
      <p class="e2e-inner-html-bound" [innerHTML]="htmlSnippet"></p>

    • Style is used when binding CSS into the style property. 

      <h1 [style.color] = "'green'"
      [style.text-align] = "'center'" >
      Binding Style
      </h1>

    • URL: It is used when properties, such as <a href>. For example in JavaScript URLs are dangerous if attackers get control of it. To prevent this we have to mark the URL value as a trusted URL by using the bypassSecurityTrusteUrl call: 

      constructor(private sanitizer: DomSanitizer) {
       this.dangerousUrl = 'javascript:alert("Hi geeksforgeeks")';
       this.trustedUrl = sanitizer.bypassSecurityTrustUrl(this.dangerousUrl);

    • Resource URL: A URL that is loaded and executed as code, for example <iframe src> is a resource URL security context. 

      <h4>Resource URL:</h4>
      <p>Showing: {{dangerousVideoUrl}}</p>
      <p>Trusted:</p>
      <iframe class="e2e-iframe-trusted-src" 
              width="550" height="290" 
              [src]="videoUrl">
      </iframe>
      <p>Untrusted:</p>
      <iframe class="e2e-iframe-untrusted-src" 
              width="550" height="290" 
              [src]="dangerousVideoUrl">
      </iframe>

• Direct use of the DOM APIs and explicit sanitization calls: When working directly with the DOM APIs, we can use explicit sanitization calls to ensure that the values we pass to the DOM are safe.
• Trusting safe values: Angular provides a way to trust values as safe using the “bypassSecurityTrust” method, which allows the passing of untrusted values to the DOM without sanitization.
• Context security policy: A content security policy (CPS) is a security feature that helps prevent XSS attacks by specifying which sources of content are allowed to be loaded into your application.
• Enforcing Trusted types:  Trusted types are a new browser API that provides a way to enforce security policies on untrusted values, helping to prevent XSS attacks. Angular provides support for trusted types through its trustedTypesModule.
• Use the AOT template compiler: The ahead-of-time (AOT) template compiler helps prevent XSS attacks by compiling your templates at build time, which makes it harder for attackers to inject malicious code into your application.
• Server-side XSS protection: Server-side XSS protection can help prevent XSS attacks by sanitizing untrusted data before it is stored or used in your application.

To prevent this, use a templating language that automatically escapes values to prevent this XSS vulnerability on the server, and also don’t create Angular templates on the server side using the templating language because this carries a high risk of introducing template-injection vulnerabilities.

HTTP -level vulnerabilities: Attackers can exploit HTTP-level vulnerabilities, such as cross-site request forgery (CSRF) and cross-site script inclusion(XSSI), to attack your application. You can prevent these attacks by implementing security measures such as CSRF tokens and XSSI protection.

Auditing Angular Applications: Angular applications must follow the same security principles as regular web applications because regular security audits, that can help to identify potential security vulnerabilities, including XSS attacks, and take necessary steps to mitigate such attacks.

Note: these measures are not exhaustive and the best way to prevent XSS attacks is to adopt a holistic approach to web application security that includes a combination of these and other measures.