Base64, codificación de URL y entidades HTML: lo que todo desarrollador necesita saber
Si llevas tiempo desarrollando aplicaciones web, seguramente ya te has topado con problemas de codificación. Una URL que se rompe por un ampersand inesperado, una página HTML que muestra < en lugar de una etiqueta, o una API que devuelve SGVsbG8gV29ybGQ= y no sabes qué significa. Estos son problemas de codificación, y hay tres esquemas que aparecen una y otra vez: Base64, codificación de URL y entidades HTML.
Esta guía explica qué hace cada uno, con ejemplos concretos, y te indica las herramientas para codificar y decodificar en línea sin instalar nada.
¿Qué es Base64?
Base64 es un método para representar datos binarios usando únicamente caracteres ASCII imprimibles. Toma cualquier secuencia de bytes y la convierte a un alfabeto de 64 caracteres: A–Z, a–z, 0–9, + y /. La salida siempre es texto, lo que la hace segura para usarla en contextos que no admiten datos binarios crudos — adjuntos de email, payloads JSON, URLs data: en CSS y tokens JWT dependen de Base64.
Ejemplo — codificar "Hola Mundo":
- Entrada:
Hola Mundo - Salida en Base64:
SG9sYSBNdW5kbw==
Los signos = al final son relleno de alineación. Base64 siempre produce una salida cuya longitud es múltiplo de 4.
Cuándo usarlo:
- Incrustar imágenes o fuentes directamente en CSS o HTML (
data:image/png;base64,...) - Codificar datos binarios para APIs JSON que solo aceptan texto
- Leer o generar tokens JWT (la cabecera y el payload están codificados en Base64url)
Base64 no es cifrado. Cualquier persona que vea la cadena puede decodificarla en segundos. Úsalo para codificar, no para ocultar información.
Prueba el codificador y decodificador Base64 de FileCrank.
¿Qué es la codificación de URL (codificación porcentual)?
Las URLs solo admiten de forma segura un conjunto limitado de caracteres. Los espacios, ampersands, signos igual, barras diagonales y caracteres fuera del ASCII tienen significado estructural en una URL — o simplemente no son válidos. La codificación de URL (formalmente llamada codificación porcentual) reemplaza los caracteres inseguros por un signo % seguido de dos dígitos hexadecimales que representan el valor del byte UTF-8 del carácter.
Ejemplo — codificar "Hola Mundo":
- Entrada:
Hola Mundo - Salida codificada:
Hola%20Mundo
El espacio se convierte en %20. El ampersand & en %26. La barra diagonal / en %2F.
Cuándo usarlo:
- Construir query strings:
?q=hola%20mundo&idioma=es - Pasar caracteres especiales en datos de formularios
- Construir solicitudes de API que incluyen datos introducidos por el usuario
JavaScript moderno ofrece encodeURIComponent() para esto, pero cuando necesitas inspeccionar o depurar una URL codificada, una herramienta online es más rápida que abrir la consola.
Usa el codificador y decodificador de URL de FileCrank.
¿Qué son las entidades HTML?
HTML usa ciertos caracteres como parte de su sintaxis. Los ángulos < y > delimitan etiquetas, el ampersand & inicia referencias de entidad, y las comillas dobles " delimitan valores de atributos. Si tu contenido incluye estos caracteres de forma literal — por ejemplo, si quieres mostrar código fuente en una página — debes escaparlos para que el navegador no los interprete como marcado.
Las entidades HTML reemplazan esos caracteres con referencias con nombre o numéricas:
Ejemplo — mostrar una etiqueta HTML como texto:
Para mostrar la cadena literal <h1>Hola Mundo</h1> como texto en una página, escribes:
<h1>Hola Mundo</h1>
Cuándo usarlas:
- Mostrar ejemplos de código en documentación o artículos
- Prevenir vulnerabilidades XSS escapando la entrada del usuario antes de insertarla en HTML
- Insertar símbolos tipográficos (
—,©, )
Usa la herramienta de entidades HTML de FileCrank para hacer escape o unescape en segundos.
Los tres esquemas lado a lado
La misma cadena procesada por cada método:
Resuelven problemas distintos y no son intercambiables:
- Base64 convierte datos binarios en texto. Úsalo cuando necesites incrustar datos binarios en un contexto solo de texto.
- Codificación de URL maneja caracteres ilegales o ambiguos en una URL. Úsala al construir URLs o query strings.
- Entidades HTML manejan caracteres reservados por la sintaxis HTML. Úsalas cuando generes texto dentro de documentos HTML.
Errores comunes
Error 1: Usar Base64 para seguridad. La salida de Base64 parece ilegible, pero es trivialmente reversible. No la uses para "ocultar" contraseñas o tokens. Usa cifrado o hashing adecuados.
Error 2: Doble codificación de URL.
Si llamas a encodeURIComponent() sobre una cadena que ya está codificada, obtienes %2520 en lugar de %20. Decodifica primero, luego codifica.
Error 3: Olvidar escapar HTML en plantillas. Insertar datos del usuario directamente en HTML sin escapar es la causa principal de vulnerabilidades XSS. Escapa siempre antes de renderizar.
Prueba las herramientas
Las tres herramientas son gratuitas, funcionan en tu navegador y no requieren registro:
Guárdalas en favoritos. Usarás al menos una cada semana.