URL 인코딩: 완벽한 가이드

URL은 ASCII 텍스트용으로 설계되었으며 특별한 의미를 가진 예약 문자가 있습니다. ? 문자는 쿼리 문자열을 시작하고, &는 매개변수를 구분하며, =는 값을 할당하고, #는 프래그먼트를 표시합니다. 데이터에 이러한 문자가 포함되어 있으면 잘못 해석되지 않도록 인코딩해야 합니다.

"Tom & Jerry"를 검색하는 경우를 생각해 보세요. 인코딩하지 않으면 ?q=Tom & Jerry는 &를 매개변수 구분자로 처리하여 쿼리가 깨집니다. 올바르게 인코딩하면: ?q=Tom%20%26%20Jerry는 전체 문자열을 하나의 값으로 처리합니다.

ASCII가 아닌 문자도 인코딩해야 합니다. URL에는 ASCII만 포함할 수 있습니다. ü, 漢, و와 같은 국제 문자는 URL에 나타나려면 퍼센트 인코딩된 바이트가 되어야 합니다.

공백은 일반적인 특수 케이스입니다. %20으로 인코딩하거나 때로는 +(쿼리 문자열에서만)로 인코딩할 수 있습니다. 이러한 불일치는 자주 버그를 유발합니다. 가장 안정적인 호환성을 위해 %20을 사용하세요.

보안 영향이 중요합니다. URL에 인코딩되지 않은 사용자 입력이 있으면 XSS 취약점, 인젝션 공격 및 URL 조작이 가능해질 수 있습니다. URL에 배치된 사용자 생성 콘텐츠는 항상 인코딩하세요.

JavaScript는 서로 다른 동작을 가진 여러 URL 인코딩 함수를 제공합니다. 잘못된 것을 선택하면 URL이 깨지거나 보안 취약점이 노출됩니다.

encodeURIComponent()는 일반적으로 원하는 것입니다. A-Z a-z 0-9 - _ . ! ~ * ' ( )를 제외한 모든 것을 인코딩합니다. 매개변수 값에 사용하세요: '?name=' + encodeURIComponent(userInput).

encodeURI()는 완전한 URL을 인코딩하며 : / ? &와 같은 예약 문자를 인코딩하지 않은 채로 둡니다. 전체 URL에 사용하세요: encodeURI('https://example.com/path?q=test'). 그러나 예약 문자가 포함된 매개변수 값을 제대로 처리하지 못합니다.

중요한 차이점: encodeURI('a&b')는 'a&b'를 반환합니다(&가 남아 있음). encodeURIComponent('a&b')는 'a%26b'를 반환합니다(&가 인코딩됨). 대부분의 사용 사례에서 값에는 encodeURIComponent가 올바릅니다.

디코딩하려면 개별 값에는 decodeURIComponent()를 사용하고 완전한 URL에는 decodeURI()를 사용하세요.

레거시 함수 escape() 및 unescape()는 더 이상 사용되지 않으며 유니코드를 올바르게 처리하지 않습니다. 새 코드에서는 절대 사용하지 마세요.