解码html特殊字符-角

Question

我在MySql表中有一个带有html数据的字段。我以服务的JSON格式获取数据。没关系。在模板中显示数据时，它是一个简单的文本。

控制器（ts）：

export class CursoComponent implements OnInit {
  cursos: Cursos[];
  constructor(cursosService: CursosService) { 
    cursosService.obtenerDatos(0, '')
    .subscribe(
      (data) => { this.cursos = data; console.log(this.cursos); },
      (error) => { console.log(error); }
    );
  }

  ngOnInit(): void {
  }

}

模板（html）：

<div class="grid-container">
    <h1 class="mat-h1">Cursos</h1>
    <mat-grid-list cols="3" rowHeight="350px">
      <mat-grid-tile *ngFor="let curso of cursos">
        <mat-card class="dashboard-card">
          <mat-card-header>
            <mat-card-title>
              {{curso.title}}
              <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
                <mat-icon>more_vert</mat-icon>
              </button>
              <mat-menu #menu="matMenu" xPosition="before">
                <button mat-menu-item>Expand</button>
                <button mat-menu-item>Remove</button>
              </mat-menu>
            </mat-card-title>
          </mat-card-header>
          <mat-card-content class="dashboard-card-content">
            <div>{{curso.introtext}}</div>
          </mat-card-content>
        </mat-card>
      </mat-grid-tile>
    </mat-grid-list>
  </div>

附加图像：

Answer 1

Angualr安全系统通过清除HTML标记并将其更改为HTML entities来防御XSS攻击。为了绕过此防御，请将您的数据绑定到innerHTML。

而不是：

<div>{{curso.introtext}}</div>

放置

<div [innerHTML]="curso.introtext"></div>

注意，这不适用于要绑定的数据中HTML标记中嵌入的style。

为了也绕过它，您应该使用DomSanitizer。

TypeScript：

import { SafeHtml, DomSanitizer } from '@angular/platform-browser';

constructor() {
   private sanitizer: DomSanitizer,
}

public getIntro(): SafeHtml {
   return this.sanitizer.bypassSecurityTrustHtml(this.curso.introtext);
}

HTML：

<div [innerHTML]="getIntro()"></div>