hidden이란?
HTML에서 <form> 태그를 공부하다보면 hidden이라는 input type이 나온다.
<input type="hidden">은 사용자에게 보여지지 않는 숨겨진 입력 필드를 정의하는 것이다.
숨겨진 입력 필드는 렌더링이 끝난 웹 페이지에서는 전혀 보이지 않고, 페이지 콘텐츠 내에서 그걸 볼 수 있는 방법도 없다. (편집하기 위해서는 개발자 도구를 통해 값을 편집한다.)
이는 form 제출 시 사용자가 변경하면 안 되는 데이터를 함께 보낼 때 유용하게 사용된다.
일반적으로 hidden 입력 필드는 업데이트 되어야 하는 데이터베이스의 레코드를 저장하거나, 고유한 보안 토큰 등을 서버로 보낼 때 주로 사용된다.
사용 예시
콘텐츠 추적
가장 일반적인 용도 중 하나는 편집 양식이 제출될 때, 업데이트해야 하는 데이터베이스 레코드를 추적한다.
일반적인 워크플로우는 다음과 같다.
1. 사용자가 블로그 게시물 또는 제품 항목과 같이 자신이 제어할 수 있는 일부 컨텐츠를 편집한다면
2. 편집할 컨텐츠는 데이터베이스에서 가져오고 사용자가 변경할 수 있도록 HTML 형식으로 로드된다.
3. 편집 후 유저는 양식을 제출하고 업데이트된 데이터는 데이터베이스에서 업데이트되도록 서버로 다시 전송된다.
1, 2번 과정에서 업데이트될 레코드의 ID는 숨겨진 입력에 유지되고, 3번 과정에서 양식을 제출하면 ID가 레코드 내용과 함께 서버로 자동 전송 된다.
ID를 통해서 사이트 서버의 구성 요소는 제출된 데이터로 업데이트해야 하는 레코드를 정확히 알 수 있다.
웹사이트 보안 향상
hidden은 웹사이트 보안을 개선하기 위해 보안 토큰 또는 secret을 저장하고 제출하는 데에도 사용된다.
예를 들어 은행 고객이 은행 웹사이트와 같은 민감한 양식을 작성하여 돈을 이체한다고 했을 때, 본인임을 증명하고, (불법 프로그램과 같은 것이 아닌) 올바른 양식을 사용해 요청을 하고 있는지 확인해야한다.
위와 같은 과정을 통해 악의적인 유저들이 가짜 양식을 만들어 은행을 가장해 고객들에게 전달하고 이체하도록 하는 것을 막을 수 있다. 위 같은 종류의 공격을 CSRF(Cross Site Request Forgery)라고 한다.
대부분 좋은 서버의 프레임워크는 이런 공격을 방지하기 위해 숨겨진 입력 필드를 사용한다.
위의 예시는 아주 간단하게 압축한 내용으로 단순히 보안과 관련된 사항들을 hidden 필드에 배치한다고 보안이 유지되는 것은 아니다
예제
<form action="/examples/media/action_target.php" method="get">
아이디 : <input type="text" name="user_id"><br>
비밀번호 : <input type="password" name="user_pw"><br>
<input type="hidden" id="gameToken" name="game_token" value="1q2w3e4r">
<input type="submit">
</form>위에서 설명했던 대로 결과값에는 아이디와 비밀번호만 렌더링돼서 나타나고 hidden type은 겉으로 드러나지 않는다
결과
