web-dev-qa-db-fra.com

Comment définir iframe src dans Angular 2 sans provoquer d'exception `unsafe value`?

Je suis nouveau dans Angular 2 sans expérience de AngularJS et je travaille sur un tutoriel impliquant la définition 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 liaisons avec [src] sans succès. Il me manque probablement quelque chose et j'ai eu du mal à trouver une solution à ce problème.

angulariframe
138
TJ.

Mise à jour v8

Les réponses ci-dessous fonctionnent mais expose votre application aux risques de sécurité XSS! . Au lieu d'utiliser this.sanitizer.bypassSecurityTrustResourceUrl(url), il est recommandé d'utiliser this.sanitizer.sanitize(SecurityContext.URL, url)

Mettre à jour

Pour RC.6 la version ^ utilise DomSanitizer

Plunker

Et une bonne option consiste à utiliser du 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 nouvelle SafePipe au tableau declarations de l'AppModule. ( comme on le voit sur la documentation )

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

html

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

Plunker

Si vous utilisez la balise embed, cela pourrait vous intéresser:

Ancienne version RC.5

Vous pouvez utiliser DomSanitizationService comme ceci:

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

Et ensuite, liez-vous à 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';

exemple de Plunker

288
yurzui

Celui-ci fonctionne 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);      
    }
}
23
vikvincer

Cela me permet de 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>

c'est tout les gens !!!

11
Lrodriguez84
constructor(
 public sanitizer: DomSanitizer, ) {

 }

Je me débattais depuis 4 heures. le problème était dans img tag. Lorsque vous utilisez un crochet pour 'src' ex: [src]. vous ne pouvez pas utiliser cette angular expression {{}}. vous venez de donner directement à partir d'un exemple d'objet ci-dessous. si vous donnez angular expression {{}}. vous obtiendrez une erreur d'interpolation.

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

    *ngFor="let country of countries"

  2. en second lieu vous mettez ceci dans la balise img. Ça y est.

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