Escapar/Desescapar HTML
Converte caracteres especiais como &, <, >, " e ' em entidades HTML (escapar), ou converte entidades de volta aos caracteres originais (desescapar). Útil para prevenir XSS e inserir texto em HTML.
Principais entidades HTML nomeadas
| Caractere | Entidade nomeada | Referência numérica | Descrição |
|---|---|---|---|
| & | & | & | E comercial (símbolo de "e") |
| < | < | < | Sinal de menor que (igual ao caractere de abertura de uma tag HTML) |
| > | > | > | Sinal de maior que (igual ao caractere de fechamento de uma tag HTML) |
| " | " | " | Aspas duplas (delimitador de valores de atributo) |
| ' | ' | ' | Aspa simples (delimitador de valores de atributo) |
| |   | Espaço inseparável (um espaço que impede a quebra de linha) | |
| © | © | © | Símbolo de copyright |
| ® | ® | ® | Símbolo de marca registrada |
| ™ | ™ | ™ | Símbolo de marca comercial |
| € | € | € | Símbolo do euro |
| ¥ | ¥ | ¥ | Símbolo do iene |
| ¢ | ¢ | ¢ | Símbolo de centavo |
O que o escape de HTML faz
O escape de HTML converte os cinco caracteres com significado especial em HTML — &, <, >, " e ' — em formas de entidade que o navegador não lerá como marcação. Inserir a entrada do usuário diretamente numa página sem isso pode quebrar o layout, porque < e > são confundidos com o início e o fim de uma tag, e pode permitir que código malicioso como <script> seja executado: a vulnerabilidade conhecida como cross-site scripting, ou XSS. O escape é a defesa básica contra ela.
O desescape é o inverso: devolve entidades nomeadas como & e referências numéricas como & aos caracteres que representam. É o que interessa quando você copiou código HTML de outro lugar, ou quando lê dados de publicações de um CMS ou fórum e a forma de entidade dificulta enxergar o texto real. A conversão roda inteiramente no JavaScript do navegador e o que você digitar não é enviado a lugar algum.
Como converter o texto
- Escolha o sentido Selecione escapar para transformar caracteres em entidades, ou desescapar para devolver as entidades a caracteres.
- Cole o texto no campo de entrada Informe a cadeia que quer inserir em HTML, ou aquela que contém notação de entidades.
- Confira o resultado convertido A saída abaixo é atualizada em tempo real enquanto você digita e recalculada sempre que você edita a entrada.
- Copie o resultado O botão de copiar leva o texto convertido para a área de transferência, pronto para colar no corpo de um CMS ou no código-fonte.
Dicas para aproveitar melhor
- O escape de HTML é a base da prevenção de XSS (cross-site scripting). Sempre escape a entrada do usuário antes de inseri-la no HTML.
- O caractere
&deve sempre ser escapado primeiro. Se você converter outros caracteres antes, o&dentro do&recém-gerado acabará sendo escapado duas vezes. - Ao inserir uma string dentro de um valor de atributo, é mais seguro escapar tanto
"(aspas duplas) quanto'(aspa simples), não apenas uma delas. - Esta ferramenta consegue desescapar referências numéricas decimais (
&), referências numéricas hexadecimais (&) e as principais entidades nomeadas (como&). - Muitos motores de template (Blade, JSX, Vue etc.) escapam o HTML automaticamente ao interpolar variáveis, mas se você usar uma sintaxe de "saída HTML bruta" como
{!! !!}ou v-html, precisará escapar o valor manualmente.
Quando escapar é útil
Citar código num CMS ou num post de blog
Colar tal como está uma cadeia com < ou > no corpo de um artigo faz o navegador lê-la como tag e a exibição quebra. Escapar antes permite mostrá-la sem problemas.
Ler publicações de um fórum ou de comentários
Quando as publicações estão guardadas no banco ainda em forma de entidade, desescapá-las restitui o texto original e o torna legível.
Inserir trechos de HTML dentro de Markdown
Para exibir tags de exemplo ou código dentro de um documento Markdown, escapá-los antes impede que o analisador de Markdown e o navegador os interpretem como marcação.
Depurar um modelo HTML
Útil para confrontar o antes e o depois quando você investiga onde um motor de modelos escapou algo sem querer, ou simplesmente não escapou.
Termos do escape de HTML
- Entidade HTML (referência de caractere)
- Notação para exibir com segurança um caractere com significado especial dentro de um documento HTML. A forma nomeada começa pelo símbolo & e termina em ponto e vírgula, como
&. - Referência numérica de caractere
- Notação que indica um caractere pelo seu ponto de código Unicode. Em decimal escreve-se
&e em hexadecimal&; ambas denotam o mesmo caractere. - Cross-site scripting (XSS)
- Vulnerabilidade em que um script contido na entrada do usuário é inserido sem escape numa página e executa código não previsto no navegador de outros visitantes. O escape de HTML é a defesa clássica.
- Sanitização
- Prática geral de remover elementos perigosos de dados recebidos de fora ou convertê-los numa forma inofensiva. O escape de HTML é uma modalidade de sanitização.
- Escapar primeiro o e comercial
- O símbolo & deve ser convertido antes de qualquer outro. Se os demais caracteres forem convertidos primeiro, os e comerciais das entidades recém-geradas, como
&, são escapados uma segunda vez: por isso a ordem importa. - Delimitadores de valor de atributo
- As aspas duplas e simples que envolvem o valor de um atributo numa tag HTML. Se um desses caracteres aparecer dentro do valor sem escape, é confundido com o fim do atributo.
Perguntas frequentes
<, > e & — são especiais porque os analisadores de HTML os interpretam como parte da própria sintaxe. Se não forem escapados, o navegador pode confundi-los com o início ou o fim de uma tag, o que pode causar layouts quebrados ou XSS (injeção de scripts maliciosos).&, <, >, " e '. Caracteres não ASCII, como emojis e textos em outros idiomas, são exibidos com segurança tal como estão em ambientes UTF-8 modernos, então não precisam de conversão.
Curiosidade — O mecanismo de "referências de caracteres" herdado do SGML
A origem das entidades HTML (referências de caracteres) remonta ao SGML (Standard Generalized Markup Language), o predecessor do HTML. O SGML, padronizado em 1986, já possuía um mecanismo de "referência de caractere" para permitir o uso do caractere delimitador de tags < dentro do próprio texto. O HTML herdou esse mecanismo quase sem alterações, e entidades nomeadas básicas como <, > e & já estavam definidas nas primeiras especificações do HTML, ainda na década de 1990.
As entidades nomeadas foram originalmente valorizadas como uma forma de exibir símbolos especiais de impressão (como o símbolo de copyright ©, o de marca registrada ® e diversas letras gregas) em ambientes ASCII, antes da popularização do Unicode. A especificação HTML5 chegou a definir mais de 2.000 entidades nomeadas, cobrindo até símbolos menores como marcas de verificação e notas musicais.
Hoje, a difusão da codificação UTF-8 reduziu bastante a necessidade de referências de caracteres para evitar texto corrompido. No entanto, três caracteres — <, > e & — ainda precisam ser escapados por um motivo completamente diferente. Eles têm um significado sintático especial para os analisadores de HTML (o início de uma tag, o fim de uma tag e o início de uma entidade), então deixar de escapá-los pode causar diretamente layouts quebrados ou vulnerabilidades de XSS.