时间戳

首页 > 解决方案 > Angular - innerHTML，比字符少/多转义，但
保持不变

javascript - Angular - innerHTML，比字符少/多转义，但
保持不变

问题描述

因此，我有一个 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>" *

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

标签： javascripthtmlangulartypescript

解决方案

我参加晚会迟到了。我创建了一个 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>

推荐阅读