웹 form 속 숨은 보안 이야기: 인증과 인가, 그리고 fieldset · autocomplete · inputmode

이번에 웹 프론트엔드 보안 스터디의 7번째 챕터 인증과 인가에 대해 읽으면서 새롭게 알게된 내용들과 잘 몰랐던 내용들에 대해 더 찾아보면서 학습한 내용들을 정리해봤다. 그래서 다소 글의 내용들이 큰 연관 없이 흘러가는 것처럼 보일 것이다. 하지만 아래의 모든 내용들은 모두 웹 form과 사용자 입력, 접근성과 보안이라는 공통점이 있다는 점을 유의하여 읽으면 좋을 것 같다.

인증과 인가

인증(authentication)

인증이란 통신 상대가 누구인지를 확인하는 일이다.
나의 언어로 해석 해 보자면, 인증이란 나랑 이야기 할 상대가 누구이지 확인하는 것이다.

인가 (authorization)

인가란 통신 상대에게 특정한 ‘권한’을 부여하는 것을 의미한다. 웹 애플리케이션에 로그인할 때 사용자는 인증과 동시에 허가도 받는다.
나의 언어로 해석해보자면 인가란 이야기하는 상대에게 우리 집에 들어오는 것을 허락하는 것이다.

인증과 인가 그림으로 설명하기

인증과 인가에 대해 이해한 방식을 그림으로 그려보았다.

<fieldset>과 <legend>

계정 생성 폼 구현 실습 부분에서 fieldset과 legend 태그를 보게 되었는데 form을 구현할 때 주로 사용하는 것처럼 보였다. 이게 뭔지 정확하게 알아보았다.

HTML에서 fieldset과 legend 태그는 form 안에서 구조를 명확하게 나누고 의미를 부여할 때 유용하게 쓰이는 태그이다.

fieldset 태그란?

<fieldset>은 폼 안의 입력 요소들을 그룹으로 묶을 때 사용한다.

<fieldset>을 사용하면 시각적으로 입력 그룹을 구분할 수 있다. (브라우저에서 기본적으로 테두리 생김)
스크린 리더 같은 보조 기술에서 그룹으로 인식되어 접근성 향상에 도움이 된다. 또, 스타일링이나 JS로 조작할 때 그룹 단위로 제어하기 쉽다.

예시

<form>
	<fieldset>
		<legend>개인 정보</legend>
		<label for="name">이름</label>
		<input type="text" id="name" />

		<label for="email">이메일</label>
		<input type="email" id="email" />
	</fieldset>
</form>

legend 태그란?

<legend>는 fieldset의 제목 역할을 한다.

legend는 스크린 리더가 읽을 때, fieldset에 포함된 모든 요소의 공통 제목처럼 읽힌다. 즉, fieldset 그룹의 의미를 전달하는 데 중요한 역할을 하는 것이다. 그렇기 때문에 접근성 향상에 아주 중요한 역할을 한다.

비밀번호 입력 보조하기

사용자들이 보다 보안성이 높은 비밀번호를 설정할 수 있도록 도와주는 기능을 개발하는 것도 프론트엔드 개발자가 해야 할 일이라고 생각한다. 비밀번호를 설정하는 것이 복잡하고 불편하다면 사용자는 결국 비밀번호를 대충 설정하게 되기 때문이다.

이번 챕터를 읽으면서 사용자가 복잡한 비밀번호를 쉽게 설정할 수 있는 방법에 대해 알게 되었는데 그 중에서도 가장 기억에 남는 두가지 방법을 간단하게 적어보았다.

1. autocomplete 속성

autocomplete 속성은 브라우저에게 해당 입력 필드의 용도를 알려주는 역할을 한다. 이를 통해 사용자는 이전에 입력한 값을 자동으로 불러올 수 있고 브라우저는 적절한 제안을 통해 입력 과정을 도와준다.

사용법

<form autocomplete="on">
	<label for="user">아이디</label>
	<input type="text" id="user" name="username" autocomplete="username" />

	<label for="pw">비밀번호</label>
	<input type="password" id="pw" name="password" autocomplete="current-password" />
</form>

특징

• autocomplete 값은 미리 정의된 키워드 목록 중 하나를 사용해야 한다.
• 브라우저가 제공하는 자동완성 기능과 직접적으로 연결된다.
• 사용자의 입력 이력을 기반으로 자동 제안이 이뤄진다.
• <form> 태그 전체에 autocomplete="off"를 지정하면 폼 내 모든 입력 필드의 자동완성을 비활성화할 수 있다.

자주 사용하는 키워드

유의사항

• autocomplete 값을 사용할 때는 name 속성과 함께 작성하는 것이 좋다. 브라우저가 필드를 식별하는 데 더 도움이 되기 때문이다.
• 오타가 있는 키워드는 무시되므로, 정확한 문서 기반으로 작성해야 한다.

2. inputmode 속성

inputmode 속성은 사용자가 입력 필드에 접근했을 때 어떤 종류의 가상 키보드를 보여줄지를 브라우저에 알려주는 역할을 한다. 특히 모바일 환경에서 유용하게 쓰이는 속성이다.

사용법

<input type="text" inputmode="numeric" />

• type="text"로 설정하면서도 숫자 키패드가 뜨도록 만들 수 있다.
• 위 방법은 숫자만 입력받기를 원하지만 HTML의 type="number"가 제공하는 스핀박스 UI를 피하고 싶을 때 유용하다.
• inputmode는 키보드만 제어할 뿐, 값의 유효성은 검사하지 않으므로 필요 시 pattern, maxlength 등을 함께 사용한다.

특징

• inputmode는 화면 키보드의 타입을 제어할 수 있다.
• 사용자의 입력 편의성을 높이고, 오입력 가능성을 줄일 수 있다.
• type 속성과 함께 사용할 경우, inputmode는 키보드 유형만 지정하고 유효성 검사는 하지 않는다.

주요 inputmode 값

마무리

이번에 책을 읽으면서 autocomplete과 inputmode에 대해 새롭게 알게 되었다. 사실 이 두가지 속성이 제공하는 기능은 평소에 브라우저를 사용하면서 많이 접했던 기능들이다. 하지만 어떻게 구현하는지는 알지 못했다. 이번 기회를 통해 알게 되어서 좋았다. 다음에 이 두가지 속성을 적극 활용하여 사용자 중심의 UI/UX를 설계해야겠다.

또한, 이번에 책을 읽으면서 인증과 인가의 개념에 대해 나만의 언어로 간단하게 정리를 해보는 시간도 갖고 대충 알고 넘어갔던 <fieldset>과 <legend> 두 태그에 대해서도 자세하게 알아보는 시간을 가졌다. 책을 읽으면서 평소라면 그냥 넘어갔을 내용들도 더 찾아보고 나만의 지식으로 얻게 되어 좋았다.

📚 참고

• 도서: 프런트엔드 개발을 위한 보안입문