Wie umgehen Sie SecurityTrustResourceUrl für jedes Element in einem Array?

Question

Ich habe eine Reihe von Google Map Embed API URLs. Wenn Sie jedoch über jedes Element iterieren und diese an die Quelle eines iFrame binden.

Ich könnte Folgendes verwenden.

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

Aber, ich würde das für jedes Element zu tun hat, und ich kann nicht so tun, da ich das Array von einer externen Quelle, des Updates zu erhalten.

Wie kann ich die Sicherheit für jede meiner URLs umgehen?

Hier 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

Sie PIPE mit DomSanitizationService können wie unten dargestellt;