javascript - Hur man kringgår SecurityTrustResourceUrl för varje element i en array?

Jag har en array med Google Map Embed API-URL:er. Men när jag itererar över varje objekt och binder dem till källan för en iFrame.

Jag skulle kunna använda följande.

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');
}

Men jag skulle behöva göra detta för varje objekt och jag kan inte göra det eftersom jag får arrayen från en extern källa som uppdateras.

Hur skulle jag kunna kringgå säkerheten för varje av mina URL:er?

Här är 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)

Svar #1

Du kan använda PIPE med DomSanitizationService som visas nedan;

//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"}];
}