URL 및 HTML 인코딩: 보다 안전한 웹 애플리케이션을 위한 실용 가이드

Source: Dev.to

인코딩은 깨진 링크와 교차 사이트 스크립팅(XSS)에 대한 가장 간단하고 효과적인 방어 수단 중 하나입니다. 이 가이드는 언제 URL 인코딩을 적용하고, 언제 HTML 엔티티 인코딩을 사용해야 하는지, 그리고 취약점을 초래하는 일반적인 함정을 어떻게 피할 수 있는지를 설명합니다.

인코딩이 중요한 이유

인코딩되지 않은 사용자 입력은 URL을 깨뜨리거나, 쿼리 파라미터를 손상시키거나, 브라우저에서 실행 가능한 코드로 해석될 수 있습니다. 적절한 인코딩은 데이터가 안전하게 전송되고 텍스트로 렌더링되도록 보장하며, 명령이 아니라 텍스트로 처리됩니다.

URL 인코딩 기본

• 안전하지 않은 문자를 퍼센트 인코딩된 바이트로 교체합니다(예: 공백 → %20).
• 쿼리 파라미터, 공백/UTF‑8이 포함된 경로 세그먼트, 파일명 등에 필수적입니다.
• 각 구성 요소를 개별적으로 인코딩하고, 전체 URL을 한 번에 이중 인코딩하지 않도록 합니다.

HTML 엔티티 인코딩

• ```, ", ', & 등을 안전한 엔티티로 변환하여 HTML에 사용자 콘텐츠를 렌더링할 때 사용합니다.
• 브라우저가 삽입된 마크업이나 스크립트를 해석하는 것을 방지합니다.
• 입력을 저장할 때가 아니라 렌더링 시점에 적용하여 영속성 문제를 피합니다.

개발자가 흔히 저지르는 실수

• 파라미터를 인코딩하지 않은 채 URL을 수동으로 연결한다.
• 전체 URL 문자열을 인코딩한 뒤 브라우저에서 다시 인코딩한다(이중 인코딩).
• 사용자 생성 HTML을 정제하거나 이스케이프하지 않고 그대로 렌더링한다.
• 컨텍스트를 혼동한다: JavaScript 문자열 이스케이프가 필요한데 HTML 인코딩을 사용한다.

컨텍스트에 맞는 이스케이프

출력 대상(싱크)에 맞게 이스케이프 방식을 선택합니다:

• HTML 텍스트 노드: HTML 엔티티 인코딩.
• HTML 속성: 따옴표를 인코딩하고, 가능하면 이중 따옴표와 HTML 엔티티를 사용한다.
• JavaScript 문자열: JS 문자열 이스케이프를 사용하고, 원시 사용자 입력을 스크립트에 직접 삽입하지 않는다.
• 속성 내 URL: 파라미터 부분만 인코딩하고, 허용되는 프로토콜(https, mailto)을 검증한다.

쿼리 문자열 안전하게 다루기

• 문자열 연결 대신 네이티브 API(URL, URLSearchParams)를 사용해 URL을 구성한다.
• 파라미터 화이트리스트를 검증하고, 예상치 못한 키는 제거한다.
• 저장하거나 로깅하기 전에 한 번만 케이스와 인코딩을 정규화한다.

인코딩과 검증으로 XSS 방지

• 출력 시 인코딩하고, 입력 시 검증한다. 두 가지 모두 필요하다.
• Content Security Policy(CSP)를 사용해 누락된 이스케이프의 영향을 최소화한다.
• 사용자 콘텐츠에 innerHTML 사용을 피하고, textContent 같은 텍스트 설정자를 선호한다.
• 템플릿 시스템은 보통 자동 이스케이프를 제공하므로, 이를 비활성화하지 않는다.

파일 업로드 및 다운로드 작업

• 다운로드 링크를 만들 때 파일명을 URL‑인코딩한다.
• 서버 측에서 파일명을 정제하고, 경로 탐색 시퀀스(../)를 차단한다.
• Content‑Disposition 헤더에 따옴표가 포함된 파일명과 UTF‑8 지원을 설정한다.

인코딩 문제 테스트 및 디버깅

• 개발자 도구에서 최종 렌더링된 HTML과 네트워크 요청을 확인한다.
• 콘솔에서 decodeURIComponent / encodeURIComponent를 사용해 기대값을 검증한다.
• url‑html‑encoder 도구를 이용해 원본, 인코딩, 디코딩 값을 나란히 비교하며 실수를 찾아낸다.

빠른 베스트 프랙티스

• 전체 URL이 아니라 파라미터만 인코딩하고, 이중 인코딩을 피한다.
• 올바른 컨텍스트(HTML, 속성, JS 문자열, URL)에서 출력 이스케이프를 수행한다.
• 사용자 제공 링크에 대해 프로토콜 스킴을 검증한다.
• 프레임워크의 기본 이스케이프 설정을 활용하고, 이를 비활성화하지 않는다.

관련 도구: url-html-encoder를 사용해 파라미터와 HTML 엔티티를 안전하게 인코딩하고, 배포 전에 엣지 케이스를 테스트한다. 올바른 인코딩은 작은 단계이지만 주요 보안 문제를 예방한다.

원본은 padawanabhi.de에서 처음 게시되었습니다.