HTML en Base64 : encoder du balisage pour les data URI

Comment encoder du HTML en Base64

1. Collez votre balisage dans Entrée · texte, ou appuyez sur Exemple pour un petit document.
2. Copiez le Base64 depuis Sortie · Base64.
3. Laissez Jeu de caractères sur UTF-8, et déclarez l’UTF-8 dans la data URI ou dans le document (voir plus bas).
4. Ajoutez data:text/html;charset=utf-8;base64, devant si vous avez besoin d’une data URI, ou collez le Base64 seul dans le champ d’API qui le demande.

L’exemple <!doctype html> suivi de <h1>Hello from base64hub</h1> sur deux lignes s’encode en PCFkb2N0eXBlIGh0bWw+CjxoMT5IZWxsbyBmcm9tIGJhc2U2NGh1YjwvaDE+. Base64 en HTML fait l’inverse.

Exemples

Pour Base64, des entités comme € ne sont que du texte et restent telles quelles ; le navigateur les résout après le décodage. Une chaîne qui commence par PCFkb2N0eXBl ou PCFET0NUWVBF est un document HTML (<!doctype ou <!DOCTYPE), et PGh0bWw correspond à <html.

Construire une URI data:text/html

Une data URI complète comporte quatre parties : le schéma, le type de média, un jeu de caractères facultatif et l’indicateur Base64.

data:text/html;charset=utf-8;base64,PHA+Y2Fmw6k8L3A+

Sans charset=utf-8 dans l’URI ni <meta charset="utf-8"> dans le document, un navigateur peut lire les octets dans un encodage historique, et café s’affiche café. Placer la balise meta dans le HTML protège le document où qu’il se retrouve.

Usages typiques :

• Dans une iframe, <iframe src="data:text/html;base64,..."> affiche un extrait autonome sans fichier séparé. Pour du HTML écrit à la main, l’attribut srcdoc est souvent plus simple, car il ne demande aucun encodage.
• Les tests de navigateur et autres automatisations peuvent charger une page de test depuis une data URI sans serveur web.
• Certaines API d’e-mail, de rendu PDF et de documents acceptent un corps HTML dans un champ Base64, pour que les guillemets et les sauts de ligne n’aient pas besoin d’être échappés en JSON.

Les navigateurs ne laissent pas une page web faire naviguer la fenêtre principale vers une URL data:text/html : les liens et redirections vers une telle URL échouent donc en silence ou affichent une erreur. Les iframes ne sont pas concernées.

Taille et alternatives

Base64 rend le balisage environ un tiers plus gros : le document de 49 octets <!doctype html><meta charset="utf-8"><p>café</p> devient 68 caractères. Pour du HTML majoritairement ASCII, une data URI encodée en pourcent est souvent plus courte, car seule une poignée de caractères comme #, % et les octets non ASCII doivent être échappés. Base64 est le choix le plus sûr quand le balisage est volumineux, contient beaucoup de caractères spéciaux ou va dans un champ qui n’accepte que du Base64. Le générateur de data URI construit des liens data: pour du HTML, du CSS et des images, et les performances des data URI détaillent les compromis de cache et de taille.

HTML en Base64 dans le code

import base64

html = '<!doctype html><meta charset="utf-8"><p>café</p>'
uri = "data:text/html;charset=utf-8;base64," + base64.b64encode(html.encode("utf-8")).decode()

// Node.js
const html = "<p>café</p>";
const uri = "data:text/html;charset=utf-8;base64," + Buffer.from(html, "utf8").toString("base64");
// "data:text/html;charset=utf-8;base64,PHA+Y2Fmw6k8L3A+"

Dans le navigateur, utilisez l’approche TextEncoder de Base64 en JavaScript, car btoa seul abîme ou rejette les caractères non ASCII. Voir aussi Base64 en Python.

FAQ