Strumenti per sviluppatori · Codificatore e decodificatore Base64
Spiegazione degli URI dei dati: come funziona data:image/png;base64 e da dove proviene
· Sfondo
base64 codifica
Lo schema data: URL è stato specificato in 1998 come un modo per incorporare piccole risorse direttamente in una pagina. Questo post ne spiega la grammatica, perché Base64 è opzionale e dove i browser pongono dei limiti.
La favicon che era un carattere 1,300 URL — incontrando un dato: URI in natura e leggendone le parti
Un dato: URI incorpora una piccola risorsa direttamente in un URL, evitando una richiesta HTTP separata. Il formato è specificato in RFC 2397 (definito in 1998) e utilizza una grammatica con uno schema, tipo di supporto opzionale, flag di codifica opzionale e il payload stesso. Ad esempio, data:text/plain,hello è un dato in testo semplice URI contenente la parola ciao. Il browser lo elabora nello stesso modo in cui elabora una richiesta HTTP, ma invece di recuperare il contenuto sulla rete, lo decodifica dallo stesso URL.
Gli URI dei dati sono più comuni per immagini di piccole dimensioni, icone CSS e dispositivi di prova. Un dato: URI con codifica Base64 si presenta così: data:image/png;base64,iVBORw0K.... La suddivisione è: data: è lo schema; image/png è il tipo di supporto; ;base64 è il flag di codifica; la stringa lunga rappresenta i byte dell'immagine con codifica Base64. Quando un browser vede questo URL, decodifica Base64 per recuperare i byte originali, quindi esegue il rendering dell'immagine utilizzando quei byte.
Lettura di un dato URI dalla sua grammatica visibile: tipo di supporto, marcatore Base64 opzionale e payload
Se il flag di codifica viene omesso (data:text/html,<p>hello</p>), il payload è testo UTF-8 con codifica percentuale, non base64. La presenza di ;base64 indica al browser quale regola di decodifica applicare. Il tipo di supporto in un dato: URI è un tipo MIME, la stessa stringa di tipo utilizzata nelle intestazioni Content-Type HTTP. image/png, text/plain, application/json e image/svg+xml sono esempi comuni. Se non viene specificato alcun tipo di supporto, il valore predefinito è text/plain;charset=US-ASCII.
Un browser deve determinare come visualizzare i byte in base al tipo di supporto: se dice image/png, i byte sono PNG; se dice text/html, il contenuto è HTML. Specificare il tipo di supporto sbagliato può produrre risultati confusi; un file PNG etichettato come testo/plain verrà visualizzato come caratteri spazzatura anziché come immagine. Base64 è facoltativo in un dato: URI. Per il contenuto testuale, la codifica percentuale (la stessa codifica utilizzata nelle stringhe di query URL) è spesso più compatta di base64. Un consumatore URI di dati decide come interpretare il payload dal tipo di supporto e dall'indicatore prima della virgola. L'encoder Base64 fornisce solo i caratteri del carico utile. Non aggiunge un tipo MIME, non sceglie se i byte descrivono PNG o SVG o convalida l'indirizzo assemblato.
Perché Base64 è facoltativo: payload di testo con codifica percentuale per SVG e testo normale rispetto a Base64 per binario
URI data:text/html,<p>Hello</p> contiene HTML come caratteri letterali (con codifica percentuale per eventuali caratteri speciali come virgolette o parentesi angolari). Base64 è utile per i dati binari che non possono essere rappresentati come testo e per i casi in cui il payload contiene molti caratteri speciali che la codifica percentuale gonfierebbe. Un piccolo SVG o un file di testo può avere una codifica percentuale più piccola; un file binario deve essere base64. Per creare manualmente un file data: URI è necessario conoscere il tipo di supporto e la codifica.
Per un'icona SVG, puoi utilizzare data:image/svg+xml seguito dal markup SVG con codifica percentuale o dai byte con codifica base64 e base64. Per la codifica percentuale, racchiudi SVG in data:image/svg+xml, quindi codifica in percentuale eventuali parentesi angolari, virgolette e altri caratteri speciali. Il risultato è lungo ma leggibile dall’uomo. Per base64, prendi i byte SVG, codificali in base64 e produci data:image/svg+xml;base64, quindi aggiungi la stringa base64. Base64 è solitamente più compatto per il formato binario, ma per il testo SVG la forma con codifica percentuale potrebbe essere più breve.
Esempio realizzato: creazione manuale di un dato: URI per un piccolo SVG — codifica del markup come testo e assemblaggio della stringa
I browser e le applicazioni che li utilizzano possono imporre limiti o restrizioni di policy sugli URI dei dati, ma questo repository non stabilisce un limite numerico portabile. L'utilizzo della memoria, il comportamento del parser e la politica di sicurezza dipendono anche da dove appare il valore, quindi testa l'esatto browser di destinazione e il contesto di incorporamento invece di fare affidamento su un limite ricordato.
Un'immagine 5 MB incorporata in ogni file HTML aumenterebbe le dimensioni della pagina. Gli URI di dati sono ideali per risorse di piccole dimensioni: icone CSS, piccole immagini o dati di test. Per file di grandi dimensioni, una richiesta esterna è più veloce perché il browser può memorizzare nella cache la risposta e riutilizzarla su più pagine; a data: URI viene incorporato ogni volta che viene caricata la pagina.
Limiti del browser e della sicurezza da verificare nell'applicazione che lo utilizza anziché presupporre
Una soglia comune è di pochi kilobyte; sotto, dati: gli URI sono efficienti; al di sopra di ciò, i file esterni sono generalmente più veloci. I criteri di sicurezza e del browser limitano l'utilizzo dei dati: URI in determinati contesti. Una navigazione di primo livello (facendo clic su un collegamento che punta a un dato: URI con contenuto HTML) viene spesso bloccata per impedire il phishing. Un dato: URI in un attributo src dello script può eseguire JavaScript arbitrario, creando un rischio per la sicurezza.
I browser applicano le regole della politica di sicurezza dei contenuti (CSP) ai dati: URI; un severo CSP potrebbe vietarli del tutto. Un dato: URI in un img src o un iframe src è generalmente consentito, ma incorporato in uno stile o in un contesto di script potrebbe essere limitato. Controlla sempre la compatibilità del browser e la politica di sicurezza del tuo ambiente di destinazione. Gli URI dei dati in CSS sono comuni per le immagini di sfondo di piccole dimensioni. La sintassi è la stessa: url(data:image/png;base64,...).
Dove i dati: gli URI sono ancora lo strumento giusto: icone CSS, immagini in linea sicure per la posta elettronica e dispositivi di test
Un file CSS con dati incorporati: gli URI possono essere spediti come un singolo file con tutte le immagini incluse, riducendo le richieste HTTP. Ciò è utile per piccoli set di icone o grafica semplice. Le immagini di grandi dimensioni incorporate in CSS gonfiano il file e ne rallentano l'analisi. I moderni strumenti di creazione (come il webpack) possono convertire automaticamente piccole immagini in dati: URI in CSS e immagini esterne in URL normali, bilanciando le prestazioni.
Il formato data: URI è definito da RFC 2397, un breve documento che specifica la grammatica ma non definisce dove i dati: gli URI possono o non possono essere utilizzati. I fornitori di browser hanno aggiunto le proprie restrizioni basate su problemi di sicurezza e prestazioni.
Cosa non copre: blob: URL, URL di oggetti e accesso al file system
Alcuni sistemi hanno dati deprecati: supporto URI in determinati contesti (come l'azione del modulo nel livello CSP 3) per prevenire abusi. Quando utilizzi un dato: URI, testalo nel tuo browser di destinazione; RFC dice che il formato è valido, ma la politica di sicurezza del browser potrebbe bloccarlo.
La creazione manuale di dati: URI è rara nella produzione; la maggior parte degli strumenti e delle librerie di compilazione gestiscono la conversione. Ma comprendere il formato è utile per il debug. Se vedi un lungo data:image/... URL nel tuo CSS o HTML, puoi decodificarlo con lo strumento codificatore e decodificatore Base64: rimuovi il prefisso data:image/...;base64,, incolla la stringa rimanente nello strumento e decodificala per vedere i byte effettivi.
Conclusione: un formato piccolo con una grammatica rigorosa: come il codificatore e decodificatore Base64 gestisce la fase di codifica del testo in modo da poter assemblare un URI valido
Per i dati SVG: URI, puoi decodificare in percentuale il modulo di testo e leggere il markup XML. Comprendere l'anatomia dei dati: URI semplifica la risoluzione dei problemi delle risorse incorporate. Gli URI dei dati sono uno standard Web (RFC 2397) che consente di incorporare le risorse direttamente come URL. Sono più efficienti per risorse piccole e stabili che non beneficiano di una memorizzazione nella cache separata. Il formato include la specifica facoltativa del tipo di supporto e un flag di codifica (codifica base64 o percentuale implicita).
La codifica Base64 è necessaria per i dati binari ma facoltativa per il testo; SVG con codifica percentuale può essere più leggibile. Le policy di sicurezza del browser limitano i luoghi in cui è possibile utilizzare i dati: gli URI, pertanto è essenziale comprendere le restrizioni nell'ambiente di destinazione. Lo strumento di codifica e decodifica Base64 può aiutarti a codificare manualmente una risorsa o decodificare un URI incorporato per ispezionarne il contenuto.