如何绕过数组中每个元素的SecurityTrustResourceUrl？

Question

我有一组 Google Map Embed API URL。但是，当迭代每个项目并将它们绑定到 iFrame 的源时。

我可以使用以下内容。

constructor(private sanitizer: DomSanitizationService) {
    this.url = sanitizer.bypassSecurityTrustResourceUrl('https://www.google.com/maps/embed/v1/place?key=KEY&q=365 Badger Ave, Newark, New Jersey 07112');
}

但是，我必须对每个项目都这样做，但我不能这样做，因为我从外部源接收到更新的数组。

如何绕过每个 URL 的安全性？

这里是 app.component.ts

import { Component, Pipe } from '@angular/core';
import { DomSanitizationService } from '@angular/platform-browser';
@Pipe({name: 'secureUrl'})
export class Url {

  constructor(private sanitizer:DomSanitizationService){
    this.sanitizer = sanitizer;
  }

  transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url).changingThisBreaksApplicationSecurity;            
  }
}
@Component({
  selector: 'my-app',
  pipes: [Url],
  template: `
    <div class="container">
      <div style="padding-top: 20px">
        <div class="row" *ngFor="let row of rows">
            <div *ngFor="let event of row">
                <div class="col s12 m6 l4">
                    <div class="card hoverable">
                      <div class="card-image waves-effect waves-block waves-light">
                        <img height="300" class="activator" [src]="event.thumbnail">
                      </div>
                      <div class="card-content">
                        <span class="card-title activator grey-text text-darken-4">{{event.title}}</span>
                        <p><a class="activator">Hosted by {{event.host.data.first_name}} {{event.host.data.last_name}}</a></p>
                      </div>
                      <div class="card-action grey lighten-2">
                        <a class="blue-grey-text lighten-3">Details</a>
                        <a class="blue-grey-text lighten-3">Join</a>
                    </div>
                    <div class="card-reveal" style="font-size: 15px">
                      <span class="card-title grey-text text-darken-4"><center>{{event.title}}</center><i class="material-icons right">close</i></span>
                      <hr>
                      <center>
                        <p class="truncate">{{event.description}}</p>
                        <hr>
                        <p>Starts {{event.start}}</p>
                        <iframe width="210" height="190" frameborder="0" style="border:0" src="{{event.address|secureUrl}}" allowfullscreen></iframe>
                      </center>
                    </div>
                  </div>
                </div>
            </div>
        </div>
      </div>
    </div>
`
})
export class AppComponent {
    public rows = GROUPS;
}
var EVENTS = [
  {
    id: 95,
    title: "Event Name",
    description: "The awesome event description",
    thumbnail: "https://ucarecdn.com/58955d6b-bd4c-41f3-8a7b-4ce2bf013b13/IMG_4229.JPG",
    access: "public",
    code: null,
    start: "1 week ago",
    end: "6 days ago",
    address: "https://www.google.com/maps/embed/v1/place?key=KEY",
    host: {
      data: {
        id: 23,
        avatar: "http://www.gravatar.com/avatar/9e557072ab393aa2fca6701eb7b23853?s=45&d=mm"
      }
    },
    category: {
      data: {
        id: 1,
        title: "Wedding",
        description: "A marriage ceremony."
      }
    }
  }
];

var chunk_size = 3;
const GROUPS = EVENTS.map(function(e,i){
    return i%chunk_size===0 ? EVENTS.slice(i,i+chunk_size) : null;
})
.filter(x=>!!x)

Answer 1

您可以将PIPE 与DomSanitizationService 一起使用，如下所示；

//our root app component
import {Component, Pipe} from '@angular/core'
import {DomSanitizationService} from '@angular/platform-browser';

@Pipe({name: 'secureUrl'})
export class Url {

  constructor(private sanitizer:DomSanitizationService){
    this.sanitizer = sanitizer;
  }

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


@Component({
  selector: 'my-app',
  pipes: [Url],
  template: `
    <div *ngFor="let item of myUrls; let i = index">
         {{item.url|secureUrl}}
    </div>
  `,
})
export class AppComponent {
  myUrls=[{url:"google.com"},{url:"google1.com"},{url:"google2.com"}];
}