Angular自动转义HTML
在Angular中，默认情况下，插值表达式({{ }})和属性绑定([ ])会自动转义HTML标记和实体，以避免XSS攻击。在某些情况下，有时需要在视图中显示未经过转义的HTML，这时可以使用Angular的内置DomSanitizer服务和管道。
代码示例：
- 使用管道将HTML标记转义：
// 定义SafeHtml管道 import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Pipe({ name: 'safeHtml' }) export class SafeHtmlPipe implements PipeTransform { constructor(private sanitizer: DomSanitizer) {}
transform(html: string): SafeHtml { return this.sanitizer.bypassSecurityTrustHtml(html); } }
- 使用DomSanitizer服务手动转义HTML：
// 在组件中导入DomSanitizer并注入 import { Component } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-root',
template:
})
export class AppComponent {
html: any;
constructor(private sanitizer: DomSanitizer) { this.html = this.sanitizer.bypassSecurityTrustHtml('
Hello World!
'); } }注意：手动转义HTML时，应该确保数据是可靠的和安全的，并使用合适的转义方法。