Codificador / Decodificador HTML
Codifica texto a entidades HTML o decodifica entidades HTML de vuelta a texto.
Cómo usar Codificador / Decodificador HTML
- 1
Introduce tu texto o HTML
Pega en el cuadro de entrada el texto plano que quieres escapar, o las entidades HTML que quieres reconvertir.
- 2
Elige codificar o decodificar
Haz clic en Codificar a entidades HTML para convertir caracteres como < > & en entidades seguras, o en Decodificar entidades HTML para convertir las entidades de nuevo en caracteres legibles.
- 3
Revisa la salida
Comprueba el resultado convertido en el cuadro de salida, y usa Intercambiar entrada/salida para encadenar una conversión inversa si lo necesitas.
- 4
Copia el resultado
Pulsa Copiar salida para obtener el texto codificado o decodificado, o Borrar ambos para restablecer los campos.
Codificación HTML: escapar caracteres especiales con seguridad
Qué significa la codificación HTML
La codificación HTML, también llamada escapado de HTML, convierte los caracteres que tienen un significado especial en HTML en referencias de caracteres para que un navegador los muestre como texto literal en lugar de interpretarlos como marcado. El navegador lee un < en bruto como el comienzo de una etiqueta, así que, para mostrar un signo de menor que real en la página, debes escribir en su lugar la referencia <. La codificación es la traducción segura entre lo que quieres mostrar y lo que el navegador ejecutaría de otro modo.
Solo hay un puñado de caracteres que de verdad necesitan escaparse en el HTML cotidiano, pero acertar con ellos marca la diferencia entre una página que se representa correctamente y otra que se rompe o se vuelve vulnerable. Las referencias vienen en dos sabores: entidades con nombre como <, y referencias numéricas como < o <, todas las cuales producen el mismo carácter visible.
Los caracteres principales y sus entidades
Cinco caracteres cubren casi toda necesidad de escapado. El ampersand & pasa a ser & y debe ir primero en cualquier conversión manual, porque comienza cada entidad. El signo de menor que < pasa a ser < y el signo de mayor que > pasa a ser >, ya que estos delimitan las etiquetas. La comilla doble " pasa a ser " y la comilla simple o apóstrofo ' pasa a ser ' (o la entidad con nombre ' en HTML5), que importan dentro de los valores de los atributos.
La regla del ampersand primero evita un error sutil. Si reemplazaras < por < y solo después escaparas los ampersands, convertirías tu recién escrito < en &lt; y mostrarías el texto literal "<" en la página. Codifica siempre & antes que los demás. Esta herramienta aplica las conversiones en el orden correcto automáticamente, así que nunca caes en esa trampa.
Ejemplo resuelto: mostrar un fragmento de código
Imagina que quieres que una página muestre literalmente el texto <a href="x">Tom & Jerry</a> en lugar de representar un enlace. Cada carácter especial se reemplaza por su referencia. El corchete angular de apertura pasa a ser <, el de cierre pasa a ser >, las comillas dobles alrededor del atributo pasan a ser ", y el ampersand entre los nombres pasa a ser &.
El resultado codificado es <a href="x">Tom & Jerry</a>. Pegado en un archivo HTML, el navegador imprime el código fuente original de forma visible en pantalla, exactamente como un tutorial o una página de documentación mostraría un ejemplo de marcado, en lugar de convertirlo en un elemento de enlace funcional.
Por qué la codificación evita el XSS
El cross-site scripting (XSS) es un ataque en el que un atacante inyecta HTML o JavaScript en una página a través de un campo que más tarde se muestra a otros usuarios, como un comentario, un nombre de usuario o un término de búsqueda. Si un sitio inserta ese texto no confiable en la página sin escaparlo, una carga como una etiqueta script se ejecuta en el navegador de la víctima con los privilegios del sitio, posibilitando el robo de sesión y cosas peores.
La codificación neutraliza el ataque de raíz. Cuando los caracteres peligrosos están escapados, un <script>alert(1)</script> inyectado se almacena y se representa como texto visible inofensivo —<script>alert(1)</script>— en lugar de como un elemento ejecutable. La defensa más fiable con diferencia contra esta clase de vulnerabilidad es codificar en HTML cada fragmento de datos no confiable en el punto exacto en que se escribe en la página.
Contenido de elemento frente a contexto de atributo
El lugar donde colocas los datos cambia qué caracteres son peligrosos, y una única regla de escapado no basta para cada punto. Dentro del contenido de un elemento —el texto entre una etiqueta de apertura y una de cierre— los caracteres críticos son <, > y &. Dentro del valor de un atributo, el carácter de comilla que delimita el atributo es el que permite a un atacante escapar del valor, así que ahí hay que codificar " y ' además del ampersand.
El hábito más robusto es poner siempre tus atributos entre comillas y codificar el carácter de comilla correspondiente junto con < > y &. Un atributo sin comillas es mucho más difícil de asegurar, porque entonces los espacios y muchos otros caracteres pueden salirse del valor. También existen contextos completamente distintos —dentro de un bloque script, un bloque style o un atributo de URL— donde el escapado de HTML por sí solo es insuficiente y se requiere en su lugar una codificación específica del contexto.
Codificar frente a descodificar, y cuándo hacer cada cosa
La codificación es la dirección a la que recurres al generar salida: tomas texto en bruto y produces marcado seguro con la acción Codificar. La descodificación es lo inverso, convirtiendo las entidades de nuevo en sus caracteres literales con la acción Descodificar, lo que resulta útil cuando tienes una fuente escapada —copiada de una base de datos, un correo electrónico u otra herramienta— y quieres leer o editar el texto subyacente.
Un flujo de trabajo práctico usa ambas con el botón Intercambiar. Podrías descodificar un fragmento almacenado a caracteres planos, editarlo y luego volver a codificar la versión editada para mostrarla de forma segura, todo sin volver a teclear. Solo recuerda la regla de oro del momento oportuno: codifica en el momento de la salida, no en el momento de la entrada, porque escapar demasiado pronto puede corromper datos que necesitan permanecer en bruto en el almacenamiento.
Errores comunes que evitar
El error clásico es la doble codificación: volver a pasar por el codificador un texto que ya estaba escapado, lo que convierte & en &amp; y muestra el literal "&" a tus usuarios. Codifica exactamente una vez, y solo en el límite de la salida. Un primo cercano es escapar los datos al entrar en tu base de datos y de nuevo al salir, produciendo el mismo resultado distorsionado.
Otro error frecuente es suponer que el escapado de HTML protege todos los contextos. No protege los datos colocados dentro de una cadena de JavaScript, un valor de CSS o un href que empieza por javascript:; esos necesitan sus propias reglas de codificación. Por último, no improvises un escapador parcial que olvide el ampersand o las comillas de los atributos: los huecos son justamente por donde se cuelan los fallos y el XSS. Deja que un codificador completo y correctamente ordenado haga el trabajo.
Preguntas frecuentes
¿Qué caracteres se codifican en entidades HTML?
¿Cómo ayuda la codificación a prevenir el XSS?
¿Puedo convertir las entidades de nuevo en texto normal?
¿Para qué sirve el botón Intercambiar?
¿Se envía mi entrada a un servidor?
Herramientas relacionadas
Sigue trabajando con estas prácticas herramientas