[E-LOG] Input elements should have autocomplete attributes

Input elements should have autocomplete attributes

 

---

목차

경고 내용

원인

해결방법

---

 

---

[오류 내용]

<상황>

회원가입 폼 기능을 만들면서 warning이 발생했다.

 

<경고>

warning

 

[DOM] Input elements should have autocomplete attributes (suggested: "new-password"): 
(More info: https://goo.gl/9p2vKq) 
<input data-slot="input" 
class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary 
selection:text-primary-foreground dark:bg-input/30 flex w-full min-w-0 bg-transparent 
px-3 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex 
file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium 
disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 
md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] 
aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 
aria-invalid:border-destructive pl-9 pr-9 py-2 h-auto border border-solid rounded-lg 
border-[#cccccccc]" placeholder="8자 이상 입력해주세요" minlength="8" maxlength="20" 
required type="password" value>flex

 

 

---

[원인]

<나의 코드>

<input
  type="password"
  placeholder="8자 이상 입력해주세요"
  minlength="8"
  maxlength="20"
  required
/>

<input
  type="password"
  placeholder="비밀번호 확인을 입력해 주세요."
  minlength="8"
  maxlength="20"
  required
/>

 

 

<문제 원인>

이 경고는 HTML 접근성 및 보안 관련 경고이다.

비밀번호 입력 태그에 속성이 명시되지 않았다.

 

---

[해결 방법]

new-password	새 비밀번호 입력 시 브라우저가 자동완성하지 않도록 함	회원가입/ 비밀번호 변경
current-password	브라우저가 저장된 계정 비밀번호를 자동완성하도록 유도	로그인

현재 회원가입을 구현중이므로 new-password가 적합하다.

 

<수정한 코드>

<input
  type="password"
  name="new-password"
  placeholder="8자 이상 입력해주세요"
  minlength="8"
  maxlength="20"
  required
  autocomplete="new-password"
/>
또는 

<input
  type="password"
  name="current-password"
  placeholder="비밀번호를 입력해주세요"
  required
  autocomplete="current-password"
/>

 

 

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!☺️

댓글과 좋아요는 큰 힘이 됩니다!