es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • La sanitización de una imagen base64 implica realizar modificaciones Esto rompe la seguridad de la aplicación.

La sanitización de una imagen base64 implica realizar modificaciones Esto rompe la seguridad de la aplicación.

26 Jul, 2023 Programación

Estoy tratando de renderizar una imagen que he convertido a base64.

data:image/vnd.microsoft.icon;base64,AAABAAIAICAAA.....

Ahora, sin importar lo que haga, siempre obtengo:

{
     changingThisBreaksApplicationSecurity: 'data:image/vnd.micr.....
}

DEMO

Entonces, en mi búsqueda, algunas personas sugieren usar bypassSecurityTrustUrl o bypassSecurityTrustResourceUrl, pero ambos producen el mismo resultado. También he visto a personas sugiriendo:

<img src="{{base64}}">

Pero esto no es diferente a <img [src]="....">, produce:

<img src="unsafe:data:image/vnd.microsoft.icon;base64,AAABA....">

(Nota el unsafe al principio)

Y he visto sugerencias de usar:

<img [src]="safeUrl.changingThisBreaksApplicationSecurity">

Pero esto no parece correcto.

¿Alguna sugerencia sobre cómo renderizar correctamente esta imagen en base64?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para renderizar correctamente una imagen en base64, puedes utilizar el servicio DomSanitizer de Angular para sanear la URL y marcarla como segura. Aquí tienes cómo hacerlo:

    1. Inyecta el servicio DomSanitizer en el constructor de tu componente:
    constructor(private domSanitizer: DomSanitizer) {}
    1. Crea un método que devuelva la URL sanitizada:
    getSafeUrl(base64: string): SafeUrl {
  const url = `data:image/vnd.microsoft.icon;base64,${base64}`;
  return this.domSanitizer.bypassSecurityTrustUrl(url);
}
    1. Utiliza el método getSafeUrl() para establecer el atributo src de tu etiqueta img:
    <img [src]="getSafeUrl(base64)">

    Esto renderizará correctamente la imagen en base64 sin mostrar ninguna advertencia de seguridad.

    Aquí tienes una versión modificada de tu demo de StackBlitz que implementa esta solución: DEMO

Comments are closed.