angular - Angular 2，DomSanitizer，bypassSecurityTrustHtml，SVG

Question

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

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

this.domSanitizer.bypassSecurityTrustHtml(content);

现在我得到一个名为

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

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

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

Answer 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>";
  }
}

Answer 2

使用DomSanitizer.bypassSecurityTrustHtml：

constructor(private sanitizer: DomSanitizer) {
}

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

更多信息：https ://angular.io/docs/ts/latest/guide/security.html#bypass-security-apis

Answer 3

对于该问题，您可以访问此处

我们可以添加自定义消毒管道并在全球范围内使用。如果您的 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);
    }
}

输出：

Answer 4

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

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

不得不这样做，因为safeHtml.changingThisBreaksApplicationSecurity对我不起作用。