Codifica o decodifica entidades HTML _

Cómo funciona la codificación de entidades HTML

Una entidad HTML es una referencia de carácter que el navegador vuelve a interpretar como un solo carácter. Los cinco caracteres HTML reservados (<, >, &, ", ') siempre necesitan codificación cuando el texto se renderiza como HTML; el resto es opcional y depende de la codificación del documento.

1. Elige un modo y un alcance. El modo Codificar recorre la entrada carácter a carácter. El modo Decodificar analiza la entrada buscando patrones de entidad. El selector de alcance decide si solo se codifican los cinco caracteres seguros HTML o si también se reescriben todos los puntos de código no ASCII.
2. Elige un estilo de entidad. Las entidades nombradas (©) se leen bien en el código fuente. Las referencias decimales (©) y hex (©) admiten cualquier punto de código Unicode sin necesitar nombre. Los clientes de correo más antiguos y los analizadores XML prefieren las formas numéricas.
3. Recorre la entrada. Al codificar, se lee cada punto de código y se busca en una tabla integrada de unos 200 nombres de entidad comunes. Los valores no encontrados recaen en el formato numérico. Al decodificar, se analiza con una expresión regular que coincide con &name;, &#NNN; y &#xHH; en un solo paso.
4. Mapea a caracteres. Las coincidencias nombradas se resuelven mediante una tabla inversa. Las coincidencias numéricas se procesan con String.fromCodePoint en base 10 o base 16. Las entidades nombradas desconocidas se dejan intactas para que la entrada parcial realice un viaje de ida y vuelta sin pérdidas.
5. Modo en vivo. Activa el modo en vivo y cada pulsación de tecla vuelve a ejecutar la conversión con un antirrebote de 150 ms. Muy útil cuando estás ajustando un fragmento y quieres retroalimentación inmediata antes de pegarlo en una plantilla.

Por qué codificar entidades HTML

• Evitar que la entrada de usuario rompa el diseño. Cuando un usuario escribe un < suelto en un cuadro de comentarios, insertar ese texto directamente en HTML reescribe el resto de la página. Codificar primero los caracteres reservados hace que el navegador renderice el carácter en lugar de interpretarlo como el inicio de una etiqueta.
• Mantener válidos los valores de atributos. Incrustar una cadena entre comillas dentro de un atributo HTML requiere reemplazar la comilla incrustada con " (para atributos con comillas dobles) o ' (para comillas simples). De lo contrario, el analizador cierra el atributo antes de tiempo y el resto de la línea se convierte en marcado suelto.
• Neutralizar HTML accidental en datos almacenados. Los registros, informes de errores y exportaciones de chat suelen contener corchetes angulares y ampersands reales. Codificar el volcado antes de pegarlo en una página de documentación mantiene ese contenido visible como texto en lugar de activar el renderizador o el detector automático de enlaces.
• Compartir fragmentos de código de forma segura. Publicar una etiqueta de ejemplo como <script>alert(1)</script> en una entrada de blog, un correo o un mensaje de Slack requiere codificar los corchetes para que el fragmento se muestre en lugar de ejecutarse. La misma técnica cubre los cuerpos de feeds RSS y los campos `description` de JSON-LD.

Aplicaciones comunes

La codificación de entidades aparece siempre que el texto sin procesar se compone en HTML en tiempo de ejecución — incluso cuando el framework normalmente lo gestiona por ti, la herramienta manual es útil para los momentos en que no lo hace.

• Plantillas renderizadas en servidor: Jinja2, ERB, Twig y Handlebars escapan automáticamente por defecto, pero los bloques raw y los marcadores `safe` desactivan eso — el codec permite confirmar qué habría producido el escape.
• Creación de correos y newsletters: muchos motores de plantillas ESP no escapan automáticamente los campos de combinación, por lo que las comillas tipográficas y los símbolos de copyright en nombres proporcionados por el usuario necesitan precodificación.
• Documentación y ejemplos de código: pegar una etiqueta HTML de ejemplo en una entrada de blog en Markdown o en un fragmento de sitio estático requiere codificar los corchetes para que el renderizador lo trate como texto visible.

Un ejemplo práctico

Pega <script>alert('hi')</script> en la entrada con el modo Codificar, estilo Nombrado y alcance Mínimo. La salida muestra <script>alert('hi')</script>. Cambia el estilo a Hex numérico y la misma entrada produce <script>alert('hi')</script>. Cambia el modo a Decodificar, pega la cadena codificada y la etiqueta original vuelve intacta.

FAQ

¿Qué son las entidades HTML?

Las entidades HTML son referencias de carácter que el navegador sustituye por caracteres individuales al analizar la página. Presentan tres formas: nombradas (como & para &), numéricas decimales (&) y numéricas hex (&). Los cinco caracteres HTML reservados (<, >, &, ", ') necesitan codificación siempre que el texto se inserte en HTML. Las otras aproximadamente 2.225 entidades nombradas cubren símbolos, acentos y letras griegas, pero son opcionales cuando la codificación del documento es UTF-8.

¿Cuándo debo usar entidades nombradas frente a numéricas?

Usa entidades nombradas cuando quieras que el código fuente se lea con claridad (un humano que revise © en una plantilla lo entiende de inmediato). Usa numéricas (decimal o hex) cuando el consumidor sea más antiguo o estricto — los analizadores XML, los clientes de correo heredados y algunos lectores de feeds reconocen solo un subconjunto reducido de las entidades nombradas de HTML5, y todos reconocen las formas numéricas. El hex tiende a imponerse en contextos de seguridad porque se alinea uno a uno con la notación de punto de código Unicode usada en los documentos de especificación.

¿La decodificación admite entidades hex como &?

Sí. El decodificador usa una expresión regular que coincide con las tres formas de entidad en un solo paso: &name;, &#NNN; y &#xHH;. Las coincidencias numéricas se resuelven con String.fromCodePoint en base 10 o base 16. La entrada mixta (nombrada y numérica en la misma cadena) se decodifica correctamente, y los nombres desconocidos se dejan como texto literal para que la entrada parcial realice un viaje de ida y vuelta sin pérdidas.

¿Es seguro usar con entrada no confiable?

El codec en sí es solo de navegador y no envía tu entrada a ningún lado. Si la salida es segura para incrustar depende del contexto. La codificación de entidades gestiona los contextos de cuerpo HTML y valor de atributo, que cubren el caso de la Regla #1 de OWASP. Los contextos JavaScript (manejadores de eventos en línea, bloques `<script>`), los contextos CSS y los contextos URL necesitan sus propias reglas de codificación — la codificación de entidades sola no es suficiente allí. Para una defensa en profundidad en el servidor, combínala con un motor de plantillas con reconocimiento de contexto como DOMPurify o el escape automático de tu framework.

La codificación de entidades en el navegador se sitúa en la frontera entre la entrada del usuario y el HTML renderizado. Realizar la conversión localmente permite comprobar lo que habría emitido tu framework sin enviar nunca el texto original a una herramienta de terceros.