safe - Valor inseguro utilizado en un contexto de URL de recurso con Angular 2

required a safe resourceurl, got a url

Question

Desde la actualización al último candidato de lanzamiento de Angular 2, mis etiquetas img arrojan un error.

La etiqueta img:

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

Genrerate el error del navegador:

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

El valor de la url es:

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

EDITAR:

He intentado la sugerencia hecha en la otra solución de la que se supone que esta pregunta es un duplicado, pero recibo el mismo error.

He agregado el siguiente código al controlador:

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

Todavía recibo el mismo mensaje de error.

EDIT2:

También he cambiado el html a:

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

Sigo teniendo el mismo mensaje de error

Answer 1

Por lo general, agrego safe pipe componente reutilizable de safe pipe separado de la siguiente manera

# 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>

Answer 2

Actualizar:

Ya no sugiero los siguientes métodos. Siempre uso una pipa ahora y hay varios ejemplos en otras respuestas. Una vez que comience a usar una tubería, la usará en todos sus proyectos futuros. Creo una tubería para bypassSecurityTrustResourceUrl y una tubería para bypassSecurityTrustHtml .

Método 1:

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

...

constructor(public sanitizer: DomSanitizer){}

... luego en el HTML:

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

Método 2:

Primero tuve que desinfectar el código porque Vimeo no maximizaría en Edge

Este es solo un ejemplo, el punto es, desinfectar en código primero como quieras

Interfaz de objeto:

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

Servicio (como ejemplo):

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 3

Estoy usando rc.4 y este método funciona para 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);
  }
}

En el HTML:

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

El uso de una función asegurará que el valor no cambie después de desinfectarlo. También tenga en cuenta que la función de desinfección que utiliza depende del contexto.

Para las imágenes, bypassSecurityTrustUrl funcionará, pero para otros usos, debe consultar la documentación :

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

Answer 4

Puede exponer el desinfectante a la vista o exponer un método que reenvía la llamada a bypassSecurityTrustUrl

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

Answer 5

Use Safe Pipe para arreglarlo.

• Crea una tubería segura si no tienes ninguna.

  ng gc pipe safe

• agregue Safe pipe en app.module.ts

  declaraciones: [SafePipe]

• declarar tubería segura en sus ts

Importe Dom Sanitizer y Safe Pipe para acceder a la URL de forma segura

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

- Agregar caja fuerte con url src

<iframe width="900" height="500" [src]="link | safe"/>

Answer 6

La forma más elegante de solucionar esto: usar tubería. Aquí hay un ejemplo (mi blog). Entonces puedes simplemente usar url | safe tubería url | safe para evitar la seguridad.

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

Consulte la documentación en npm para obtener más detalles: https://www.npmjs.com/package/safe-pipe

Answer 7

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.