폼과 사용자 입력 다루기

회원가입, 로그인, 글쓰기 — 사용자가 데이터를 보내는 거의 모든 곳에 폼(form)이 있습니다. 폼을 제대로 다루는 것은 편의의 문제이자 보안의 문제입니다. 이번 챕터에서 그 기본기를 잡습니다.

폼의 기본 구조

폼은 <form> 안에 입력칸 <input>들을 담고, 제출 버튼으로 마무리합니다. 각 입력칸에는 서버가 값을 알아볼 수 있게 name을 붙입니다.

<form method="post" action="/signup">
  <label for="email">이메일</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">가입</button>
</form>

• type — 입력 종류: text, email, password, number 등. 종류에 맞는 키보드·검사가 따라옵니다.
• name — 서버로 전송될 때의 이름표. 이게 없으면 값이 서버에 전달되지 않습니다.
• label — 입력칸의 설명. for를 입력칸 id와 맞추면 라벨을 눌러도 칸이 선택됩니다(접근성).

검증은 두 번 한다

입력 검증(validation)에는 두 층이 있습니다. 둘 다 필요하지만, 믿을 수 있는 쪽은 서버뿐입니다.

브라우저의 required나 자바스크립트 검사는 친절한 안내일 뿐, 공격자는 그것을 끄고 요청을 직접 보냅니다. 그래서 서버는 받은 모든 값을 다시 검사해야 합니다. "모든 입력은 의심하라"가 원칙입니다.

입력을 안전하게 다루기

• 이스케이프/새니타이즈 — 사용자가 넣은 글을 화면에 그대로 출력하면, 악성 스크립트가 섞여 실행되는 XSS 공격이 가능합니다. 출력 시 특수문자를 무력화(이스케이프)해야 합니다.
• 플레이스홀더로 DB에 — 입력값을 SQL에 직접 붙이지 말고 플레이스홀더(?)로 전달합니다(SQL 인젝션 방지).
• 필요한 것만 받기 — 받을 항목을 정해 두고, 예상 밖의 값은 버립니다.