Como codificar corretamente os parâmetros da query string
A ferramenta tem dois modos. Componente (encodeURIComponent) serve para um nome ou valor de parâmetro; URL completa (encodeURI), para uma URL inteira cuja estrutura já está correta. Confundir os dois é a causa mais comum de query strings quebradas.
Exemplo prático
O modo URL completa mantém o & dentro do valor, então o servidor lê dois parâmetros em vez de um.
- Entrada
- https://example.com/search?q=salt & pepper&page=2
- Resultado ·
encodeURI() - https://example.com/search?q=salt%20&%20pepper&page=2
Parâmetros que o servidor lê
- "q" = "salt "
- " pepper" = ""
- "page" = "2"
Codificar antes o valor no modo Componente o mantém como um único parâmetro.
- Entrada
- salt & pepper
- Resultado ·
encodeURIComponent() - salt%20%26%20pepper
https://example.com/search?q=salt%20%26%20pepper&page=2
Parâmetros que o servidor lê
- "q" = "salt & pepper"
- "page" = "2"
Modo Componente x URL completa, caractere por caractere
| Caractere | Componente | URL completa |
|---|---|---|
| : | %3A | : |
| / | %2F | / |
| ? | %3F | ? |
| # | %23 | # |
| & | %26 | & |
| = | %3D | = |
| + | %2B | + |
| ␠ | %20 | %20 |
| é | %C3%A9 | %C3%A9 |
Como a ferramenta trata isso
- Codifique cada nome e valor de parâmetro separadamente no modo Componente, que escapa & = ? # + e /.
- Junte os pares codificados como nome=valor separados por & e acrescente o resultado após o ? da URL.
- Use o modo URL completa só em uma URL inteira: ele mantém : / ? # & = + intactos e, por isso, não protege um valor que os contenha.