4 Tips to Secure Your Angular Application

written by Joel Parks

Secure Your Angular App

The global influx of digital transformation is creating pressure on infrastructure. All the while, threat actors are continually improving their attack techniques. If there is a vulnerability to be found, it will be exploited. This is why many teams are shifting security to the left, even going as far as evolving their dev methodology from DevOps to DevSecOps.

There are still remaining concerns, most of which focus on release time. However, you do not have to compromise fast releases in favor of security. It doesn’t have to be a question of either/or.

In this article, you will learn about four methods you can use to secure your Angular apps. These are simple security practices that should not interrupt your workflow.

Angular Overview

Angular applications are built using NgModules. Modules provide a compilation context for components. An Angular application must have at least one root module, and may have many more feature modules.

The Angular architecture is built around components, views, and services:

  1. Components define views — screen elements that you can choose to display to the user and modify according to application logic.
  2. Components use services — service providers are added to modules using dependency injection, making Angular modules modular and easy to reuse.
  3. Both components and services are classes, with decorators that include metadata, which tells the Angular framework how they should be used.

Angular vs AngularJS: Key Differences

In 2014, Google announced a complete rewrite of AngularJS, shifting it from JavaScript to TypeScript. The advantage of TypeScript was that it offered some static typing features. They named the new version Angular 2.

All Angular versions, from 2 onwards, are known as “Angular” or “Angular 2+.” For a versioning history of Angular, here is a complete Angular roadmap.

Angular 2 was a complete change for Angular users — the programming language, the architecture, and the approach to data all changed. Today Angular 2+ based on TypeScript is at version 9, and AngularJS continues to be used by many developers as a legacy framework.

The newest edition Angular 11, released 11.11.2020.

Security considerations when using AngularJS

  1. AngularJS is less actively maintained than Angular 2+. Older versions of AngularJS (before 1.7) have 29 known software vulnerabilities, as reported by Snyk, including prototype pollution, Distributed Denial of Service (DDoS), cross-site scripting (XSS), and arbitrary command execution.
  2. Review these vulnerabilities, assess the risks to your project and if at all possible, upgrade AngularJS to the latest version.
  3. Note that AngularJS 1.7 will only be maintained until its end of life in June 2021.

The rest of our discussion will focus on the newer Angular 2+ or just “Angular.”

4 Ways to Secure Your Angular App

1. Prevent Cross-Site Scripting (XSS)

  1. HTML (binding inner HTML)
  2. Style (CSS)
  3. Attributes (binding values)
  4. Resources (referring files)

Always convert untrusted values, provided by an external user, into trusted values using DomSanitizer. Bind safeValue to the innerHtml attribute, passing the HTML string to the service method to get a secured value.

import { Component, OnInit } from '@angular/core';  
import { MyService } from './data.service';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component({
selector: 'app-root',
template: `<div [innerHtml] = "safeValue"></div>`,
providers: [MyService]
})
export class MyComponent implements OnInit {
safeValue: SafeHtml;
constructor(private secure: MyService) {
this.safeValue = this.secure.getSafeHtml("<h1>Sanitization Success</h1>");
}
ngOnInit() {
}
}

2. Don’t Customize Angular Files

3. Avoid Risky Angular API Endpoints

Instead of ElementRef, it is recommended that you use the templating or data binding capabilities provided natively in Angular. You can also use the Renderer2 API, which is safer than using ElementRef.

4. HTTP-Level Vulnerabilities

Cross-Site Request Forgery (CSRF):

CSRF is an attack where a user trusted by an application sends unauthorized, malicious commands. A common way to mitigate it is to have the application server send a random authentication token, included in a cookie. The client reads the cookie, and in all subsequent requests, adds a custom request header with the same token. This makes it possible to reject a request made by an attacker, who does not possess the authentication token.

When you use Angular HttpClient, you get built-in support for authentication tokens on the client-side.

Cross-Site Script Inclusion (XSSI):

XSSI is an attack that allows an attacker’s website to read data from your application’s JSON API. It exploits a vulnerability on old browsers that enables overriding native JavaScript object constructors. It can then provide an API URL using a <script> tag.

The server can mitigate this attack by making all JSON responses non-executable. For example, this can be done by prefixing them with the string “)]}’,\n”. Angular’s HttpClient recognizes this convention and automatically strips the string “)]}’,\n” from all JSON responses.

Additional Angular Performance Resources:

Angular Security — Conclusion

Looking for framework-agnostic web components? GrapeCity has a complete set of JavaScript UI components and powerful Excel-like JavaScript spreadsheet components. We have deep support for Angular (as well as React and Vue) and are dedicated to extending our components for use in modern JavaScript frameworks.

Here’s a look at several of our Angular demos.

Joel | Technical Engagement Engineer II

We provide developers with the widest range of Microsoft Visual Studio components, IDE platform development tools, and applications.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store