Skip to main content

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");
  }
}



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