How To Secure Angular Apps?

We all know that, AngularJS is an open-source front-end javascript framework and it provides convenient data binding options on client-side and. It allows developers to decouple HTML templates, leading to smoother development. AngularJS has some security features such as automatic output encoding, supports strict contextual escaping and has in-built content security policy but still it has its own issues that should be taken care of. Generally angularjs uses inline styles that can be easily bypassed by hackers through custom injected content. If you’re going to use AngularJS for your next project, then you must know how to secure angular apps. Here we’ll discuss about 10 best practices to secure angularjs app. Let’s see each one in detail.

10 Tips To Secure AngularJS App-

1. Prevent Apps From Cross-site scripting(XSS)-

XSS allows hackers to add client-side script or malicious code into web pages that can be viewed by users. Mostly such attacks happened through query string, input field, request headers. To prevent XSS attack, we must present a user to enter malicious code from DOM. For instance, attacker can enter some script tag to input field and that might render as read-only text. When values are inserted into DOM through attribute, interpolation, properties etc. by default, Angular considers all values as untrusted. It escapes and sanitizes values before render. XSS related security in Angular defined in “BrowserModule”. DomSanitizer helps to clean untrusted parts of value. DomSanitizer class looks like-

export declare abstract class DomSanitizer implements Sanitizer {
 abstract sanitize(context: SecurityContext, value: SafeValue | string | null): string | null;
 abstract bypassSecurityTrustHtml(value: string): SafeHtml;
 abstract bypassSecurityTrustStyle(value: string): SafeStyle;
 abstract bypassSecurityTrustScript(value: string): SafeScript;
 abstract bypassSecurityTrustUrl(value: string): SafeUrl;
 abstract bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl;
}

There are two types of method patterns: sanitize and bypassSecurityTrustX (bypassSecurityTrustHtml, bypassSecurityTrustStyle, etc.). Sanitize method gets untrusted value from context and returns trusted value.

The bypassSecurityTrustX methods gets untrusted values from context and as per the value usage it returns a trusted value. In a particular condition, you may need to disable sanitization. After setting any one bypassSecurityTrustX methods, you can bypass security and binding the value.

Example

import {BrowserModule, DomSanitizer} from '@angular/platform-browser'

@Component({
 selector: test-Component',
 template: `
 <div [innerHtml]="myHtml"></div>
 `,
})
export class App {
public myHtml: string;
 constructor(private sanitizer: DomSanitizer) {
 this. myHtml = sanitizer.bypassSecurityTrustHtml('<h1>Example: Dom Sanitizer: Trusted HTML </h1>') ;
 }
}

Always be careful whenever you trun-off or bypass any security setting that might malicious code and we might inject a security vulnerability to the app. Sanitization inspect untrusted values and convert it to a value which is safe to insert into DOM tree. It doesn’t change value at all time and angular allows untrusted values for HTML, Styles and URLs. Here are some of the security contexts defined by Angular-

• It makes use of HTML context when interrupting value as HTML
• Uses Style context when any CSS bind into a style property
• When bind URL, it uses URL context

Also know- Top 10 Concepts To Know For Angular Developer

2. Use Security Blinters-

Programmers can take an advantage of security linters to perform basic static code analysis and provide red flags for errors, bugs or security vulnerabilities. In AngularJS, we are talking about ‘eslint-plugin-scanjs-rules’a nd ‘eslint-plugin-angular’ that helps in general coding conventions, rules and guidelines about security.

<meta http-equiv="Content-Security-Policy" content="default-src https://myexample.com; child-src 'none'; object-src 'none'">

Or

Content-Security-Policy: script-src 'self' https://myexample.com

5. Prevent CSRF-

It is also called as Session riding. Hacker copies forge as a trusted source and execute actions on user behalf. Such attack can harm business and client relation also. Most common mechanism used by HttpClient to support CSRF attack protection. When application made any http request, interceptor reads token data and set HTTP header. Interceptor sends app cookies on all request like POST etc. to relative URL, but it does not send cookies with HEAD/GET request and request with absolute URL. Hence, server need to set a token in Javascript readable session cookie on first GET request request or page load.

Through subsequent requests, server verifies this token with request header cookies. Such a way, server can ensure that code running on same domain. This token must be unique for every user and verified by server. CSRF protection should apply to server also. In angular app, you can use different names for XSRF token cookie or header. You can override the defaults value by using HttpClientXsrfModule.withOptions method.

Read more