Angular 5 - 使用管道清理 HTML

Question

当我收到警告时：

“警告：清理 HTML 会删除一些内容”

我做了一些研究，看到人们使用下面的管道或类似于下面的管道

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

@Pipe({ name: 'sanitizeHtml' })
export class SanitizeHtmlPipe implements PipeTransform {

    constructor(private _sanitizer: DomSanitizer) { }

    transform(v: string): SafeHtml {
        return this._sanitizer.bypassSecurityTrustHtml(v);
    }
}

不幸的是，即使我像这样实现管道，我仍然遇到相同的错误：

<span [innerHTML]="specialist.blocks[0].paragraph.html | sanitizeHtml"></span>
<p [innerHTML]="package.fields.remarks | sanitizeHtml"></p>
<li [innerHTML]="package.fields.name | sanitizeHtml"></li>

所以我想知道我是否错误地实现了管道，或者还有其他原因导致它不起作用？

编辑：

specialist.blocks[0].paragraph.html

的示例：

”< div id="test" class="test"> < h3>指定专家< /h3> < p>随机文本< /p>< /div> < /div>”

package.fields.remarks

的示例：

“安排：3 nachten incl. ontbijt en 2 greenfees p.p. met keuze 南北< br> - 免费 dagelijkse toegang tot de spa（1 uur 哈曼、桑拿、zwembad、水力按摩）”

package.fields.name

的示例：

“Shortbreak 3 nachten< br>2 人/高级双人间/LO，包括高尔夫”

在 Firefox 和 Chrome 中获取警告

Answer 1

如下例所示，如果您尝试在 html Angular 中打印

{}

，则会将其视为表达式并会给出错误，因此您可以得到以下选项， 我们有 2 个 HTML 清理选项，

1. 使用管道

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

@Pipe({ name: 'sanitizeHtml' })
export class SanitizeHtmlPipe implements PipeTransform {

  constructor(private _sanitizer: DomSanitizer) { }

  transform(value: string): SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(value);
  }

}

在组件中您可以将其用作

{{variable | santizeHtml }}

2. 使用组件， 作为如下的属性绑定， 在.ts文件中声明html

const allowedChars = '@ # $ % ^ & * ( ) _ - ., ? < > { } [ ] ! +';

并在模板中使用它，

<span [innerHTML]="allowedChars"></span>

Answer 2

演示：https://stackblitz.com/edit/angular-vjt27k?file=app%2Fsanitize-html.pipe.ts

管道.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'sanitizeHtml'})
export class sanitizeHtmlPipe implements PipeTransform  {
    transform(value) {
        return value.split('< ').join('<');
    }
}

Answer 3

正确的解决方案应该遵循Angular安全指南：

[..] 避免直接与 DOM 交互，而是尽可能使用 Angular 模板。

对于不可避免的情况，请使用内置的 Angular 清理函数。使用 DomSanitizer.sanitize 方法和适当的 SecurityContext 清理不受信任的值。该函数还接受使用bypassSecurityTrust …函数标记为可信的值，并且不会对它们进行清理，如下所述。

所以

DomSanitizer

明确有一个

sanitize

方法 用于此目的，所以你应该 - 如有疑问 - 只需使用这个。

例如在这样的管道中：

  @Pipe({ name: 'sanitizeHtml' })
    export class SanitizeHtmlPipe implements PipeTransform {
    
        constructor(private _sanitizer: DomSanitizer) { }
    
        transform(untrustedHtml: string): SafeValue {
            return this._sanitizer.sanitize(SecurityContext.HTML, untrustedHtml);
        }
    }

当然，请记住，这里的示例仅适用于 且仅适用于 HTML 。对于 CSS 清理等，您需要一个不同的管道（即只需更改

SecurityContext

）。

Answer 4

• 一切都很好，但您的 HTML 并不完美。所以你需要从 html 标签中删除空格。
• 你的 JSON 应该是这样的

JSON：

      specialist: any = {
        "blocks": [
          {
            "paragraph": {
              "html": '<div id="test" class="test">\n<h3>NAME SPECIALIST</h3>\n<p>random text</p> <div>\n</div>'
            }
          }
        ]
      }
      package: any = {
        "fields": {
          "remarks": 'Arrangement: 3 nachten incl. ontbijt en 2 greenfees p.p. met keuze uit North en South<br>\n- gratis dagelijkse toegang tot de spa (1 uur Hamman, sauna, zwembad, hydromassage)',
          "name": 'Shortbreak 3 nachten<br>2 pers./Superior Double/LO, incl. golf'
        }
      }

HTML：

    <span [innerHTML]="specialist.blocks[0].paragraph.html | sanitizeHtml"></span>
    <p [innerHTML]="package.fields.remarks | sanitizeHtml"></p>
    <li [innerHTML]="package.fields.name | sanitizeHtml"></li>

消毒管道 TS：

    import { Pipe, PipeTransform } from '@angular/core';
    import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
    
    @Pipe({ name: 'sanitizeHtml' })
    export class SanitizeHtmlPipe implements PipeTransform {
    
        constructor(private _sanitizer: DomSanitizer) { }
    
        transform(v: any): any {
            return this._sanitizer.bypassSecurityTrustHtml(v);
        }
    }

输出：

有关完整的 HTML 清理导入设置过程，请参阅 这篇文章