Form 태그 method 속성 실수로 인한 GET 요청 이슈

문제 상황

회원가입 기능을 구현하던 중 QA 팀으로부터 비밀번호가 URL에 노출된다는 제보를 받았다. 확인해보니 form 태그에 method 속성을 명시하지 않아 발생한 문제였다.

<!-- 문제가 있던 코드 -->
<form action="/api/signup">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <button type="submit">가입하기</button>
</form>

브라우저에서 form의 method 기본값은 GET이다. 따라서 위 코드는 /api/signup?username=test&password=1234 같은 형태로 요청이 전송된다.

해결

<form action="/api/signup" method="POST">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <button type="submit">가입하기</button>
</form>

method="POST"를 명시해 해결했다. 너무 기초적인 실수라 민망했지만, 바쁜 상황에서 이런 실수는 충분히 발생할 수 있다.

교훈

• form 태그는 항상 method 속성을 명시한다
• GET은 멱등성 있는 조회, POST는 데이터 변경 용도로 구분한다
• 민감한 정보는 절대 URL에 포함되어선 안 된다
• ESLint나 코드 리뷰로 이런 실수를 사전에 잡을 수 있다

최근에는 React로 SPA를 주로 만들지만, 서버 사이드 렌더링이나 간단한 관리자 페이지에서는 여전히 전통적인 form을 사용한다. 기본기를 다시 한번 점검하는 계기가 되었다.