How To Sanitize a Value Manually in Angular?

As per our project requirement, we are sanitizes a value manually using the below sanitize methods-

1.     SecurityContext.HTML

2.     SecurityContext.SCRIPT

3.     SecurityContext.STYLE

4.     SecurityContext.NONE

5.     SecurityContext.RESOURCE_URL

6.     SecurityContext.URL

Example 1 –

import {Component, SecurityContext} from '@angular/core'

export class App {

  constructor(private sanitizer: DomSanitizer) {

    this.html = sanitizer.sanitize(SecurityContext.HTML, "<h2>DOM Sanitize</h2><script>alert("XSS")</script>");

  }

}

Example 2 –

import {Component, SecurityContext} from '@angular/core'

export class App {

  constructor(private sanitizer: DomSanitizer) {

    this.script = sanitizer.sanitize(SecurityContext.SCRIPT, "<h2>DOM Sanitize</h2><script>alert("XSS")</script>");

  }

}

Example 3 –

import {Component, SecurityContext} from '@angular/core'

export class App {

  constructor(private sanitizer: DomSanitizer) {

    this.url = sanitizer.sanitize(SecurityContext.URL, "<h2>DOM Sanitize</h2><script> Your code also");

  }

}

How To Preventing Cross Site Scripting (XSS) in Angular? 

How Angular Protects Us From XSS Attacks?

I hope you are enjoying with this post! Please share with you friends. Thank you so much!