Angular 5 - 管道过滤对 HTML 进行净化

Question

当我收到如下警告时：

"WARNING: sanitizing HTML stripped some content"

我进行了一些调查，发现人们使用以下管道或类似以下管道：

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"> \n< h3>名称专家< /h3>\n< p>随机文本< /p>< /div>\n< /div>"

package.fields.remarks示例：

"安排：包括3晚住宿和2次每人的早餐和果岭费，可选择北方和南方< br>\n- 免费每日进入spa（1小时 Hamman，桑拿，游泳池，水疗）"

package.fields.name示例：

"短假期3晚< br>2人/高级双人房/LO，包括高尔夫球"

在Firefox和Chrome中收到警告

- Djkobus

---

package.fields.remarks 的值是多少？你能在这个问题中分享一下吗？ - Chandru

增值示例 - Djkobus

我已经更新了我的回答，你能确认一下吗？问题出在带空格的开放HTML标签上，所以我只是使用管道符号去掉了空格，这样对我来说就可行了。 - Chandru

仍然遗憾地收到警告。 - Djkobus

这里有一个要点 https://gist.github.com/MurhafSousli/3d2ddb777c8ce88e2400bd93f694cd3b - Murhaf Sousli

Answer 1

以下示例，如果您在HTML中尝试打印{}，Angular会将其视为表达式并导致错误，因此您可以选择以下选项之一： 我们有两种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 | sanitizeHtml }}来使用它。

2. 使用组件作为属性绑定，如下所示，在 .ts 文件中声明 HTML：

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

然后在模板中使用它，如下：

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

- Pravin P Patil

Answer 2

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

pipe.ts

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

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

- Chandru

Answer 3

• 一切都很好，但你的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清理导入设置过程，请参见此帖子

- KK Nebula