[javascript/jquery] 자바스크립트 url 파라미터 숨기기 (history.replaceState)

웹 개발 중 파라미터가 노출된 URL을 지워야하는 상황

https://example.com/search?keyword=자바스크립트&userId=1234&token=abcxyz

보안이 중요한 데이터가 주소창에 그대로 보이거나, URL을 깔끔하게 유지하고 싶은 상황에서 유용하게 쓸 수 있는 방법을 정리했다.

💡 history.replaceState({}, null, location.pathname) 한 줄로 URL 파라미터를 숨기는 방법

✅ 핵심 코드 한 줄

history.replaceState({}, null, location.pathname);

이 한 줄이 하는 일은 현재 URL에서 쿼리스트링(? 이후)을 전부 제거하고, 경로(path)만 남긴다. 페이지는 새로고침되지 않는다.

🔍 인자 하나씩 뜯어보기

history.replaceState( state,  title,  url )
                      ↓       ↓       ↓
history.replaceState( {},     null,   location.pathname )

① {} — state 객체

히스토리에 함께 저장할 데이터다. 빈 객체 {}를 넘겼다는 건, 따로 저장할 데이터 없이 URL만 바꾸겠다는 의미다.

// 데이터를 함께 저장하고 싶다면 이렇게
history.replaceState({ keyword: '검색어' }, null, location.pathname);

② null — title

원래 페이지 타이틀을 지정하는 인자인데, 현재 모든 브라우저가 이 값을 무시한다. 관례적으로 null 또는 ""을 넣는다.

③ location.pathname — 변경할 URL

여기가 핵심이다. location 객체의 속성들을 비교해보면 이해가 쉽다.

// 현재 URL: https://example.com/search?keyword=테스트&page=1

location.pathname  →  "/search"                           (? 이전 경로만)
location.search    →  "?keyword=테스트&page=1"   (쿼리스트링)
location.href      →  "https://example.com/search?keyword=테스트&page=1"

location.pathname만 넘기면 쿼리스트링이 포함되지 않으므로, URL에서 파라미터가 사라진다.

⚙️ 동작 흐름

페이지 진입
↓ https://example.com/search?keyword=테스트&page=1

파라미터 읽어서 처리 (검색 실행 등)
↓

history.replaceState({}, null, location.pathname);
↓

주소창 URL 변경
→ https://example.com/search    ✅ 파라미터 사라짐
(페이지 새로고침 없음, 히스토리 스택 교체)

🆚 pushState vs replaceState

// replaceState: 현재 히스토리를 덮어씀
// → 뒤로가기 해도 파라미터 있던 URL로 못 돌아감
history.replaceState({}, null, location.pathname);

// pushState: 새 히스토리를 쌓음
// → 뒤로가기 하면 파라미터 있던 URL로 돌아감
history.pushState({}, null, location.pathname);

메서드	히스토리 처리	뒤로가기 시	적합한 상황
replaceState	현재 항목 교체	파라미터 URL 차단 ✅	파라미터 완전히 제거
pushState	새 항목 추가	파라미터 URL 복원	히스토리 유지 필요 시

파라미터를 완전히 지워버리고 싶을 때는 replaceState가 맞다. 뒤로가기로 파라미터가 다시 노출되는 상황을 막을 수 있기 때문이다.

💻 실제 활용 패턴

기본 패턴 — 파라미터 읽고 → 즉시 제거

const params = new URLSearchParams(location.search);
const keyword = params.get('keyword');

if (keyword) {
  // ① 파라미터 값으로 필요한 처리 먼저
  doSearch(keyword);

  // ② 처리 후 URL에서 파라미터 제거
  history.replaceState({}, null, location.pathname);
}

⚠️ 순서가 중요하다. 반드시 파라미터를 읽고 처리한 후에 제거해야 한다. 제거 후 읽으면 이미 파라미터가 없으므로 null이 반환된다.

jQuery AJAX 조합 패턴

$('#searchForm').on('submit', function(e) {
  e.preventDefault();

  const keyword = $('#keyword').val();

  $.ajax({
    url: '/api/search',
    method: 'GET',
    data: { keyword: keyword },
    success: function(response) {
      // AJAX로 데이터를 가져오되, URL에는 파라미터 노출하지 않음
      history.replaceState({}, null, location.pathname);
      renderResult(response);
    }
  });
});

⚠️ 주의사항

항목	내용
새로고침 시 state 소멸	replaceState에 저장한 state는 새로고침하면 사라진다. 중요한 데이터는 sessionStorage와 병행 사용 권장
서버 라우팅 주의	존재하지 않는 URL로 변경 후 새로고침하면 404 발생 가능. 서버에서 해당 경로를 처리할 수 있어야 함
완전한 보안 X	URL에서 숨길 뿐, 클라이언트 단의 조작이다. 민감한 데이터는 POST + HTTPS와 함께 서버 인증을 병행해야 함

📝 한 줄 요약

history.replaceState({}, null, location.pathname) 는 "URL은 깔끔하게 바꾸되, 페이지는 그대로 유지" 하는 가장 심플한 파라미터 은닉 방법이다.