Valeur non sécurisée utilisée dans un contexte d'URL de ressource avec Angular 2

Question

Depuis la mise à niveau vers la dernière Angulaire 2 release candidate mes balises img jeter une erreur.

La balise img:

<img class='photo-img' [hidden]="!showPhoto1" src='{{theMediaItem.photoURL1}}'>

Genrerate le message d'erreur du navigateur:

ORIGINAL EXCEPTION: Error: unsafe value used in a resource URL context

La valeur de l'url est:

http://veeu-images.s3.amazonaws.com/media/userphotos/116_1464645173408_cdv_photo_007.jpg

EDIT:

J'ai essayé la suggestion faite dans l'autre solution que cette question est censé être un doublon, mais j'obtiens la même erreur.

J'ai ajouté le code suivant pour le contrôleur:

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

@Component({
  templateUrl: 'build/pages/veeu/veeu.html'
})
export class VeeUPage {
  static get parameters() {
    return [[NavController], [App], [MenuController], [DomSanitizationService]];
  }

  constructor(nav, app, menu, sanitizer) {

    this.app = app;
    this.nav = nav;
    this.menu = menu;
    this.sanitizer = sanitizer;

    this.theMediaItem.photoURL1 = this.sanitizer.bypassSecurityTrustUrl(this.mediaItems[1].url);
  }

Je reçois toujours le même message d'erreur.

EDIT2:

J'ai aussi changé le code html:

<img class='photo-img' [hidden]="!showPhoto1" [src]='theMediaItem.photoURL1'>

Je reçois toujours le même message d'erreur

Answer 1

Méthode 1:

 import { DomSanitizer } from '@angular/platform-browser';
 

...

 constructor(public sanitizer: DomSanitizer){}
 

... puis dans le HTML:

     <iframe [src]='sanitizer.bypassSecurityTrustResourceUrl(myurl)' width="640" height="360" frameborder="0"
        webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>
 

Méthode 2:

Je devais commencer par désinfecter le code, car Vimeo ne maximiserait pas Edge.

Ceci est juste un exemple, le point est, désinfectez d'abord dans le code comme vous le souhaitez

Interface d'objet:

 import { SafeUrl } from '@angular/platform-browser';
export class Book {
   constructor(public title: string, public videoURL?: SafeUrl) {}
}
 

Service (à titre d'exemple):

 import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { Book } from '../features/models/book';
import { DomSanitizer } from '@angular/platform-browser';

@Injectable()

export class BookService {
    constructor(
        private sanitizer: DomSanitizer
    ) {}
    getBooks (): Observable<Book[]> {    
        return new Observable( observer => {
            observer.next(
                    new Book(
                        'Some Book Title', 
                        this.sanitizer.bypassSecurityTrustResourceUrl(
                           'https://player.vimeo.com/video/12345678'
                        )
                    ),
                    new Book(
                        'Second BookTitle',
                        this.sanitizer.bypassSecurityTrustResourceUrl(
                            'https://player.vimeo.com/video/91011121'
                        )
                    )
                )
            });

    }
}
 

Answer 2

Je suis aide rc.4 et cette méthode fonctionne pour ES2015(ES6):

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

@Component({
  templateUrl: 'build/pages/veeu/veeu.html'
})
export class VeeUPage {
  static get parameters() {
    return [NavController, App, MenuController, DomSanitizationService];
  }

  constructor(nav, app, menu, sanitizer) {

    this.app = app;
    this.nav = nav;
    this.menu = menu;
    this.sanitizer = sanitizer;    
  }

  photoURL() {
    return this.sanitizer.bypassSecurityTrustUrl(this.mediaItems[1].url);
  }
}

Dans le code HTML:

<iframe [src]='photoURL()' width="640" height="360" frameborder="0"
    webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>

À l'aide d'une fonction de s'assurer que la valeur ne change pas après vous de désinfecter. Sachez également que la fonction de nettoyage que vous utilisez dépend du contexte.

Pour les images, bypassSecurityTrustUrl va fonctionner, mais pour d'autres utilisations, vous devez vous référer à la documentation:

https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html

Answer 3

Le moyen le plus élégant de résoudre ce problème: utilisez un tuyau. Voici l'exemple (mon blog). Vous pouvez alors simplement utiliser url | safe pipe pour contourner la sécurité.

 <iframe [src]="url | safe"></iframe>
 

Answer 4

Vous pouvez exposer le désinfectant à la vue ou exposer une méthode qui transfère l'appel à bypassSecurityTrustUrl.

 <img class='photo-img' [hidden]="!showPhoto1" 
    [src]='sanitizer.bypassSecurityTrustUrl(theMediaItem.photoURL1)'>
 

Answer 5

import {DomSanitizationService} from '@angular/platform-browser';
@Component({
 templateUrl: 'build/pages/veeu/veeu.html'
 })
  export class VeeUPage {
     trustedURL:any;
      static get parameters() {
               return [NavController, App, MenuController, 
              DomSanitizationService];
        }
      constructor(nav, app, menu, sanitizer) {
        this.app = app;
        this.nav = nav;
        this.menu = menu;
        this.sanitizer = sanitizer;  
        this.trustedURL  = sanitizer.bypassSecurityTrustUrl(this.mediaItems[1].url);
        } 
 }



 <iframe [src]='trustedURL' width="640" height="360" frameborder="0"
   webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>


User property binding instead of function.