Come impostare <iframe src = “…”> senza causare un'eccezione `valore non sicuro`?

Sto lavorando a un tutorial che coinvolge l'impostazione di un iframe srcattributo:

<iframe width="100%" height="300" src="{{video.url}}"></iframe>

Questo genera un'eccezione:

Error: unsafe value used in a resource URL context
at DomSanitizationServiceImpl.sanitize...

Ho già provato a utilizzare le associazioni [src]senza successo.

Aggiorna v8

Le risposte di seguito funzionano ma espongono la tua applicazione ai rischi per la sicurezza XSS! . Invece di utilizzare this.sanitizer.bypassSecurityTrustResourceUrl(url), si consiglia di utilizzarethis.sanitizer.sanitize(SecurityContext.URL, url)

Aggiornare

Per la versione RC.6 ^ utilizzare DomSanitizer

Plunker

E una buona opzione è usare la pipa pura per questo:

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

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
} 

ricordarsi di aggiungere il nuovo SafePipealla declarationsserie del AppModule. ( come visto sulla documentazione )

@NgModule({
   declarations : [
     ...
     SafePipe
   ],
})

html

<iframe width="100%" height="300" [src]="url | safe"></iframe>

Plunker

Se usi il embedtag questo potrebbe essere interessante per te:

• come con angular2 rc.6 disabilitare sanitize sul tag html embed che visualizza pdf

Vecchia versione RC.5

Puoi sfruttare in DomSanitizationServicequesto modo:

export class YourComponent {
  url: SafeResourceUrl;
  constructor(sanitizer: DomSanitizationService) {
    this.url = sanitizer.bypassSecurityTrustResourceUrl('your url');
  }
}

E quindi associare a urlnel modello:

<iframe width="100%" height="300" [src]="url"></iframe>

Non dimenticare di aggiungere le seguenti importazioni:

import { SafeResourceUrl, DomSanitizationService } from '@angular/platform-browser';

Campione di Plunker

Questo funziona per me.

import { Component,Input,OnInit} from '@angular/core';
import {DomSanitizer,SafeResourceUrl,} from '@angular/platform-browser';

@Component({
    moduleId: module.id,
    selector: 'player',
    templateUrl: './player.component.html',
    styleUrls:['./player.component.scss'],
    
})
export class PlayerComponent implements OnInit{
    @Input()
    id:string; 
    url: SafeResourceUrl;
    constructor (public sanitizer:DomSanitizer) {
    }
    ngOnInit() {
        this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.id);      
    }
}

Questo mi funziona con Angular 5.2.0

sarasa.Component.ts

import { Component, OnInit, Input } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-sarasa',
  templateUrl: './sarasa.component.html',
  styleUrls: ['./sarasa.component.scss']
})

export class Sarasa implements OnInit {
  @Input()
  url: string = "https://www.mmlpqtpkasjdashdjahd.com";
  urlSafe: SafeResourceUrl;

  constructor(public sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
  }

}

sarasa.Component.html

<iframe width="100%" height="100%" frameBorder="0" [src]="urlSafe"></iframe>

è tutto gente!!!

constructor(
 public sanitizer: DomSanitizer, ) {

 }

Ho lottato per 4 ore. il problema era nel tag img. Quando usi la parentesi quadra per 'src' ex: [src]. non puoi usare questa espressione angolare {{}}. hai appena dato direttamente da un oggetto esempio di seguito. se dai un'espressione angolare {{}}. si otterrà un errore di interpolazione.

1. prima ho usato ngFor per iterare i paesi

   *ngFor="let country of countries"
   

2. secondo lo metti nel tag img. questo è.

   <img [src]="sanitizer.bypassSecurityTrustResourceUrl(country.flag)"
   height="20" width="20" alt=""/>
   

Ho riscontrato anche questo problema, ma per utilizzare una pipe sicura nel mio modulo angolare, ho installato il pacchetto npm Safe-pipe, che puoi trovare qui . Cordiali saluti, questo ha funzionato in Angular 9.1.3, non l'ho provato in nessuna altra versione di Angular. Ecco come aggiungerlo passo dopo passo:

1. Installare il pacchetto tramite npm, installare tubo di sicurezza o filo aggiungere tubo di sicurezza. Questo memorizzerà un riferimento ad esso nelle tue dipendenze nel file package.json, che dovresti già avere dall'inizio di un nuovo progetto angolare.

2. Aggiungi il modulo SafePipeModule a NgModule.imports nel tuo file del modulo angolare in questo modo:

   import { SafePipeModule } from 'safe-pipe';
   
   @NgModule({
       imports: [ SafePipeModule ]
   })
   export class AppModule { }
   
   

3. Aggiungi la pipe sicura a un elemento nel modello per il componente Angolare che stai importando nel tuo NgModule in questo modo:

<element [property]="value | safe: sanitizationType"></element>

4. Ecco alcuni esempi specifici di safePipe in un elemento html:

<div [style.background-image]="'url(' + pictureUrl + ')' | safe: 'style'" class="pic bg-pic"></div>
<img [src]="pictureUrl | safe: 'url'" class="pic" alt="Logo">
<iframe [src]="catVideoEmbed | safe: 'resourceUrl'" width="640" height="390"></iframe>
<pre [innerHTML]="htmlContent | safe: 'html'"></pre>

Di solito aggiungo componenti riutilizzabili per tubi sicuri separati come segue

# Add Safe Pipe

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

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

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

# then create shared pipe module as following 

import { NgModule } from '@angular/core'; 
import { SafePipe } from './safe.pipe';
@NgModule({
    declarations: [
        SafePipe
    ],
    exports: [
        SafePipe
    ]
})
export class SharedPipesModule {
}

# import shared pipe module in your native module

@NgModule({
    declarations: [],
    imports: [
        SharedPipesModule,
    ],
})
export class SupportModule {
}

<!-------------------
call your url (`trustedUrl` for me) and add `mySafe` as defined in Safe Pipe
---------------->
<div class="container-fluid" *ngIf="trustedUrl">
    <iframe [src]="trustedUrl | mySafe" align="middle" width="100%" height="800" frameborder="0"></iframe>
</div>

Congratulazioni! ¨ ^^ Ho una soluzione semplice ed efficiente per te, sì!

<iframe width="100%" height="300" [attr.src]="video.url"></iframe

[attr.src] invece di src "video.url" e non {{video.url}}

Grande ;)