Docuboxer
Por Sergio Alonzo Piña··5 min de lectura

Entidades HTML: qué son y cómo evitan el XSS

Aprende el conjunto mínimo de caracteres que hay que escapar, cuándo usar entidades con nombre o numéricas y dónde el escapado de HTML no basta.

Una entidad HTML es una secuencia como & o < que representa un carácter que, escrito tal cual, el navegador interpretaría como parte del código. Con la herramienta de entidades HTML codificas y decodificas texto en tu navegador, sin que salga de tu equipo. Escapar bien lo que insertas en una página es también la primera defensa contra el XSS, el ataque que logra que una web ejecute código ajeno.

¿Por qué existen las entidades?

En HTML, < abre una etiqueta y & abre una entidad. Si quieres mostrar el texto <p> en pantalla, y no un párrafo, tienes que escribir &lt;p&gt;. Lo mismo con una comilla dentro de un atributo o con el espacio que no debe partirse al final de línea.

El conjunto mínimo y las más usadas

CarácterEntidad con nombreNuméricaPara qué
&&amp;&#38;Inicia las entidades, así que se escapa siempre
<&lt;&#60;Evita abrir una etiqueta
>&gt;&#62;Cierra una etiqueta
"&quot;&#34;Comilla doble dentro de un atributo
'&apos;&#39;Comilla simple dentro de un atributo
espacio duro&nbsp;&#160;Un espacio que no se parte ni se colapsa
ñ&ntilde;&#241;Opcional con UTF-8
é&eacute;&#233;Opcional con UTF-8

Hoy, con una página en UTF-8, no hace falta escribir los acentos ni la ñ como entidades: se pueden poner directamente. Solo se escapan por obligación los cinco primeros caracteres de la tabla.

Cómo usar la herramienta

  1. Abre Entidades HTML y elige Codificar o Decodificar.
  2. Para codificar, elige el alcance: Solo imprescindibles (& < > " ', el conjunto correcto para insertar texto en HTML) o Todo lo no-ASCII, que codifica también acentos, ñ, símbolos y emoji.
  3. Elige el formato: con nombre, decimal o hexadecimal.
  4. Pega el texto. Con <p>Texto con "comillas", acentos y ñ & más</p>, el modo imprescindible devuelve &lt;p&gt;Texto con &quot;comillas&quot;, acentos y ñ &amp; más&lt;/p&gt;.
  5. Para decodificar, la herramienta acepta entidades con nombre, decimales y hexadecimales mezcladas, con o sin el punto y coma final.

La tabla de nombres cubre los cinco imprescindibles y el bloque Latin-1, que incluye acentos y ñ, más símbolos tipográficos comunes. No incluye las más de dos mil entidades de HTML5: sirve para el uso diario, no para símbolos matemáticos poco frecuentes. Si una entidad no está en la tabla, se codifica en formato numérico.

¿Qué relación tiene con el XSS?

El XSS (cross-site scripting) ocurre cuando una web inserta texto de un usuario en una página sin escaparlo. Si alguien escribe <script>...</script> en un comentario y la página lo pone tal cual, el navegador lo ejecuta. Si la página convierte < y > en &lt; y &gt;, el navegador lo muestra como texto inofensivo. La guía de OWASP contra el XSS lo explica con detalle y distingue según el lugar donde se inserta el dato.

Dónde el escapado de HTML no basta

El escapado correcto depende del contexto:

  • Dentro del texto de un elemento: las entidades mínimas bastan.
  • Dentro de un atributo: también hay que escapar las comillas, y poner el valor entre comillas.
  • Dentro de un script o un evento (onclick): se necesita otro escapado, el de JavaScript. La herramienta tiene un modo aparte, Escapes JS y JSON, que convierte saltos de línea, comillas y acentos en secuencias como \n, \" y é.
  • Dentro de una URL: hace falta la codificación de URL, no las entidades. Para eso, mira qué significa %20 en una URL.

La regla general: escapa según dónde vas a insertar el dato, y deja que el framework lo haga cuando puedas. Frameworks como React escapan por defecto el texto que pintas, y el peligro aparece cuando se salta esa protección a propósito, por ejemplo con dangerouslySetInnerHTML.

Un detalle de seguridad al decodificar

Decodificar entidades parece inocente, pero el truco común en el navegador, asignar el texto a un elemento y leer lo que queda, interpreta el contenido como HTML real y puede ejecutar código. Por eso la herramienta decodifica con una tabla y expresiones regulares sobre texto, sin crear nunca elementos de la página con tu entrada. Si te interesa la parte de seguridad de pegar textos en sitios externos, mira por qué importa la privacidad al formatear JSON.

Preguntas frecuentes

¿Qué es una entidad HTML?

Una secuencia que empieza con & y termina con ; y representa un carácter, como &amp; para el ampersand o &lt; para el signo menor que. Se usa para mostrar caracteres que HTML interpretaría como código.

¿Qué caracteres hay que escapar siempre en HTML?

El ampersand, el signo menor que y el mayor que, y las comillas dobles y simples cuando van dentro de un atributo. Los acentos y la ñ no hacen falta en una página UTF-8.

¿Qué es &nbsp;?

Un espacio duro: un espacio que no se parte al final de la línea ni se colapsa con otros espacios.

¿Escapar HTML basta para evitar el XSS?

Es la base, pero depende del contexto. Dentro de un script o una URL se necesita otro tipo de escapado. Lo mejor es usar un framework que escape por defecto.

¿Para qué sirve el modo Escapes JS y JSON?

Para meter texto con saltos de línea, comillas o acentos dentro de una cadena de JavaScript o de JSON, convirtiéndolos en secuencias de escape.

¿Se envía mi texto a algún servidor?

No. Todo ocurre en tu navegador.

Codifica y decodifica entidades HTML

Solo lo imprescindible o todo lo no-ASCII, con nombre, decimal o hexadecimal. 100% local, gratis y sin registro.

Abrir Entidades HTML →

Herramientas relacionadas

También te puede interesar: 13 herramientas para developers que respetan tu privacidad, minificar HTML, CSS y JS y Formatear SQL, HTML y código minificado.