web-dev-qa-db-fra.com

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

Depuis la mise à niveau vers la dernière version candidate angulaire 2, mes balises img génèrent une erreur.

Le tag img:

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

Générer l'erreur de 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

MODIFIER:

J'ai essayé la suggestion faite dans l'autre solution que cette question est supposée être un doublon mais je reçois la même erreur.

J'ai ajouté le code suivant au 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 HTML pour:

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

J'ai toujours le même message d'erreur

angulartypescript
68
Bill Noble

J'utilise 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 HTML:

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

L'utilisation d'une fonction garantit que la valeur ne change pas après sa désinfection. Sachez également que la fonction de désinfection que vous utilisez dépend du contexte.

Pour les images, bypassSecurityTrustUrl fonctionnera, mais pour d'autres utilisations, vous devez vous reporter à la documentation: 

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

66
elkelk

Méthode 1:

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

...

constructor(public sanitizer: DomSanitizer){}

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

    }
}
109
Helzgate

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

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

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)'>
13
Nguyễn Việt Trung

Utilisez Safe Pipe pour y remédier. 

  • Créer un tuyau sûr si vous n'en avez pas.

    ng g c pipe safe 

  • ajouter un tuyau sécurisé dans app.module.ts

    déclarations: [ SafePipe ]

  • déclarer un tuyau sûr dans vos ts 

Importez le désinfectant Dom et le Safe Pipe pour accéder à l'URL en toute sécurité

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

- Ajouter un coffre-fort avec l'URL src 

<iframe width="900" height="500" [src]="link | safe"/>
4
sjsj15
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.
0
ani

J'ajoute généralement le composant réutilisable safe pipe séparé 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>
0
Janki