data:image/png;base64, es un prefijo, no una imagen completa. Introduce un recurso en línea: el esquema son datos, el tipo de medio declarado es imagen/png y el marcador dice que la siguiente carga útil usa Base64. La coma es el límite entre metadatos y datos.
Leer la estructura
data:[media-type][;base64],payload
data:text/plain;base64,SGVsbG8=
data:text/plain,Hello%20worldEl primer ejemplo representa el texto Hola hasta Base64. El segundo utiliza codificación porcentual en su lugar. Un analizador de datos URI debe inspeccionar los metadatos antes de elegir un decodificador. El envío del URI completo a un decodificador Base64 sin formato falla porque los dos puntos, el punto y la coma no son caracteres de carga útil.
Dividir en la primera coma, no en todas las comas. Los datos restantes pueden contener comas, especialmente en un texto que no sea Base64 URI. Los parámetros de tipo de medio opcionales pueden aparecer antes del marcador Base64. Cuando se omite el tipo de medio, el formato de datos URL tiene un tipo de texto y un juego de caracteres predeterminados; ese valor predeterminado no transforma bytes binarios arbitrarios en texto legible.
Una etiqueta MIME es un reclamo
Cualquiera puede colocar image/png en el prefijo. La etiqueta no prueba que los bytes formen un PNG. Compare la firma y luego solicite a un decodificador de imágenes real que cargue el resultado. De manera similar, un encabezado PDF es sólo una pista de reconocimiento; un analizador PDF completo aún puede rechazar el documento.
Cambiando image/png a image/jpeg no convierte la imagen. La conversión significa decodificar la imagen de origen y codificar un nuevo archivo en el formato de destino. Esto puede cambiar la transparencia, los metadatos, la calidad y el tamaño. Conserve el original cuando esas diferencias sean importantes.
Recuperar el recurso sin ejecutarlo
Analice e inspeccione primero. El texto se puede mostrar como texto, mientras que las imágenes rasterizadas compatibles se pueden obtener una vista previa en un elemento de imagen. Evite insertar marcas arbitrarias HTML o SVG en el documento. Un dato URL puede representar contenido activo además de una imagen, por lo que su naturaleza autónoma no es una garantía de seguridad.
Para descargar un archivo, conserve los bytes decodificados y utilice una extensión sensata basada en la información de formato confirmada. Para obtener un informe de diagnóstico, muestre el tipo declarado y el tipo detectado por separado. Esto hace que las discrepancias sean visibles en lugar de ocultarlas detrás de un icono de archivo tranquilizador. La sintaxis de los datos URL y sus valores predeterminados se describen en MDN: URL de datos.