Base64 a HTML

Cómo decodificar Base64 a HTML

1. Pega el Base64 en Base64 o data URI. También funciona una URI data:text/html;base64,. Para un cuerpo de correo grande guardado como texto, usa Abrir archivo .txt.
2. La lista de información muestra el juego de caracteres y el número de líneas. Debajo, un marco en sandbox muestra la página renderizada, con la nota «Vista previa en sandbox: scripts, formularios y recursos externos están bloqueados. El código fuente está abajo.»
3. El panel Texto bajo la vista previa contiene el código fuente. Copiar texto lo copia entero.
4. Pulsa Descargar archivo para guardar decoded.html.

No se envía nada a ninguna parte. La decodificación se hace en tu navegador, y la página no puede hacer peticiones de red, salvo las del contador de visitas de Cloudflare.

Por qué la vista previa está en un sandbox

El HTML de origen desconocido puede hacer mucho más que mostrar texto. El cuerpo de un correo puede llevar un píxel de seguimiento que informa de cuándo y dónde se abrió, una página de phishing puede contener un formulario de inicio de sesión que envía los datos al atacante, y cualquier página puede ejecutar scripts. La vista previa bloquea cada una de estas cosas:

La política también bloquea los estilos en línea, así que la vista previa muestra el texto, los enlaces y la estructura del mensaje con un aspecto más sobrio que en un cliente de correo. Las imágenes incrustadas como URI data: están permitidas y aparecen con normalidad.

Las páginas de más de 2 MB no se previsualizan («Demasiado grande para previsualizarlo aquí. Consulta el código fuente abajo o descarga el archivo.»). El panel de código muestra los primeros 256 KB de cualquier documento; Copiar texto copia el código completo de documentos de hasta 8 MB.

Cómo reconocer HTML en Base64

El juego de caracteres se detecta a partir de los bytes: una marca de orden de bytes, UTF-16, UTF-8 válido o Windows-1252 como último recurso. No se consulta la etiqueta <meta charset> del documento, así que una página en otra codificación heredada puede mostrar mal los acentos en la vista previa, mientras que el archivo descargado conserva sus bytes originales.

De dónde sale el HTML en Base64

En el correo, la versión HTML de un mensaje suele ser una parte MIME con Content-Type: text/html y Content-Transfer-Encoding: base64. Pega aquí solo las líneas codificadas de esa parte, o abre el mensaje en bruto completo en el decodificador EML, que muestra cada parte y cada adjunto. Base64 en el correo explica la estructura.

Algunos servicios que reciben o renderizan correo entregan el cuerpo HTML como un campo Base64 dentro del JSON de un webhook o de una API, y las API de plantillas y de generación de PDF a veces devuelven el HTML generado del mismo modo. Decodificar Base64 dentro de JSON procesa un payload entero de una vez.

Las campañas de phishing usan URI data:text/html para llevar una página de inicio de sesión falsa completa dentro de un enlace o un adjunto. Si pegas aquí la URI, ves la página sin ejecutarla. Para crear URI así, consulta HTML a Base64.

Previsualizar HTML no fiable en tu propia app

El mismo enfoque funciona en cualquier página web: decodifica y mete el resultado en un iframe con el atributo sandbox vacío. El sandbox por sí solo no impide que se carguen imágenes y hojas de estilo remotas, así que antepón una Content Security Policy para el marco:

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);
}

En Chrome, una página de prueba con un script, una hoja de estilo remota y una imagen remota no ejecutó ningún script ni hizo ninguna petición con esta función; sin la línea <meta>, se descargaron la imagen y la hoja de estilo. A diferencia de la vista previa de esta página, conserva los estilos en línea. Más en Base64 en JavaScript.

Preguntas frecuentes