data:image/png;base64, è un prefisso, non un'immagine completa. Introduce una risorsa in linea: lo schema è data, il tipo di supporto dichiarato è image/png e il marcatore dice che il seguente payload utilizza Base64. La virgola è il confine tra metadati e dati.
Leggi la struttura
data:[media-type][;base64],payload
data:text/plain;base64,SGVsbG8=
data:text/plain,Hello%20worldIl primo esempio rappresenta il testo Hello fino a Base64. Il secondo utilizza invece la codifica percentuale. Un parser dati URI deve ispezionare i metadati prima di scegliere un decodificatore. L'invio dell'intero URI a un decoder Base64 non elaborato non riesce perché i due punti, il punto e virgola e la virgola non sono caratteri del payload.
Dividi alla prima virgola, non a ogni virgola. I dati rimanenti potrebbero contenere virgole, soprattutto in un testo diverso da Base64 URI. I parametri facoltativi del tipo di supporto possono essere visualizzati prima del contrassegno Base64. Quando il tipo di supporto viene omesso, il formato dati URL ha un tipo di testo e un set di caratteri predefiniti; tale impostazione predefinita non trasforma byte binari arbitrari in testo leggibile.
Un'etichetta MIME è un reclamo
Chiunque può posizionare image/png nel prefisso. L'etichetta non prova che i byte formino un PNG. Confronta la firma, quindi chiedi a un vero decodificatore di immagini di caricare il risultato. Allo stesso modo, un'intestazione PDF è solo un indizio di riconoscimento; un parser PDF completo potrebbe comunque rifiutare il documento.
Cambiare image/png a image/jpeg non converte l'immagine. La conversione significa decodificare l'immagine di origine e codificare un nuovo file nel formato di destinazione. Ciò potrebbe modificare la trasparenza, i metadati, la qualità e le dimensioni. Mantieni l'originale quando queste differenze contano.
Recuperare la risorsa senza eseguirla
Analizzare e ispezionare prima. Il testo può essere visualizzato come testo, mentre le immagini raster supportate possono essere visualizzate in anteprima in un elemento immagine. Evitare di inserire markup HTML o SVG arbitrari nel documento. Un dato URL può rappresentare contenuto attivo così come un'immagine, quindi la sua natura autonoma non è una garanzia di sicurezza.
Per il download di un file, preservare i byte decodificati e utilizzare un'estensione sensata basata sulle informazioni sul formato confermate. Per un report diagnostico, visualizzare separatamente il tipo dichiarato e il tipo rilevato. Ciò rende visibili le discrepanze invece di nasconderle dietro un'icona di file rassicurante. La sintassi dei dati URL e le relative impostazioni predefinite sono descritte in MDN: URL dei dati.