쿼리 문자열 매개변수를 올바르게 인코딩하기
이 도구에는 두 가지 모드가 있습니다. '구성요소'(encodeURIComponent)는 매개변수 이름이나 값 하나에, '전체 URL'(encodeURI)은 구조가 이미 올바른 완전한 URL에 사용합니다. 둘을 혼동하는 것이 쿼리 문자열이 깨지는 가장 흔한 원인입니다.
계산 예시
'전체 URL' 모드는 값 안의 &를 그대로 두어 서버가 매개변수를 하나가 아닌 두 개로 읽습니다.
- 입력
- https://example.com/search?q=salt & pepper&page=2
- 결과 ·
encodeURI() - https://example.com/search?q=salt%20&%20pepper&page=2
서버가 읽는 매개변수
- "q" = "salt "
- " pepper" = ""
- "page" = "2"
값을 먼저 '구성요소' 모드로 인코딩하면 하나의 매개변수로 유지됩니다.
- 입력
- salt & pepper
- 결과 ·
encodeURIComponent() - salt%20%26%20pepper
https://example.com/search?q=salt%20%26%20pepper&page=2
서버가 읽는 매개변수
- "q" = "salt & pepper"
- "page" = "2"
'구성요소'와 '전체 URL' 모드 문자별 비교
| 문자 | 구성요소 | 전체 URL |
|---|---|---|
| : | %3A | : |
| / | %2F | / |
| ? | %3F | ? |
| # | %23 | # |
| & | %26 | & |
| = | %3D | = |
| + | %2B | + |
| ␠ | %20 | %20 |
| é | %C3%A9 | %C3%A9 |
도구의 처리 방식
- 각 매개변수 이름과 값을 '구성요소' 모드로 따로 인코딩하세요. 이 모드는 & = ? # + /를 이스케이프합니다.
- 인코딩한 쌍을 이름=값 형태로 &로 연결하고, 그 결과를 URL의 ? 뒤에 붙이세요.
- '전체 URL' 모드는 URL 전체에만 사용하세요. : / ? # & = +를 그대로 두므로 이런 문자가 들어 있는 값은 보호하지 못합니다.