Codificação de URL vs. Codificação Base64: Qual é a Diferença?

O que é a Codificação de URL?

A codificação de URL, também chamada de percent-encoding, é definida pela RFC 3986 como o mecanismo para representar caracteres em uma URI que não são permitidos ou que têm significado especial. Cada caractere a ser codificado é convertido em um ou mais bytes (usando UTF-8), e cada byte é representado por um sinal de porcentagem (%) seguido de dois dígitos hexadecimais em maiúsculas.

Por exemplo, um caractere de espaço se torna %20, um e comercial se torna %26, e um caractere não-ASCII como o símbolo do Euro se torna %E2%82%AC (três bytes UTF-8, cada um codificado em percent-encoding).

// Exemplos de codificação de URL em JavaScript
encodeURIComponent('hello world');   // "hello%20world"
encodeURIComponent('price=10&qty=2'); // "price%3D10%26qty%3D2"
encodeURIComponent('cafe');         // "caf%C3%A9"

A codificação de URL foi projetada especificamente para tornar as URLs seguras e válidas. Ela codifica apenas os caracteres que não são permitidos ou que têm significados reservados em URIs, deixando intactos os caracteres alfanuméricos e alguns símbolos seguros.

O que é a Codificação Base64?

A codificação Base64, definida pela RFC 4648, é um esquema de codificação de binário para texto que representa dados binários usando um conjunto de 64 caracteres ASCII: A-Z, a-z, 0-9, + e /, com = usado para preenchimento (padding). A cada três bytes de entrada são produzidos quatro caracteres de saída.

O Base64 foi projetado para transmitir dados binários por canais que só oferecem suporte confiável a texto, como e-mail (MIME) ou incorporação de dados em XML/JSON. Ele não é específico de URLs e codifica todos os bytes de entrada, não apenas os caracteres especiais.

// Exemplos de codificação Base64 em JavaScript
btoa('hello world');         // "aGVsbG8gd29ybGQ="
btoa('price=10&qty=2');      // "cHJpY2U9MTAmcXR5PTI="

// Para strings Unicode, converta primeiro para UTF-8
function toBase64(str) {
  return btoa(unescape(encodeURIComponent(str)));
}
toBase64('cafe');           // "Y2Fmw6k="

Também existe uma variante do Base64 segura para URLs (Base64url) que substitui + por - e / por _, e frequentemente omite o preenchimento =. Essa variante é usada em JWTs, data URIs em URLs e outros contextos onde os caracteres do Base64 padrão entrariam em conflito com a sintaxe de URL.

Principais Diferenças

Característica	Codificação de URL	Codificação Base64
Padrão	RFC 3986	RFC 4648
Propósito	Tornar URLs seguras	Representar binário como texto
Codifica	Apenas caracteres especiais/reservados	Todos os bytes de entrada
Formato de saída	Sequências hexadecimais %XX	A-Z, a-z, 0-9, +, /, =
Aumento de tamanho	Variável (só crescem os caracteres codificados)	Sempre ~33% maior
Reversível	Sim	Sim
Legível por humanos	Parcialmente (caracteres não reservados permanecem)	Não
Segura para URL por padrão	Sim (por projeto)	Não (contém +, /, =)

Quando Usar Cada Uma

Use a codificação de URL quando você precisar incluir caracteres especiais em uma URL, como valores de parâmetros de consulta, segmentos de caminho ou identificadores de fragmento. A codificação de URL é a escolha correta para qualquer situação em que os dados precisem ser incorporados dentro de uma estrutura de URL.

Use a codificação Base64 quando você precisar representar dados binários (imagens, arquivos, payloads criptografados) como texto, incorporar conteúdo binário em JSON ou XML, ou transmitir dados por canais que só aceitam texto. O Base64 também é usado em cabeçalhos de HTTP Basic Authentication e em JSON Web Tokens (JWTs).

// Codificação de URL: incorporando um termo de busca em uma URL
const searchUrl = 'https://example.com/search?q=' +
  encodeURIComponent('C++ & Java');
// "https://example.com/search?q=C%2B%2B%20%26%20Java"

// Base64: incorporando uma imagem em CSS ou HTML
const imageData = 'data:image/png;base64,iVBORw0KGgoAAAANS...';

// Base64: cabeçalho de HTTP Basic Auth
const credentials = btoa('username:password');
const header = 'Authorization: Basic ' + credentials;

É Possível Combiná-las?

Sim, e em alguns casos você precisa combiná-las. Se você precisar passar dados codificados em Base64 como um parâmetro de URL, a saída padrão do Base64 pode conter os caracteres +, / e =, que têm significados especiais em URLs. Você tem duas opções:

Opção 1: Aplique a codificação de URL à string Base64 antes de colocá-la na URL. O + se torna %2B, o / se torna %2F e o = se torna %3D.

Opção 2: Use a variante Base64url (RFC 4648, Seção 5), que substitui + por -, / por _ e remove o preenchimento. Essa é a abordagem usada por JWTs e por muitas APIs modernas.

// Opção 1: aplicar codificação de URL ao Base64 padrão
const base64 = btoa('binary data here'); // "YmluYXJ5IGRhdGEgaGVyZQ=="
const urlSafe = encodeURIComponent(base64);
// "YmluYXJ5IGRhdGEgaGVyZQ%3D%3D"

// Opção 2: codificação Base64url
function toBase64url(str) {
  return btoa(str)
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
}
toBase64url('binary data here');
// "YmluYXJ5IGRhdGEgaGVyZQ"