Os Cinco Carateres Que Partem o HTML
O HTML dá significado especial a um punhado de carateres, por isso colocá-los numa página tal como estão ou parte a renderização ou abre uma falha de segurança. Codificar substitui-os por entidades nomeadas que o navegador exibe literalmente:
| Carater | Entidade | Papel no HTML |
|---|---|---|
& | & | Inicia todas as entidades — tem de ser sempre codificado primeiro |
< | < | Abre uma etiqueta |
> | > | Fecha uma etiqueta |
" | " | Delimita valores de atributos |
' | ' | Delimita valores de atributos (com aspas simples) |
Exemplo: <div class="hello">World & "Friends"</div> codifica para <div class="hello">World & "Friends"</div> — cole isso numa página e o navegador mostra a marcação como texto em vez de renderizar um div.
Modos Codificar e Descodificar
Alterne os modos com o botão no topo; a conversão acontece ao vivo à medida que escreve. Codificar substitui os cinco carateres especiais acima. Descodificar é mais geral: resolve qualquer entidade que o navegador conheça — nomeada ( , ©, é), decimal (é) e hexadecimal (é) — por isso limpa texto cheio de entidades extraído de páginas web ou exportações de CMS de uma só vez.
Porque Isto Importa: Mostrar Código e Prevenir XSS
- Mostrar código numa página: para exibir um trecho de HTML num artigo de blogue ou na documentação, tem de ser codificado em entidades, caso contrário o navegador renderiza-o em vez de o mostrar.
- Prevenção de XSS: entrada de utilizador ecoada em HTML sem codificação deixa um atacante injetar etiquetas
<script>. Codificar na saída transforma o ataque em texto visível inofensivo. É a regra de escape de saída mais importante do desenvolvimento web. - Corrigir texto duplamente codificado: se vir
&lt;na saída renderizada, o texto foi codificado duas vezes. Passe-o por descodificar até estabilizar.
Codificação HTML vs. Codificação de URL
Resolvem problemas diferentes e não são intermutáveis: as entidades HTML tornam o texto seguro dentro de marcação; a codificação percentual torna o texto seguro dentro de URLs. Um valor que vai para a string de consulta do href de uma ligação precisa do codificador de URL; o texto visível da ligação precisa desta ferramenta. Tudo aqui corre inteiramente no seu navegador — nada do que cola é enviado para um servidor. Também útil em conjunto: o conversor de Markdown para HTML para gerar marcação e a ferramenta Base64 para data URIs.