How to prevent html injection in Angular 5

Question

I want to prevent users to enter html injection to textbox. I have researched some example but they are generally about allowing html tags through pipes and saying angular automatically sanitizes html tags. But in my example when I enter <script>alert('blabla')</script> to text box, it is accepted and registered to db like this..

How can I prevent it ?

My template code is:

<div fxLayout="row">
          <mat-form-field fxFlex="20">
            <input matInput name="label" [(ngModel)]="product.label" placeholder="Label"
                   required>
          </mat-form-field>
        </div>

and my ts file is:

import { Product } from '../../../';

@Component({
  selector: '....',
  templateUrl: '....',
  styleUrls: ['....']
})
export class ProductEditComponent implements OnInit {

  product: Product = <Product>{};

  constructor(some services etc.) {

  }

  ngOnInit() {

   //some code
  }

Note again: I want to prevent entering html script injection, not allowing it with bypass or pipe...

I have deleted wrong part

Chris Garsonn
– Chris Garsonn

2019-04-25 11:24:44 +00:00
Commented Apr 25, 2019 at 11:24 — Chris Garsonn
– Chris Garsonn, Commented Apr 25, 2019 at 11:24

onik · Accepted Answer · 2019-04-25 11:34:52Z

4

you could use DomSanitizer for that

import { DomSanitizer } from "@angular/platform-browser"
import { SecurityContext } from "@angular/core";

constructor(private sanit:DomSanitizer){
  var dom = this.sanitizer.sanitize(SecurityContext.HTML, "<script> alert('HELLO'); </script>");
  console.log(dom);
}

if it returns null, then it was an issue with html,else it returns passed html

answered Apr 25, 2019 at 11:34

onik

1,7411 gold badge13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Garsonn Over a year ago

where is my ngModel product.label etc. its like hello is hardcoded. ? And there is syntax error in there about saint:Domsanitizer is not used

Chris Garsonn Over a year ago

and I want to prevent html script entering not allowing html.

Collectives™ on Stack Overflow

How to prevent html injection in Angular 5

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related