AngularJs 正在清理和显示 html

Question

我正在尝试在 div 中动态显示 html。但是 div ng-bind-html 根本不显示（在 firefox、chrome 和 safari 上）。

查看本网站的其他帖子，我发现我必须包含 ngSanitize。

我在这里找到了这段代码 https://www.npmjs.com/package/angular-sanitize :

angular.module('myApp', ['ngSanitize']);

但是我不知道我应该在哪里写这段代码...你知道我该怎么做吗？

非常感谢！

这是我的代码：

component.ts 中的代码：

import { Component, OnInit, SecurityContext } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-player-filter',
  templateUrl: './player-filter.component.html',
  styleUrls: ['./player-filter.component.css']
})
export class PlayerFilterComponent implements OnInit {

  text = '<h1>Test</h1><script></script>';
  text_sanitized: SafeHtml;
  constructor(private _sanitizer: DomSanitizer) { }

  ngOnInit() {
      this.text_sanitized = this.htmlProperty;
  }

  public get htmlProperty(): SafeHtml {
      return this._sanitizer.sanitize(SecurityContext.HTML, this.text);
  }

}

component.html 中的代码：

<div ng-bind-html="text_sanitized"></div>
Normal: {{text}} Sanitized: {{text_sanitized}}

Firefox 上的输出：

Normal: <h1>Test</h1><script></script> Sanitized: <h1>Test</h1>

输出控制台：

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

控制台输出显示清理操作已发生（由已清理脚本的输出确认）。奇怪的是，控制台中没有显示不安全 html 显示的错误...

Answer 1

'ng-bind-html' 属于 angularJS（angular 2+ 之前的旧版本）所以它不应该使用 Angular 6.

使用 [innerHTML] 代替 Agular Documentation 中提到的：

<div [innerHTML]="text_sanitized"></div>

AngularJs 正在清理和显示 html

AngularJs sanitizing and displaying html

html

javascript

angularjs

ngsanitize