Escapar/Desescapar HTML
Convierte caracteres especiales como &, <, >, " y ' en entidades HTML (escapar), o convierte entidades de vuelta a sus caracteres originales (desescapar). Útil para prevenir XSS e insertar texto en HTML.
Entidades HTML con nombre más comunes
| Carácter | Entidad con nombre | Referencia numérica | Descripción |
|---|---|---|---|
| & | & | & | Ampersand (símbolo de "y") |
| < | < | < | Signo de menor que (igual al carácter de apertura de una etiqueta HTML) |
| > | > | > | Signo de mayor que (igual al carácter de cierre de una etiqueta HTML) |
| " | " | " | Comilla doble (delimitador de valores de atributo) |
| ' | ' | ' | Comilla simple (delimitador de valores de atributo) |
| |   | Espacio de no separación (un espacio que impide el salto de línea) | |
| © | © | © | Símbolo de copyright |
| ® | ® | ® | Símbolo de marca registrada |
| ™ | ™ | ™ | Símbolo de marca comercial |
| € | € | € | Símbolo del euro |
| ¥ | ¥ | ¥ | Símbolo del yen |
| ¢ | ¢ | ¢ | Símbolo del centavo |
Qué hace el escapado de HTML
El escapado de HTML convierte los cinco caracteres con significado especial en HTML —&, <, >, " y '— en formas de entidad que el navegador no interpretará como marcado. Insertar la entrada del usuario directamente en una página sin hacerlo puede romper la maquetación, porque < y > se confunden con el inicio y el fin de una etiqueta, y puede permitir que se ejecute código malicioso como <script>: la vulnerabilidad conocida como cross-site scripting o XSS. El escapado es la defensa básica frente a ella.
El desescapado es lo contrario: devuelve entidades con nombre como & y referencias numéricas como & a los caracteres que representan. Es lo que interesa cuando ha copiado código HTML de otro sitio, o cuando lee datos de publicaciones de un CMS o un foro y la forma de entidad dificulta ver el texto real. La conversión se ejecuta íntegramente en el JavaScript del navegador y lo que escriba no se envía a ninguna parte.
Cómo convertir el texto
- Elija el sentido Seleccione escapar para convertir caracteres en entidades, o desescapar para devolver las entidades a caracteres.
- Pegue el texto en el campo de entrada Introduzca la cadena que quiere insertar en HTML, o bien la que contiene notación de entidades.
- Consulte el resultado convertido La salida inferior se actualiza en tiempo real mientras escribe y se recalcula cada vez que edita la entrada.
- Copie el resultado El botón de copiar lleva el texto convertido al portapapeles, listo para pegarlo en el cuerpo de un CMS o en el código fuente.
Consejos para aprovecharla mejor
- El escape de HTML es la base de la prevención de XSS (cross-site scripting). Escapa siempre la entrada del usuario antes de insertarla en HTML.
- El carácter
&siempre debe escaparse primero. Si conviertes otros caracteres antes, el&dentro del&recién generado quedará escapado dos veces. - Al insertar una cadena dentro de un valor de atributo, es más seguro escapar tanto
"(comilla doble) como'(comilla simple), no solo una de ellas. - Esta herramienta puede desescapar referencias numéricas decimales (
&), referencias numéricas hexadecimales (&) y las principales entidades con nombre (como&). - Muchos motores de plantillas (Blade, JSX, Vue, etc.) escapan automáticamente el HTML al interpolar variables, pero si usas una sintaxis de "salida HTML sin procesar" como
{!! !!}o v-html, deberás escapar el valor tú mismo.
Cuándo resulta útil escapar
Citar código en un CMS o en una entrada de blog
Pegar tal cual una cadena con < o > en el cuerpo de un artículo hace que el navegador la lea como etiqueta y la presentación se rompa. Escaparla antes permite mostrarla sin problemas.
Leer publicaciones de un foro o de comentarios
Cuando las publicaciones están guardadas en la base de datos todavía en forma de entidad, desescaparlas restituye el texto original y lo hace legible.
Insertar fragmentos de HTML dentro de Markdown
Para mostrar etiquetas de muestra o código dentro de un documento Markdown, escaparlos antes evita que el analizador de Markdown y el navegador los interpreten como marcado.
Depurar una plantilla HTML
Útil para contrastar el antes y el después cuando investiga dónde un motor de plantillas ha escapado algo sin querer, o directamente no lo ha escapado.
Términos del escapado de HTML
- Entidad HTML (referencia de carácter)
- Notación para mostrar con seguridad un carácter con significado especial dentro de un documento HTML. La forma con nombre empieza por el símbolo & y termina en punto y coma, como
&. - Referencia numérica de carácter
- Notación que indica un carácter por su punto de código Unicode. En decimal se escribe
&y en hexadecimal&; ambas denotan el mismo carácter. - Cross-site scripting (XSS)
- Vulnerabilidad en la que un script contenido en la entrada del usuario se inserta sin escapar en una página y ejecuta código no previsto en el navegador de otros visitantes. El escapado de HTML es la defensa clásica.
- Saneamiento (sanitizado)
- Práctica general de eliminar elementos peligrosos de los datos recibidos del exterior o de convertirlos en una forma inocua. El escapado de HTML es una modalidad de saneamiento.
- Escapar primero el ampersand
- El símbolo & debe convertirse antes que ningún otro. Si se convierten primero los demás caracteres, los ampersands de las entidades recién generadas, como
&, se escapan por segunda vez: de ahí que el orden importe. - Delimitadores de valor de atributo
- Las comillas dobles y simples que encierran el valor de un atributo en una etiqueta HTML. Si uno de esos caracteres aparece dentro del valor sin escapar, se confunde con el final del atributo.
Preguntas frecuentes
<, > y &— son especiales porque los analizadores de HTML los interpretan como parte de la propia sintaxis. Si no se escapan, el navegador puede confundirlos con el inicio o el fin de una etiqueta, lo que puede provocar diseños rotos o XSS (inyección de scripts maliciosos).&, <, >, " y '. Los caracteres no ASCII, como los emojis o textos en otros idiomas, se muestran de forma segura tal cual en los entornos UTF-8 modernos, por lo que no necesitan conversión.
A propósito — El mecanismo de "referencias de caracteres" heredado de SGML
El origen de las entidades HTML (referencias de caracteres) se remonta a SGML (Standard Generalized Markup Language), el predecesor de HTML. SGML, estandarizado en 1986, ya contaba con un mecanismo de "referencia de caracteres" para poder usar el carácter delimitador de etiquetas < dentro del propio texto. HTML heredó este mecanismo casi sin cambios, y entidades básicas con nombre como <, > y & ya estaban definidas en las primeras especificaciones de HTML durante la década de 1990.
Las entidades con nombre se valoraron originalmente como una forma de mostrar símbolos especiales de imprenta (como el símbolo de copyright ©, el de marca registrada ® y varias letras griegas) en entornos ASCII, antes de que Unicode se extendiera. La especificación HTML5 llegó a definir más de 2000 entidades con nombre, cubriendo incluso símbolos menores como marcas de verificación y notas musicales.
Hoy en día, la difusión de la codificación UTF-8 ha reducido enormemente la necesidad de referencias de caracteres para evitar texto ilegible. Sin embargo, tres caracteres —<, > y &— todavía requieren escape por una razón completamente distinta. Tienen un significado sintáctico especial para los analizadores de HTML (el inicio de una etiqueta, el final de una etiqueta y el inicio de una entidad), por lo que no escaparlos puede provocar directamente diseños rotos o vulnerabilidades de XSS.