O que é codificação de URL e por que precisamos dela?

Codificação de URL, também conhecida como percent-encoding, é um mecanismo fundamental para codificar informações em URLs. Se você já viu %20 ou %3F em um endereço web, encontrou codificação de URL em ação.

Por que a codificação de URL existe

URLs (Uniform Resource Locators) foram projetadas nos primeiros dias da internet com limitações estritas. Elas só podem conter um conjunto específico de caracteres ASCII:

• Letras: A-Z, a-z
• Números: 0-9
• Caracteres seguros: -, _, ., ~

Mas aqui está o problema: aplicações web precisam transmitir todos os tipos de dados através de URLs - incluindo espaços, símbolos especiais e caracteres de todos os idiomas humanos. A codificação de URL resolve esse desafio.

O problema que a codificação de URL resolve

Caracteres reservados têm significado especial

Certos caracteres em URLs têm propósitos específicos:

O que acontece sem codificação?

Imagine que você quer pesquisar "Tom & Jerry":

❌ Errado: example.com/search?q=Tom  & Jerry

O navegador interpreta & como separador de parâmetro, fazendo disso dois parâmetros:

• q=Tom (incompleto!)
• Jerry (o que é isso?)

Com codificação:

✅ Correto: example.com/search?q=Tom%20%26%20Jerry

Agora está claro: um parâmetro q com valor "Tom & Jerry".

Caracteres internacionais não são ASCII

O conjunto de caracteres ASCII original não inclui:

• Caracteres chineses: 中文
• Escrita árabe: العربية
• Emojis: 😀
• Letras acentuadas: café, naïve

A codificação de URL torna todos esses caracteres transmissíveis.

Como funciona a codificação de URL

O processo de codificação segue uma regra simples:

Substituir caracteres especiais por % seguido de dois dígitos hexadecimais representando o valor do caractere.

Codificações de caracteres comuns

Como funciona hexadecimal

Cada caractere tem um código ASCII. A representação hexadecimal (base-16) torna a codificação compacta:

Caractere espaço:
- Código ASCII: 32 (decimal)
- Hexadecimal: 20
- Codificado: %20

E comercial (&):
- Código ASCII: 38 (decimal)
- Hexadecimal: 26
- Codificado: %26

UTF-8 e caracteres internacionais

Para caracteres fora do ASCII (basicamente qualquer coisa que não seja inglês), a codificação de URL usa UTF-8:

1. Converter caractere para bytes UTF-8
2. Codificar cada byte como %XX

Exemplos

Caractere chinês "中":

Caractere: 中
Bytes UTF-8: E4 B8 AD (3 bytes)
Codificado: %E4%B8%AD

Emoji "😀":

Caractere: 😀
Bytes UTF-8: F0 9F 98 80 (4 bytes)
Codificado: %F0%9F%98%80

Isso torna cada caractere em cada idioma transmissível via URLs!

Casos de uso no mundo real

1. Consultas de pesquisa

Quando você pesquisa algo no Google:

O que você digita: "best coffee in tokyo"
O que a URL se torna: ?q=best%20coffee%20in%20tokyo

2. Envios de formulários

Formulários HTML com method="GET" codificam dados de formulário:

<form method="GET" action="/search">
  <input name="product" value="women's shoes" />
  <input name="size" value="7" />
</form>

Envia para: /search?product=women%27s%20shoes&size=7

3. Requisições de API

Construindo chamadas de API RESTful com parâmetros:

Original: /api/users?name=John Doe&[email protected]
Codificado: /api/users?name=John%20Doe&email=john%40example.com

4. Autenticação

URLs de redirecionamento OAuth frequentemente contêm URLs de callback codificadas:

/oauth/authorize?redirect_uri=https%3A%2F%2Fmyapp.com%2Fcallback

5. Links de compartilhamento

Botões de compartilhamento de mídia social codificam a URL sendo compartilhada:

https://twitter.com/intent/tweet?url=https%3A%2F%2Fexample.com%2Farticle&text=Check%20this%20out%21

Quando codificar

Sempre codifique:

✅ Entrada de usuário em parâmetros de consulta
✅ Dados de formulário com caracteres especiais
✅ Texto internacional (chinês, árabe, emojis, etc.)
✅ Caminhos de arquivo com espaços
✅ Endereços de e-mail em URLs
✅ Dados JSON em URLs

Geralmente não precisa codificar:

❌ O caminho em si (a menos que tenha caracteres especiais)
❌ O nome do domínio
❌ O protocolo (https://)
❌ Pontuação padrão sob seu controle

Como codificar URLs

JavaScript

// Para valores de parâmetros (mais comum)
const query = "hello world!";
const encoded = encodeURIComponent(query);
// Resultado: "hello%20world%21"

// Para URLs completas
const url = "https://example.com/search?q=hello world";
const encoded = encodeURI(url);
// Resultado: "https://example.com/search?q=hello%20world"

Python

from urllib.parse import quote, quote_plus

# Codificação padrão
text = "hello world!"
encoded = quote(text)  # 'hello%20world%21'

// Codificação com plus (para dados de formulário)
encoded = quote_plus(text)  # 'hello+world%21'

PHP

// Para valores de parâmetros
$query = "hello world!";
$encoded = urlencode($query);  // "hello+world%21"

// Para uso geral
$encoded = rawurlencode($query);  // "hello%20world%21"

Armadilhas comuns

1. Esquecer de codificar entrada de usuário

// ❌ Perigoso - quebra com caracteres especiais
const url = `/search?q=${userInput}`;

// ✅ Seguro - sempre codifique
const url = `/search?q=${encodeURIComponent(userInput)}`;

2. Codificação dupla

// ❌ Errado - codificando duas vezes
const text = "hello world";
const encoded = encodeURIComponent(encodeURIComponent(text));
// Resultado: "hello%2520world" (quebrado!)

// ✅ Correto - codifique uma vez
const encoded = encodeURIComponent(text);
// Resultado: "hello%20world"

3. Não decodificar após transmissão

// ❌ Errado - mostrando texto codificado aos usuários
console.log(params.get('name'));  // "John%20Doe"

// ✅ Correto - decodifique para exibição
console.log(decodeURIComponent(params.get('name')));  // "John Doe"

Melhores práticas

1. Sempre codifique entrada de usuário antes de colocá-la em URLs
2. Use funções integradas - não tente codificar manualmente
3. Escolha a função certa - encodeURIComponent() para parâmetros
4. Decodifique ao ler - não mostre %20 aos usuários
5. Teste com caracteres especiais - incluindo espaços, &, =, #
6. Teste com texto internacional - chinês, árabe, emojis
7. Não coloque dados sensíveis em URLs - mesmo codificados, são visíveis

Testando suas URLs

Quer experimentar com codificação de URL? Experimente estas ferramentas gratuitas:

• Codificador de URL - Codifique texto com segurança para URLs
• Decodificador de URL - Decodifique strings codificadas em porcentagem
• Analisador de URL - Visualize todos os componentes de uma URL

Conclusão

A codificação de URL é um conceito simples mas essencial para o desenvolvimento web. Ela garante que:

• Caracteres especiais não quebrem URLs
• Texto internacional pode ser transmitido
• Dados fluam com segurança entre cliente e servidor
• URLs funcionem consistentemente em todos os sistemas

Lembre-se: Em caso de dúvida, codifique! Suas URLs (e usuários) agradecerão.

---

Experimente nosso codificador de URL gratuito para codificar suas URLs instantaneamente, ou use o decodificador de URL para decodificar strings codificadas em porcentagem!