resource - load angular component in iframe

¿Cómo configurar iframe src en Angular 2 sin causar una excepción de ''valor inseguro''?

Question

Soy nuevo en Angular 2 sin experiencia en AngularJS y estoy trabajando en un tutorial que involucra la configuración de un atributo iframe src:

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

Esto arroja una excepción:

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

Ya he intentado usar enlaces con [src] sin éxito. Probablemente me estoy perdiendo algo y he tenido dificultades para encontrar una solución a esto.

Answer 1

Por lo general, agrego un componente reutilizable de tubería segura 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

Enhorabuena! ¨ ^^ Tengo una solución fácil y eficiente para ti, ¡sí!

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

[attr.src] en lugar de src "video.url" y no {{video.url}}

Excelente ;)

Answer 3

Esta funciona para mí.

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

Answer 4

Esto me funciona a 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>

¡¡¡eso es todo amigos!!!

Answer 5

Actualización v8

¡Las respuestas a continuación funcionan pero exponen su aplicación a riesgos de seguridad XSS! . En lugar de usar this.sanitizer.bypassSecurityTrustResourceUrl(url) , se recomienda usar this.sanitizer.sanitize(SecurityContext.URL, url)

Actualizar

Para la versión RC.6 ^ use DomSanitizer

Plunker

Y una buena opción es usar tubería pura para eso:

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

recuerde agregar su nuevo SafePipe a la matriz de declarations del AppModule. ( como se ve en la documentación )

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

html

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

Plunker

Si usa la etiqueta de embed esto podría ser interesante para usted:

• cómo con angular2 rc.6 deshabilitar desinfección en la etiqueta html incrustada que muestra pdf

Versión anterior RC.5

Puede aprovechar DomSanitizationService esta manera:

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

Y luego enlaza a url en tu plantilla:

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

No olvide agregar las siguientes importaciones:

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

Muestra de saqueador

Answer 6

constructor(
public sanitizer: DomSanitizer, ) {
}

Había estado luchando por 4 horas. El problema estaba en la etiqueta img. Cuando usa corchetes para ''src'', por ejemplo: [src]. no puede usar esta expresión angular {{}}. solo da directamente de un ejemplo de objeto a continuación. si le das una expresión angular {{}}. Obtendrá un error de interpolación.

1. primero usé ngFor para iterar los países

   *ngFor="let country of countries"

2. segundo pones esto en la etiqueta img. eso es todo.

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