Codificação percent-encoding em URLs: o que %20, + e %2F realmente significam

A codificação percent-encoding escreve um caractere que a URL não consegue carregar com segurança como um sinal de porcentagem seguido do valor do byte em hexadecimal. Um espaço vira %20, um e comercial vira %26 e uma barra vira %2F. A codificação protege a estrutura de um link, porque caracteres como & e = separam as partes de uma query string.

Codificar e decodificar URLA URL está cheia de códigos %20Use de graça

Quais caracteres podem ficar como estão

A norma URI (RFC 3986), na qual as URLs se baseiam, deixa alguns caracteres de fora: as letras de A a Z e de a a z, os dígitos e os quatro sinais - _ . ~. Esses nunca precisam ser codificados. Outros caracteres têm uma função em uma URL. Os dois-pontos separam o esquema do restante, a barra separa os trechos do caminho, o ponto de interrogação inicia a query, a cerquilha inicia um fragmento, e & e = dividem a query em nomes e valores. Um caractere que tem função precisa ser codificado quando você quer usá-lo como dado, e não como estrutura.

Por isso o mesmo caractere pode ser codificado em um lugar e em outro não. Em um valor de query, o e comercial precisa ser %26, senão o link se divide no lugar errado. No caminho de um link, ele é apenas um caractere.

Letras fora do inglês básico

Letras que não estão no inglês básico são codificadas com seus bytes UTF-8, e cada byte é escrito como um código de porcentagem. O é de café são os dois bytes C3 e A9, então vira %C3%A9, e a palavra inteira fica caf%C3%A9.

Um exemplo simples deixa as regras concretas. O texto a b&c=d/é, codificado como componente, vira a%20b%26c%3Dd%2F%C3%A9. Todo caractere que não é uma letra, dígito ou sinal seguro é codificado: o espaço, o e comercial, o sinal de igual, a barra e a letra acentuada.

Componente ou URL inteira

Existem dois tipos de codificação, cada um com seu motivo. A codificação de componente trata todo caractere reservado como dado. Use-a para um único valor, como um termo de busca ou um nome de arquivo dentro de um link. Codificar "rock & roll" como termo de busca resulta em rock%20%26%20roll, então o e comercial fica dentro do valor.

A codificação de URL inteira mantém a estrutura. Codificar https://example.com/a b resulta em https://example.com/a%20b, com as barras e os dois-pontos preservados. Use-a para um endereço completo que precisa ser tornado válido, e não para um valor que vai dentro de um link.

A ferramenta de URL tem as opções Component e Full URL por esse motivo. A decodificação de URL completa também mantém caracteres estruturais escapados, como %26 e %3D, para que o link continue funcionando depois de decodificado.

Sinais de mais e dados de formulário

Formulários web usam outra convenção. Quando um formulário é enviado como dados de formulário, o espaço é escrito como + em vez de %20. Um sinal de mais literal, então, é escrito como %2B. Assim, a expressão C++ tips vira C%2B%2B+tips em dados de formulário, e C%2B%2B%20tips em uma codificação de componente comum.

A decodificação tem a mesma diferença. Em uma query string, + normalmente significa espaço. No caminho de um link, + é um sinal de mais. A ferramenta lê + como espaço somente quando Use + for spaces (form data) está marcado, então deixe desmarcado para caminhos e para valores em que o sinal de mais é real.

Como ler uma query string longa

Um link muitas vezes carrega suas configurações depois do ponto de interrogação. Veja este exemplo:

https://shop.example/search?q=red%20shirt&size=M&tag=summer%2Bsale

Decodificado, ele diz que a busca é por red shirt, o tamanho é M e a tag é summer+sale. O %2B continua sendo um sinal de mais porque foi codificado. Cole o link na ferramenta de URL e ela lista cada nome e valor depois da decodificação, o que facilita a leitura de um link longo. Se você quer apenas o endereço mais curto, sem as configurações de rastreamento, limpe o link primeiro.

Codificação dupla

O erro mais comum é codificar um valor duas vezes. Codificar de novo o texto %20 resulta em %2520, porque o próprio sinal de porcentagem é codificado como %25. A página então procura um %20 literal no valor, e a busca ou a página não encontra correspondência. Decodifique o link uma vez, confira o resultado e codifique um valor somente quando precisar.

Escapes quebrados

Um sinal de porcentagem precisa ser seguido de dois dígitos hexadecimais, e os dígitos precisam formar UTF-8 válido para letras acentuadas. Um link que foi cortado, ou um sinal de porcentagem solto digitado em um texto, pode deixar um escape quebrado como %E0%A4%A. A ferramenta decodifica o que consegue, mantém os bytes quebrados exatamente como estão e informa quantos não conseguiu decodificar. Ela não para no primeiro erro.

Casos especiais

• Espaços em um link digitado à mão. A barra de endereços do navegador codifica os espaços para você, mas um link copiado para um documento ainda pode conter espaços crus. Codifique-os antes de enviar o link adiante.
• Nomes de domínio fora do inglês. Eles usam um sistema separado, o punycode, e codificar o caminho ou a query não muda o nome do host.
• Metade de um emoji. Uma cópia quebrada pode deixar apenas uma metade de par substituto, que não pode ser codificada. A ferramenta a substitui pelo símbolo de substituição e avisa que fez isso.
• Base64 em links. Um valor Base64 em um link segue suas próprias regras, com - e _ no lugar de + e /. Veja Base64 explicado.

Como fazer com o fixmint

1. Cole o texto ou o link em Text or URL.
2. Escolha Encode ou Decode, depois Component para um valor, ou Full URL para um endereço completo.
3. Marque Use + for spaces (form data) para links copiados de um formulário web.
4. Para um link, leia Query parameters, decoded para ver cada nome e valor.
5. Copie o resultado.

Respostas rápidas

O que significa %20?

Um espaço. Seu valor em byte é 20 em hexadecimal.

Por que há um + no meu link em vez de %20?

O link provavelmente veio de um formulário, onde + representa um espaço. A opção "Use + for spaces (form data)" decodifica isso.

Por que vejo %2520 no meu link?

O valor foi codificado duas vezes. O sinal de porcentagem de %20 foi codificado de novo como %25. Decodifique uma vez para voltar a %20, e mais uma vez para obter o espaço.