我在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>
答案 0 :(得分:2)
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>
答案 1 :(得分:0)
已解决! 多亏了大卫和罗恩·罗夫!
我实现了这一点: 控制器(ts):
import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
...
export class CursoComponent implements OnInit {
cursos: Cursos[];
constructor(cursosService: CursosService, private sanitizer: DomSanitizer) {
cursosService.obtenerDatos(0, '')
.subscribe(
(data) => { this.cursos = data; console.log(this.cursos); },
(error) => { console.log(error); }
);
}
ngOnInit(): void {
}
public getHtml(texto: string): SafeHtml {
return this.sanitizer.bypassSecurityTrustHtml(texto);
}
}
HTML:
...
<mat-card-content class="dashboard-card-content">
<div [innerHTML]="getHtml(curso.introtext)"></div>
</mat-card-content>
...