Los cinco caracteres que rompen el HTML
El HTML da significado especial a un puñado de caracteres, así que ponerlos en una página tal cual rompe el renderizado o abre un agujero de seguridad. Codificarlos los reemplaza por entidades con nombre que el navegador muestra literalmente:
| Carácter | Entidad | Papel en HTML |
|---|---|---|
& | & | Inicia toda entidad; debe codificarse siempre primero |
< | < | Abre una etiqueta |
> | > | Cierra una etiqueta |
" | " | Delimita valores de atributos |
' | ' | Delimita valores de atributos (con comillas simples) |
Ejemplo: <div class="hello">World & "Friends"</div> se codifica como <div class="hello">World & "Friends"</div>; pega eso en una página y el navegador muestra el marcado como texto en lugar de renderizar un div.
Modos de codificar y decodificar
Cambia de modo con el interruptor de arriba; la conversión ocurre en vivo a medida que escribes. Codificar reemplaza los cinco caracteres especiales de arriba. Decodificar es más general: resuelve cualquier entidad que el navegador conozca (con nombre , ©, é, decimal é y hexadecimal é), así que limpia de una pasada el texto plagado de entidades extraído de páginas web o exportaciones de CMS.
Por qué importa: mostrar código y prevenir XSS
- Mostrar código en una página: para enseñar un fragmento de HTML en una entrada de blog o documentación, debe codificarse en entidades; si no, el navegador lo renderiza en lugar de mostrarlo.
- Prevención de XSS: la entrada de usuario reflejada en HTML sin codificar permite a un atacante inyectar etiquetas
<script>. Codificar en la salida convierte el ataque en texto visible inofensivo. Es la regla de escapado de salida más importante del desarrollo web. - Arreglar texto doblemente codificado: si ves
&lt;en la salida renderizada, el texto se codificó dos veces. Pásalo por decodificar hasta que se estabilice.
Codificación de HTML frente a codificación de URL
Resuelven problemas distintos y no son intercambiables: las entidades HTML hacen el texto seguro dentro del marcado; la codificación porcentual lo hace seguro dentro de las URL. Un valor que va en la cadena de consulta del href de un enlace necesita el codificador de URL; el texto visible del enlace necesita esta herramienta. Todo aquí corre por completo en tu navegador: nada de lo que pegas se envía a un servidor. También útil junto a esto: el conversor de Markdown a HTML para generar marcado y la herramienta Base64 para data URIs.