¿Qué es la Codificación de Entidades HTML?

La codificación de entidades HTML es una técnica que reemplaza caracteres especiales en HTML con sus referencias de entidad correspondientes. Cuando escribes HTML, ciertos caracteres tienen significados especiales: < inicia una etiqueta, > finaliza una etiqueta, & inicia una entidad, y " y ' delimitan valores de atributos. Si quieres mostrar estos caracteres literalmente en tu página web sin que sean interpretados como código HTML, debes usar la codificación de entidades.

El navegador renderiza las referencias de entidad como los caracteres correspondientes sin interpretarlos como marcado. Este mecanismo es fundamental para el desarrollo web, desempeñando un papel crítico tanto en la visualización de contenido como en la seguridad. Sin la codificación de entidades, cada signo de ángulo en el contenido generado por el usuario sería tratado como HTML, potencialmente rompiendo el diseño de la página o creando vulnerabilidades de seguridad severas.

Por Qué es Importante la Codificación de Entidades HTML

La codificación de entidades HTML sirve para dos propósitos principales: la representación correcta de caracteres especiales y la prevención de ataques de cross-site scripting (XSS). Cuando usas entidades como < en lugar de <, el navegador muestra un signo menor que en lugar de interpretarlo como el inicio de una etiqueta HTML.

El escenario más común donde esto importa es el contenido generado por el usuario. Si tu aplicación acepta comentarios, publicaciones en foros o descripciones de perfil, debes codificar la salida antes de renderizarla en HTML. Sin codificación, un usuario podría enviar <script>alert('xss')</script> y el navegador lo ejecutaría como JavaScript, dando al atacante control sobre lo que se ejecuta en los navegadores de tus visitantes.

Referencia de Entidades HTML Comunes

Cómo Funciona la Codificación

Cuando un analizador HTML encuentra <, reconoce & como el inicio de una referencia de entidad. Luego lee el nombre de la entidad lt y termina en el punto y coma. El analizador busca lt en su tabla de entidades y sustituye el carácter correspondiente < en la salida renderizada.

Las referencias numéricas de caracteres funcionan de manera similar pero usan valores decimales (<) o hexadecimales (<). El analizador convierte el valor numérico al punto de código Unicode correspondiente. Las referencias numéricas pueden representar cualquier carácter Unicode, mientras que las entidades nombradas solo cubren un subconjunto de caracteres de uso frecuente.

Codificación de Entrada de Usuario

La regla más importante en el desarrollo web es codificar todo el contenido generado por el usuario antes de renderizarlo en HTML. Esto se conoce como codificación de salida contextual y debe aplicarse en el punto donde los datos salen de tu aplicación y entran en el contexto HTML.

Ejemplo en PHP

$userInput = '<script>alert("xss")</script>';
$safe = htmlspecialchars($userInput, ENT_QUOTES | ENT_HTML5, 'UTF-8');
echo $safe;
// Output: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;

Ejemplo en JavaScript

function encodeHtml(str) {
  const div = document.createElement('div');
  div.appendChild(document.createTextNode(str));
  return div.innerHTML;
}

const userInput = '<script>alert("xss")</script>';
console.log(encodeHtml(userInput));
// Output: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;

Ejemplo en Python

import html

user_input = '<script>alert("xss")</script>'
safe = html.escape(user_input, quote=True)
print(safe)
# Output: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;

Ejemplo en Ruby

require 'erb'

user_input = '<script>alert("xss")</script>'
safe = ERB::Util.html_escape(user_input)
puts safe
# Output: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;

Contextos de Codificación

La codificación HTML no es única para todos los casos. Diferentes contextos dentro de un documento HTML requieren diferentes estrategias de codificación.

Contexto del cuerpo HTML — contenido entre etiquetas como <div>contenido</div>. Codifica los cinco caracteres: <, >, &, ", '.

Contexto de atributo HTML — valores dentro de atributos como <div class="valor">. Codifica los mismos cinco caracteres, pero presta especial atención a las comillas ya que delimitan los valores de los atributos.

Contexto de URL — URLs en atributos href o src. Usa codificación URL (%20 para espacios) en lugar de codificación de entidades HTML.

Contexto de JavaScript — datos incrustados en bloques <script>. Usa escape de cadenas de JavaScript (\x3C para <) en lugar de codificación de entidades HTML.

Herramienta en Línea

La herramienta Codificador y Decodificador de Entidades HTML en Help2Code facilita la codificación y decodificación de entidades HTML. Pega tu texto, elige el modo de codificar o decodificar, y copia el resultado con un solo clic. Esta es la forma más rápida de convertir caracteres especiales cuando no estás escribiendo código de producción.

Seguridad: Previniendo XSS

El cross-site scripting sigue siendo una de las vulnerabilidades de seguridad web más comunes. La defensa principal es la codificación de salida adecuada. Cada framework incluye funciones de codificación integradas: Blade en Laravel usa {{ $var }} que codifica automáticamente la salida, Twig usa {{ var|e('html') }}, y React escapa automáticamente las expresiones JSX.

El error más común en la prevención de XSS es codificar datos en el punto incorrecto de tu pipeline. Siempre codifica en la capa de salida, justo antes de que los datos se rendericen. Si codificas datos cuando se almacenan en la base de datos, corres el riesgo de doble codificación o de codificar datos que se usarán en contextos no HTML como APIs JSON o plantillas de correo electrónico.

Conclusión

La codificación de entidades HTML es una habilidad fundamental para todo desarrollador web. Asegura que los caracteres especiales se muestren correctamente y protege a tus usuarios contra ataques XSS. La regla clave es simple: codifica todo el contenido generado por el usuario antes de renderizarlo en HTML. Usa la herramienta Codificador y Decodificador de Entidades HTML para conversiones rápidas, y confía en la codificación integrada de tu framework para código de producción.