URL 파서 — URL 구성 요소 분석 및 재구성 (온라인)

행정안전부 공공데이터포털(data.go.kr)의 API 엔드포인트는 serviceKey, numOfRows, pageNo 등 다양한 쿼리 파라미터를 포함합니다. 개인정보보호위원회가 시행하는 개인정보 보호법에 따라 go.kr 포털의 추적 파라미터 감사가 의무화되면서, 담당자들이 URL 구조를 수동으로 검사해야 하는 일이 잦아졌습니다. KrCERT/CC의 피싱 URL 분석 워크플로에서도 의심스러운 링크를 구성 요소별로 분해하여 리디렉션 체인과 숨겨진 쿼리 값을 확인하는 작업이 핵심입니다. 이 파서는 WHATWG URL 표준을 사용하므로 브라우저, Node.js, 서버측 스크립트가 보는 것과 동일한 결과를 제공합니다.

전체 URL (href)
프로토콜
사용자 이름
비밀번호
호스트
호스트 이름
포트
경로명
검색 (원본)
해시 (프래그먼트)
출처

URL 파싱 동작 원리

파서는 WHATWG URL 표준을 사용합니다. 브라우저가 모든 href에 적용하는 것과 동일한 알고리즘입니다. 문자열을 네이티브 URL 생성자에 전달하고 각 구성 요소를 속성으로 읽어옵니다.

입력 유효성 검사. 빈 문자열이 입력되면 빈 입력 안내가 표시됩니다. 그 외에는 new URL(text)에 텍스트를 전달하며, TypeError가 발생하면 올바른 절대 URL이 아닌 것입니다.
구조 구성 요소 읽기. URL 객체에서 protocol, username, password, host, hostname, port, pathname, search, hash, origin을 읽습니다. 각 항목은 개별 행에 표시되어 따로 복사할 수 있습니다.
쿼리 문자열 순회. url.searchParams.entries()를 반복하여 키별로 테이블 행을 렌더링합니다. 원본 값 옆에 decodeURIComponent(value)가 표시되어 퍼센트 인코딩된 값(공백, 플러스 기호, 유니코드)을 읽기 쉽게 보여줍니다.
필요 시 재구성. 셀을 편집하거나 행을 삭제하거나 새 파라미터를 추가한 후 URL 재구성을 클릭하세요. 편집 내용으로 새 URL 객체를 재구성하고 결과를 입력창에 씁니다.
실시간 모드. 실시간 모드를 켜면 150ms 디바운스로 키 입력 시마다 URL이 재분석됩니다. 로그에서 조각을 붙여넣으며 즉각적인 피드백이 필요할 때 유용합니다.

브라우저에서 URL을 분석하는 이유

탭을 벗어나지 않습니다. URL에는 토큰, 세션 ID, OAuth 상태, 서명된 쿼리 파라미터 등 제3자 서비스에 전달하고 싶지 않은 정보가 포함됩니다. 이 파서는 브라우저가 이미 로컬에서 실행하는 URL 알고리즘을 사용합니다 — 업로드도, 네트워크 호출도 없습니다.
코드가 보는 것과 일치합니다. Node.js, Deno, 최신 브라우저, Cloudflare Workers 모두 WHATWG URL 구현을 탑재하고 있습니다. 여기서 URL을 검사하면 프로덕션에서 new URL(input) 호출이 반환하는 것과 동일한 구성 요소 분할을 얻습니다.
사람이 읽기 쉽게 쿼리 문자열을 표시합니다. 원본 값과 디코딩된 값이 나란히 표시되어, q=hello%20world 쌍에서 와이어 바이트와 읽기 쉬운 hello world를 한눈에 볼 수 있습니다. 머릿속에서 URL 디코딩할 필요가 없습니다.
왕복 편집. 추적 파라미터를 삭제하거나, 경로의 오타를 수정하거나, 포트를 변경한 후 URL을 재구성하세요. 출력은 URL 생성자를 통해 다시 처리되므로 복사 전에 유효하지 않은 부분이 표시됩니다.

일반적인 활용 사례

URL 파싱은 URL이 단순한 링크 이상일 때 개발자, 보안, 분석 작업에서 일상적으로 등장합니다.

API 엔드포인트 디버깅: curl 또는 Postman 요청을 보내기 전에 기본 URL, 경로, 쿼리 파라미터를 확인합니다.
추적 파라미터 감사: 랜딩 페이지 URL의 모든 UTM, gclid, fbclid, 캠페인 키를 나열하고 어떤 것을 유지할지 결정합니다.
제휴 및 파트너 링크 검증: 딥링크를 붙여넣고 게시 전 목적지 호스트와 내장된 리디렉션 대상을 확인합니다.

실습 예제

https://example.com/search?q=hello%20world&lang=en을 입력창에 붙여넣으세요. 프로토콜은 https:, 호스트 이름은 example.com, 경로명은 /search, 검색은 ?q=hello%20world&lang=en으로 표시됩니다. 쿼리 테이블에는 두 행이 나타납니다: q의 원본 값 hello%20world와 디코딩된 값 hello world, 그리고 lang의 원본 및 디코딩된 값 en. lang 행에서 삭제를 클릭한 후 URL 재구성을 클릭하면 입력창이 https://example.com/search?q=hello%20world로 업데이트됩니다.

FAQ

URL 파서란 무엇인가요?

URL 파서는 URL 문자열을 명명된 구성 요소로 분해합니다: 프로토콜(https), 사용자 정보(사용자 이름, 비밀번호), 호스트(호스트 이름과 선택적 포트), 경로, 쿼리 문자열, 프래그먼트. 또한 각 쿼리 파라미터를 디코딩하여 퍼센트 인코딩된 값(%20으로 표시된 공백 등)을 읽기 쉽게 만듭니다. 이 파서는 WHATWG URL 표준을 사용합니다 — 브라우저가 페이지를 로드할 때 사용하는 것과 동일한 표준입니다.

호스트와 호스트 이름의 차이는 무엇인가요?

호스트 이름은 단순히 도메인(또는 IP 주소)입니다 — example.com:8080의 경우 호스트 이름은 example.com입니다. 호스트는 기본이 아닌 포트가 있을 때 호스트 이름에 포트를 더한 것이므로, 동일한 URL의 호스트는 example.com:8080이 됩니다. 기본 포트(https는 443, http는 80)를 사용하는 URL의 경우 호스트와 호스트 이름은 동일합니다.

디코딩이 자동으로 이루어지나요?

구조 구성 요소(프로토콜, 호스트 이름, 포트, 경로명)는 URL 생성자가 이미 정규화하므로 추가 디코딩 없이 URL 객체에서 직접 읽습니다. 쿼리 값은 두 번 표시됩니다: search에 나타나는 원본 퍼센트 인코딩 문자열과 decodeURIComponent로 생성된 디코딩 값. 그래야 다운스트림 도구가 기대하는 형식으로 복사할 수 있습니다.

URL을 편집하고 재구성할 수 있나요?

네. 모든 구성 요소 셀과 쿼리 파라미터 셀을 편집할 수 있습니다. 추가 및 삭제 버튼으로 쿼리 행을 추가하거나 제거한 후 구성 요소로 URL 재구성을 클릭하세요. 편집 내용이 URL 생성자를 통해 다시 처리되어 결과가 입력창에 작성됩니다 — 편집 내용이 유효하지 않은 URL을 만들면 자신의 코드에서 new URL()을 실행할 때와 동일한 오류 메시지가 표시됩니다.

URL 파싱은 모든 웹 개발자가 매주 수행하는 작은 작업입니다. 프로덕션 코드와 동일한 알고리즘으로 브라우저에서 수행하면 작업이 빠르고 데이터가 내 기기에 머뭅니다.

URL 분석하기 _

// 관련 도구