如何在 Angular 5 中防止 html 注入

Question

我想阻止用户向文本框输入 html 注入。我研究了一些例子，但它们通常是关于允许 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脚本注入，不允许使用旁路或管道...

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

如果它 returns 为空，那么它是 html 的问题，否则它 returns 通过了 html

如何在 Angular 5 中防止 html 注入

How to prevent html injection in Angular 5

html

sanitization

typescript

angular