Question

我从REST API获得了几个帖子并用以下内容解析它们：

<div class="row" *ngFor="let Post of Posts">
  Some output
</div>

他们中的一些人正在使用youtube_url但其中大多数并非如此我使用以下代码段为youtube_url添加了youtube iframe。

<div class="embed-responsive embed-responsive-16by9" *ngIf="Post.youtube_url" style="margin-bottom: 5px;">
  <iframe class="embed-responsive-item" [src]=Post.youtube_url allowfullscreen></iframe>
</div>

我现在的问题是我收到以下错误：

ERROR Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)
at DomSanitizerImpl.sanitize (platform-browser.js:4506)
at setElementProperty (core.js:10753)
at checkAndUpdateElementValue (core.js:10673)
at checkAndUpdateElementInline (core.js:10607)
at checkAndUpdateNodeInline (core.js:13889)
at checkAndUpdateNode (core.js:13836)
at debugCheckAndUpdateNode (core.js:14729)
at debugCheckRenderNodeFn (core.js:14708)
at Object.eval [as updateRenderer] (HomeComponent.html:17)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:14693)

我发现了关于这个问题的多个问题，但没有一个问题符合我的上述条件。

那么，我该怎么做呢？

Answer 1

你需要告诉你的dom网址是安全的。您可以通过在应用中实现此管道来实现此目的：

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

@Pipe({ name: 'safeUrl' })
export class SafeUrlPipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) { }

    transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

...然后在你的模板中使用它：

<div class="embed-responsive embed-responsive-16by9" *ngIf="Post.youtube_url" style="margin-bottom: 5px;">
      <iframe class="embed-responsive-item" [src]="Post.youtube_url | safeUrl" allowfullscreen></iframe>
</div>

* ngFor =“let ..”中的Angular 2“资源URL上下文中使用的不安全值”

1 个答案: