html - 如何在 Angular 5 中防止 html 注入(inject)

Question

我想阻止用户在文本框中输入 html 注入(inject)。我研究了一些例子，但它们通常是关于允许 html 标签通过管道并说 Angular 自动清理 html 标签。但在我的示例中，当我输入 <script>alert('blabla')</script> 时到文本框，它被接受并注册到数据库，如下所示..

如何预防？

我的模板代码是:

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

我的 ts 文件是:

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

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

  product: Product = <Product>{};

  constructor(some services etc.) {

  }

  ngOnInit() {

   //some code
  }

再次注意:我想阻止进入html脚本注入(inject)，不允许使用旁路或管道...

Answer 1

您可以使用 DomSanitizer 来实现此目的

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

如果返回null，那么就是html的问题，否则返回传递的html