AngulaR语言 innerHTML，转义小于/大于字符，但保留 <br /> 不变

Question

所以我有一个 Angular 8 应用程序，其中包含一个显示解析的 XML 内容的表格，但在某些情况下，字符串可能包含需要解析为 HTML 的
标签，但也包含以小于/大于符号支撑的其他内容，例如。我正在使用 [innerHTML] 将其注入到标签中，但这些支撑字符串被剪掉了。我试过像这样使用DomSanitizer：

public sanitizeDsxText(text: any): any {
return this.sanitizer.bypassSecurityTrustHtml(text);
}

但不幸的是，这也不起作用。有没有人遇到过类似的问题，可以提供一个简单的解决方案？我将非常感激:)，

编辑： 根据要求，更准确地说。 我有一个这样的：

<td class="dsx-table__cell" [innerHTML]="item.target?.txt">
</td>

"item.target？"中的文本。txt"看起来像这样："Cześć wam, tu bliźniaki dwa <br/> Paprika – siostra, brat <FAR/OFF>" *

• 标记，因为 StackOverflow 也在削减它们。

并且<bt/>像它应该的那样被解析为正常的<br>标签，但<FAR/OFF>被剪掉 - 我需要找到一种方法来只解析<br>，而将其他字符串留在括号中不解析。

Answer 1

我来晚了。我创建了一个 Angular 管道，它允许您有选择地允许标签，也可以选择将它们转换为 HTML 实体。

代码如下：

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import DOMPurify from "dompurify";
@Pipe({
name: "safeHtml",
})
export class SafeHtmlPipe implements PipeTransform {
constructor(private domSanitizer: DomSanitizer) {
// How to securely allow target attribute
// https://github.com/cure53/DOMPurify/issues/317
DOMPurify.addHook("afterSanitizeAttributes", function (node: Element) {
// set all elements owning target to target=_blank
if ("target" in node) {
(node as Element).setAttribute("target", "_blank");
(node as Element).setAttribute("rel", "noopener");
}
});
}
transform(html: string, convertToEntity: boolean, additionalTags?: string[]): string {
if (html.length > 0) {
// we don't want tags such as `<input>` or any form elements
// from being displayed, and at the same time allows certain
// tags element for styling
const sanitizeOptions = {
FORBID_TAGS: ["script", "form", "input", "select", "textarea"],
ADD_TAGS: ["b", "i", "em", "span"],
ALLOW_UNKNOWN_PROTOCOLS: true,
// NOTE: we enable this one if in case the addHook method has unexpected behavior
// ADD_ATTR: ["target"],
};
if (additionalTags && additionalTags.length) {
sanitizeOptions.ADD_TAGS.push(...additionalTags);
}
let sanitizedContent = html;
if (convertToEntity) {
sanitizedContent = this.escapeHtml(html);
} else {
sanitizedContent = DOMPurify.sanitize(html, sanitizeOptions);
}
return this.domSanitizer.bypassSecurityTrustHtml(sanitizedContent) as string;
}
return html;
}
private escapeHtml(str: string): string {
// DOMSanitizer or DOMPurify doesn't have options to convert special characters
// to html entities
return str
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
}

用法：

• 允许img和a标记

<div class="modal-body" [innerHTML]="message | safeHtml: false:['img', 'a']"></div>

• 通过将特殊字符转换为其等效的 HTML 实体来转义字符串。可用于将代码显示为字符串，而无需担心 XSS

<p [innerHTML]="content | safeHtml: true"></p>

Answer 2

事实证明，使用 DomSanitizer 要么太复杂，要么不可能做到，所以我们选择的解决方案是在后端以不同的方式解析它 -
标签通常在 JSON 响应中返回，但用"<>"支撑的所有其他字符串都已替换为 HTML 实体，并且它正常工作。