使用Angular的内置SafeHtml管道可以安全地将HTML字符串绑定到innerHTML属性。下面是一个示例代码:
在组件中:
import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component({
selector: 'app-example',
template: `
`,
})
export class ExampleComponent {
safeHtml: SafeHtml;
constructor(private sanitizer: DomSanitizer) {
const jsonText = JSON.stringify({ name: 'John', age: 25 });
const htmlString = `${jsonText}`;
this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(htmlString);
}
}
在上面的示例中,我们使用DomSanitizer
服务将HTML字符串转换为安全的HTML,并将其绑定到[innerHTML]
属性上。这样可以确保HTML字符串正常显示,而不会被视为潜在的安全风险。
请注意,在使用DomSanitizer
时要小心,确保只信任可靠的HTML字符串,以防止XSS攻击。