Base64, codificação de URL e entidades HTML: o que todo desenvolvedor precisa saber
Se você desenvolve aplicações web há algum tempo, já deve ter esbarrado em problemas de codificação. Uma URL que quebra por causa de um & fora de lugar. Uma página HTML que exibe um < no lugar de uma tag. Uma API que devolve SGVsbG8gV29ybGQ= sem nenhuma explicação. São problemas de codificação — e três esquemas aparecem com muito mais frequência do que os demais: Base64, codificação de URL e entidades HTML.
Este guia explica o que cada um faz, com exemplos práticos, e indica ferramentas online para codificar e decodificar sem instalar nada.
O que é Base64?
Base64 é um método de representar dados binários usando apenas caracteres ASCII imprimíveis. Ele transforma qualquer sequência de bytes em um alfabeto de 64 caracteres: A–Z, a–z, 0–9, + e /. A saída é sempre texto, o que a torna segura para contextos que não suportam dados binários brutos — anexos de e-mail, payloads JSON, URLs data: em CSS e tokens JWT dependem de Base64.
Exemplo — codificar "Olá Mundo":
- Entrada:
Olá Mundo - Saída em Base64:
T2zDoSBNdW5kbw==
Os = no final são preenchimento de alinhamento. Base64 sempre produz uma saída cujo tamanho é múltiplo de 4.
Quando usar:
- Incorporar imagens ou fontes diretamente no CSS ou HTML (
data:image/png;base64,...) - Codificar dados binários para APIs JSON que só aceitam texto
- Ler ou gerar tokens JWT (o header e o payload são codificados em Base64url)
Base64 não é criptografia. Qualquer pessoa que veja a string pode decodificá-la em segundos. Use para codificação, não para esconder informações.
Experimente o codificador e decodificador Base64 da FileCrank.
O que é codificação de URL (codificação percentual)?
URLs só admitem com segurança um conjunto limitado de caracteres. Espaços, e-comerciais, sinais de igual, barras e caracteres não-ASCII têm significado estrutural em uma URL — ou simplesmente não são válidos. A codificação de URL (formalmente chamada de codificação percentual) substitui caracteres inseguros por um sinal % seguido de dois dígitos hexadecimais que representam o valor do byte UTF-8 do caractere.
Exemplo — codificar "Olá Mundo":
- Entrada:
Olá Mundo - Saída codificada:
Ol%C3%A1%20Mundo
O espaço vira %20. O ó acentuado vira %C3%B3. O & vira %26.
Quando usar:
- Construir query strings:
?q=ol%C3%A1%20mundo&idioma=pt - Passar caracteres especiais em dados de formulário
- Construir requisições de API que contêm dados fornecidos pelo usuário
O JavaScript moderno oferece encodeURIComponent() para isso, mas quando você precisa inspecionar ou depurar uma URL codificada, uma ferramenta online é mais rápida do que abrir o console.
Use o codificador e decodificador de URL da FileCrank.
O que são entidades HTML?
O HTML usa certos caracteres como elementos de sua sintaxe. Os ângulos < e > delimitam tags, o & inicia referências de entidades, e as aspas duplas " delimitam valores de atributos. Se o seu conteúdo contém esses caracteres de forma literal — por exemplo, para exibir código-fonte em uma página —, você precisa escapá-los para que o navegador não os interprete como marcação.
As entidades HTML substituem esses caracteres por referências com nome ou numéricas:
Exemplo — exibir uma tag HTML como texto:
Para exibir a string literal <h1>Olá Mundo</h1> como texto em uma página, escreve-se:
<h1>Olá Mundo</h1>
Quando usar:
- Exibir exemplos de código em documentação ou artigos
- Prevenir vulnerabilidades XSS escapando dados do usuário antes de inseri-los no HTML
- Inserir símbolos tipográficos (
—,©, )
Use a ferramenta de entidades HTML da FileCrank para escapar ou desescapar HTML em segundos.
Os três esquemas lado a lado
A mesma entrada processada por cada método:
Eles resolvem problemas diferentes e não são intercambiáveis:
- Base64 converte dados binários em texto. Use quando precisar incorporar dados binários em um contexto somente de texto.
- Codificação de URL trata caracteres inválidos ou ambíguos em uma URL. Use ao construir URLs ou query strings.
- Entidades HTML tratam caracteres reservados pela sintaxe HTML. Use ao gerar texto dentro de documentos HTML.
Erros comuns
Erro 1: Usar Base64 para segurança. A saída do Base64 parece ilegível, mas é trivialmente reversível. Não use para "esconder" senhas ou tokens. Use criptografia ou hash adequado.
Erro 2: Dupla codificação de URL.
Chamar encodeURIComponent() em uma string já codificada produz %2520 em vez de %20. Decodifique primeiro, depois codifique.
Erro 3: Esquecer de escapar HTML em templates. Inserir dados do usuário diretamente no HTML sem escapar é a principal causa de vulnerabilidades XSS. Sempre escape antes de renderizar.
Experimente as ferramentas
As três ferramentas são gratuitas, rodam inteiramente no navegador e não exigem cadastro:
Salve nos favoritos. Você vai usar pelo menos uma delas toda semana.