Comment définir iframe src En Angular 2 sans causer d'exception 'unsafe value'?

Je suis nouveau à Angular 2 sans expérience AngularJS et de travailler sur un tutoriel impliquant la mise en place d'un attribut iframe src: 

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

cela jette une exception: 

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

j'ai déjà essayé d'utiliser des fixations avec [src] sans succès. Je manque probablement quelque chose et j'ai eu du mal à trouver une solution.

107
demandé sur Curtis Malette 2016-06-26 13:54:09

6 réponses

mise à Jour

pour RC.6^ version utilisation DomSanitizer

Plunker

et une bonne option est d'utiliser un tuyau pur pour cela: 

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

n'oubliez pas d'ajouter votre nouveau SafePipe au tableau declarations de L'AppModule. ( comme on le voit sur documentation ) 

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

html 

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

"Plunker

si vous utilisez l'étiquette embed cela pourrait être intéressant pour vous:

ancienne version RC.5

Vous pouvez tirer parti de la DomSanitizationService comme ceci: 

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

et ensuite liez à url dans votre modèle: 

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

N'oubliez pas d'ajouter les importations suivantes: 

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

échantillon plongeur

222
répondu yurzui 2017-05-23 11:33:26

celui-ci travaille pour moi. 

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);      
    }
}
18
répondu vikvincer 2017-03-16 05:46:35

cela me fait à L'angle 5.2.0

sarasa.Composant.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.Composant.html 

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

c'est tout!!!

5
répondu Lrodriguez84 2018-06-14 18:04:39 
constructor(
 public sanitizer: DomSanitizer, ) {

 }

j'avais lutté pendant 4 heures. le problème était dans la balise img. Quand vous utilisez les crochets pour ' src ' ex: [src]. tu ne peux pas utiliser cette expression angulaire. vous donnez juste directement à partir d'un exemple d'objet ci-dessous. si vous donnez une expression angulaire. vous obtiendrez l'erreur d'interpolation.

  1. j'ai d'abord utilisé ngFor pour itérer les pays 

    *ngFor="let country of countries"

  2. second-vous mettre cela dans la balise img. ce qu'il est. 

    <img [src]="sanitizer.bypassSecurityTrustResourceUrl(country.flag)"
height="20" width="20" alt=""/>
5
répondu Kumaresan Perumal 2018-06-20 14:38:02

j'ajoute habituellement le composant réutilisable de la conduite de sécurité séparée comme suit: 

# 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>
-1
répondu Janki 2018-09-28 15:47:08

félicitations ! ^^ J'ai une solution simple et efficace pour vous, oui! 

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

[attr.src] au lieu de src "vidéo.url" et non {{vidéo.url}

grand ;)

-6
répondu Smaillns 2017-07-12 15:58:40