Base64 en HTML

Comment décoder du Base64 en HTML

1. Collez le Base64 dans Base64 ou data URI. Une URI data:text/html;base64, fonctionne aussi. Pour un long corps d’e-mail enregistré en texte, utilisez Ouvrir un fichier .txt.
2. La liste d’informations indique le jeu de caractères et le nombre de lignes. En dessous, un cadre en sandbox affiche la page rendue, avec la note « Aperçu en sandbox : scripts, formulaires et ressources externes sont bloqués. La source est ci-dessous. »
3. Le panneau Texte sous l’aperçu contient la source. Copier le texte la copie en entier.
4. Appuyez sur Télécharger le fichier pour enregistrer decoded.html.

Rien n’est envoyé nulle part. Le décodage a lieu dans votre navigateur, et la page n’a le droit d’effectuer aucune requête réseau hormis le comptage des pages vues de Cloudflare.

Pourquoi l’aperçu est en sandbox

Du HTML de source inconnue peut faire bien plus qu’afficher du texte. Un corps d’e-mail peut contenir un pixel de suivi qui signale quand et où il a été ouvert, une page de phishing peut contenir un formulaire de connexion qui envoie les données à l’attaquant, et n’importe quelle page peut exécuter des scripts. L’aperçu bloque chacune de ces menaces :

La politique bloque aussi les styles intégrés : l’aperçu montre donc le texte, les liens et la structure du message plus sobrement qu’un client de messagerie. Les images intégrées en URI data: sont autorisées et s’affichent normalement.

Les pages de plus de 2 Mo ne sont pas prévisualisées (« Trop volumineux pour un aperçu ici. Consultez la source ci-dessous ou téléchargez le fichier. »). Le panneau de source affiche les 256 premiers Ko de tout document ; Copier le texte copie la source complète des documents jusqu’à 8 Mo.

Reconnaître du HTML en Base64

Le jeu de caractères est détecté à partir des octets : marque d’ordre des octets, UTF-16, UTF-8 valide, ou Windows-1252 par défaut. Une balise <meta charset> dans le document n’est pas consultée : une page dans un autre ancien encodage peut donc afficher de mauvais accents dans l’aperçu, alors que le fichier téléchargé garde ses octets d’origine.

D’où vient le HTML en Base64

Dans un e-mail, la version HTML du message est souvent une partie MIME avec Content-Type: text/html et Content-Transfer-Encoding: base64. Collez ici uniquement les lignes encodées de cette partie, ou ouvrez le message brut complet dans le décodeur EML, qui affiche chaque partie et chaque pièce jointe. Base64 dans les e-mails explique la structure.

Certains services qui reçoivent ou affichent des e-mails livrent le corps HTML dans un champ Base64 du JSON de leurs webhooks ou de leur API, et les API de modèles et de génération de PDF renvoient parfois le HTML généré de la même façon. Décoder le Base64 dans du JSON traite une charge utile complète d’un coup.

Les campagnes de phishing se servent d’URI data:text/html pour transporter une fausse page de connexion complète dans un lien ou une pièce jointe. Coller l’URI ici affiche la page sans l’exécuter. Pour construire de telles URI, voir HTML en Base64.

Prévisualiser du HTML non fiable dans votre propre application

La même approche fonctionne dans n’importe quelle page web : décodez, puis placez le résultat dans une iframe avec un attribut sandbox vide. La sandbox seule n’empêche pas le chargement des images et des feuilles de style distantes : ajoutez donc en tête une Content Security Policy pour le cadre :

function previewHtml(b64, container) {
  const bytes = Uint8Array.from(atob(b64), (c) => c.charCodeAt(0));
  const html = new TextDecoder().decode(bytes);
  const csp = `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src data:; style-src 'unsafe-inline'">`;
  const frame = document.createElement("iframe");
  frame.setAttribute("sandbox", "");
  frame.srcdoc = csp + html;
  container.append(frame);
}

Dans Chrome, une page de test contenant un script, une feuille de style distante et une image distante n’a exécuté aucun script ni effectué aucune requête avec cette fonction ; sans la ligne <meta>, l’image et la feuille de style ont été téléchargées. Contrairement à l’aperçu de cette page, elle conserve les styles intégrés. Plus de détails sur Base64 en JavaScript.

FAQ