Angular 2, DomSanitizer, bypassSecurityTrustHtml, SVG答案

【问题标题】：Angular 2, DomSanitizer, bypassSecurityTrustHtml, SVGAngular 2, DomSanitizer, bypassSecurityTrustHtml, SVG
【发布时间】：2017-02-12 22:44:44
【问题描述】：

我一直在使用 DomSanitizer 和 html 字符串中的 SVG。

在当前版本的 Angular 之前，这工作得很好：

this.domSanitizer.bypassSecurityTrustHtml(content);

现在我得到了一个被调用的对象

SafeHtmlImpl {changingThisBreaksApplicationSecurity: "<svg> blah </svg>"}
changingThisBreaksApplicationSecurity

现在有访问 DomSanitizer 输出的新方法吗？我应该以 SafeHTML 类型或其他方式接收它吗？如果它仍然过滤 html，那么使用 bypassSecurityTrustHtml 有什么意义？

明信片上有答案吗？请...

【问题讨论】：

那么问题出在哪里？

标签： angular angular-dom-sanitizer

【解决方案1】：

演示：https://plnkr.co/edit/Qke2jktna55h40ubUl8o?p=preview

import { DomSanitizer } from '@angular/platform-browser'

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    console.log(this.sanitized.bypassSecurityTrustHtml(value))
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div [innerHtml]="html | safeHtml">
    </div>
  `,
})
export class App {
  name:string;
  html: safeHtml;
  constructor() {
    this.name = 'Angular2'
    this.html = "<svg> blah </svg>";
  }
}

【讨论】：

我已将您的 svg 更改为其他 svg 以使其正常工作。
谢谢。关于管道的好主意，我已经像那样设置它并且可以工作。实际上并没有做任何功能上不同的事情，但谁在抱怨？它有效。
谁在抱怨？
这意味着我没有抱怨！感谢您的帮助
由于 SVG 可能构成安全威胁，强烈建议您事先对 SVG 进行清理。例如。使用github.com/cure53/DOMPurify

【解决方案2】：

使用DomSanitizer.bypassSecurityTrustHtml:

constructor(private sanitizer: DomSanitizer) {
}

let html = this.sanitizer.bypassSecurityTrustHtml("<svg> blah </svg>");

【讨论】：

这就是 OP 所说的他在他的问题中使用的内容。
这在我当前的版本中对我有用。我的问题不是 OP 所说的，但我得到了我想要的东西。许多解决方案建议使用@Pipe 并添加 DOMSanitizer safeHTML，但这是我最后想尝试的。使用您的解决方案，我能够在我的组件文件中使用 DomSanitizer。谢谢安德烈。

【解决方案3】：

对于该问题，您可以访问 here

我们可以添加自定义消毒管道并在全球范围内使用。如果您的 HTML 未正确清理，则内部 html 会忽略 svg、第三方 url 等，因此我们可以像下面这样修复它：

hero.component.html：

<div [innerHTML]="htmlString | sanitizedHtml"></div>

hero.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-hero',
    templateUrl: './hero.component.html',
    styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {
    htmlString: any;

    constructor() { }

    ngOnInit(): void {
        this.htmlString = `
        <div class="container">
            <header class="blog-header py-3">
            <div class="row flex-nowrap justify-content-between align-items-center">
                <div class="col-4 pt-1">
                <a class="text-muted" href="#">Subscribe</a>
                </div>
                <div class="col-4 text-center">
                <a class="blog-header-logo text-dark" href="#">Large</a>
                </div>
                <div class="col-4 d-flex justify-content-end align-items-center">
                <a class="text-muted" href="#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
                </a>
                <a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
                </div>
            </div>
            </header>
        </div>`;
    }
}

sanitized-html.pipe.ts

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

@Pipe({
    name: 'sanitizedHtml'
})
export class SanitizedHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {}

    transform(value: any): any {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

输出：

【讨论】：

【解决方案4】：

这也可以通过对象括号表示法来完成：

let safeHtml = this.domSanitizer.bypassSecurityTrustHtml(content);
console.log(safeHtml["changingThisBreaksApplicationSecurity");

必须这样做，因为 safeHtml.changingThisBreaksApplicationSecurity 不适合我。

【讨论】：