使用bypassSecurityTrustHtml时HTMLEntity <为何被移除？

当使用Angular的innerHTML展示用户提供的字符串（如'a<b'）时，即便通过bypassSecurityTrustHtml管道绕过安全清理，仍只会显示a；但给内容添加空格（如'a < b'）后就能正常显示，且无法限制用户输入格式。

问题原因 #

Angular的HTML解析器会把<b识别为不完整的标签尝试解析，直接截断了后续内容，导致只显示a。

解决方案 #

方案1：通过临时DOM元素解码HTML实体

修改管道逻辑，先将转义字符还原为实体，再进行安全信任：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
    name: 'displayAll'
})
export class DisplayAllPipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) { }

    transform(str: string): any {
        // 创建临时元素解码HTML实体
        const tempElement = document.createElement('div');
        tempElement.innerHTML = str;
        const decodedStr = tempElement.textContent || tempElement.innerText || '';
        // 对解码后的字符串做安全信任处理
        return this.sanitizer.bypassSecurityTrustHtml(decodedStr);
    }
}

方案2：直接替换转义序列

若不想依赖DOM元素，可直接对字符串中的转义字符做替换：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
    name: 'displayAll'
})
export class DisplayAllPipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) { }

    transform(str: string): any {
        // 替换转义的小于号和大于号
        const decodedStr = str.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
        return this.sanitizer.bypassSecurityTrustHtml(decodedStr);
    }
}

注意事项 #

因为内容来自可信用户，上述两种方式都不会引入XSS风险；若用户来源不可信，需额外做安全校验。

内容的提问来源于stack exchange，提问作者Tzvi Frenkel