O Que É Codificação de Entidade HTML?

A codificação de entidade HTML é uma técnica que substitui caracteres especiais em HTML pelas suas referências de entidade correspondentes. Quando escreve HTML, certos caracteres têm significados especiais: < inicia uma tag, > termina uma tag, & inicia uma entidade, e " e ' delimitam valores de atributos. Se quiser exibir estes caracteres literalmente na sua página web sem que sejam interpretados como código HTML, deve usar a codificação de entidade.

O navegador renderiza as referências de entidade como os caracteres correspondentes sem as interpretar como marcação. Este mecanismo é fundamental para o desenvolvimento web, desempenhando um papel crítico tanto na exibição de conteúdo quanto na segurança. Sem codificação de entidade, cada sinal de menor em conteúdo gerado por utilizadores seria tratado como HTML, potencialmente quebrando layouts de página ou criando graves vulnerabilidades de segurança.

Por Que a Codificação de Entidade HTML é Importante

A codificação de entidade HTML serve dois propósitos principais: renderização correta de caracteres especiais e prevenção de ataques de cross-site scripting (XSS). Quando usa entidades como < em vez de <, o navegador exibe um sinal de menor em vez de interpretá-lo como o início de uma tag HTML.

O cenário mais comum onde isto é importante é o conteúdo gerado por utilizadores. Se a sua aplicação aceita comentários, publicações em fóruns ou descrições de perfil, deve codificar a saída antes de a renderizar em HTML. Sem codificação, um utilizador poderia submeter <script>alert('xss')</script> e o navegador executá-lo-ia como JavaScript, dando ao atacante controlo sobre o que é executado nos navegadores dos seus visitantes.

Referência de Entidades HTML Comuns

Como Funciona a Codificação

Quando um analisador HTML encontra <, reconhece o & como o início de uma referência de entidade. Depois lê o nome da entidade lt e termina no ponto e vírgula. O analisador procura lt na sua tabela de entidades e substitui o caractere correspondente < na saída renderizada.

As referências numéricas de caracteres funcionam de forma semelhante mas usam valores decimais (<) ou hexadecimais (<). O analisador converte o valor numérico para o ponto de código Unicode correspondente. As referências numéricas podem representar qualquer caractere Unicode, enquanto as entidades nomeadas cobrem apenas um subconjunto de caracteres frequentemente usados.

Codificar Entrada de Utilizador

A regra mais importante no desenvolvimento web é codificar todo o conteúdo gerado por utilizadores antes de o renderizar em HTML. Isto é conhecido como codificação de saída contextual e deve ser aplicada no ponto onde os dados saem da sua aplicação e entram no contexto HTML.

Exemplo PHP

$userInput = '<script>alert("xss")</script>';
$safe = htmlspecialchars($userInput, ENT_QUOTES | ENT_HTML5, 'UTF-8');
echo $safe;
// Output: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;

Exemplo JavaScript

function encodeHtml(str) {
  const div = document.createElement('div');
  div.appendChild(document.createTextNode(str));
  return div.innerHTML;
}

const userInput = '<script>alert("xss")</script>';
console.log(encodeHtml(userInput));
// Output: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;

Exemplo Python

import html

user_input = '<script>alert("xss")</script>'
safe = html.escape(user_input, quote=True)
print(safe)
# Output: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;

Exemplo Ruby

require 'erb'

user_input = '<script>alert("xss")</script>'
safe = ERB::Util.html_escape(user_input)
puts safe
# Output: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;

Contextos de Codificação

A codificação HTML não serve para todos os contextos. Diferentes contextos num documento HTML requerem diferentes estratégias de codificação.

Contexto do corpo HTML — conteúdo entre tags como <div>conteúdo</div>. Codifique todos os cinco caracteres: <, >, &, ", '.

Contexto de atributo HTML — valores dentro de atributos como <div class="valor">. Codifique os mesmos cinco caracteres, mas preste atenção especial às aspas, pois delimitam valores de atributos.

Contexto de URL — URLs em atributos href ou src. Use codificação URL (%20 para espaços) em vez de codificação de entidade HTML.

Contexto JavaScript — dados embutidos em blocos <script>. Use escaping de strings JavaScript (\x3C para <) em vez de codificação de entidade HTML.

Ferramenta Online

A ferramenta HTML Entity Encoder & Decoder no Help2Code facilita a codificação e descodificação de entidades HTML. Cole o seu texto, escolha o modo de codificar ou descodificar, e copie o resultado com um clique. Esta é a forma mais rápida de converter caracteres especiais quando não está a escrever código de produção.

Segurança: Prevenindo XSS

Cross-site scripting continua a ser uma das vulnerabilidades de segurança web mais comuns. A principal defesa é a codificação de saída adequada. Todos os frameworks incluem funções de codificação embutidas: Blade no Laravel usa {{ $var }} que codifica automaticamente a saída, Twig usa {{ var|e('html') }}, e o React escapa automaticamente expressões JSX.

O erro mais comum na prevenção de XSS é codificar dados no ponto errado do seu pipeline. Codifique sempre na camada de saída, imediatamente antes de os dados serem renderizados. Se codificar dados quando são armazenados na base de dados, corre o risco de dupla codificação ou de codificar dados que serão usados em contextos não HTML como APIs JSON ou templates de email.

Conclusão

A codificação de entidade HTML é uma competência fundamental para todo o desenvolvedor web. Garante que caracteres especiais são exibidos corretamente e protege os seus utilizadores contra ataques XSS. A regra principal é simples: codifique todo o conteúdo gerado por utilizadores antes de o renderizar em HTML. Use a ferramenta HTML Entity Encoder & Decoder para conversões rápidas, e confie na codificação embutida do seu framework para código de produção.