[DOM] Input elements should have autocomplete attributes (suggested: "new-password")

 

목차

 

1. Input elements should have autocomplete attributes (suggested: "new-password")

프로젝트 진행 중 회원가입을 구현하는 중에 위와 같이 자동 완성 속성이 있어야한다는 경고가 콘솔창에서 확인되었다. 😕

2. 자동 완성 속성

자동 완성 속성은 비밀번호 관리자가 양식에 있는 필드의 목적을 유추하여 실수로 잘못된 데이터를 저장하거나 자동 채우는 일을 방지하는 데 도움이 됩니다.

3. 코드 수정

autoComplete="off"

- 브라우저가 이 필드에 값을 자동으로 넣는 것을 금지

- 문서나 애플리케이션이 자신만의 자동완성 기능을 구현하거나, 보안상 문제로 자동완성을 사용하지 않아야 할 경우 지정할 수 있음

autoComplete="new-password"

- 새로운 비밀번호. 계정을 생성할 때나 비밀번호를 변경할 때, new-password는 "새로운 비밀번호를 입력하세요" 또는 "비밀번호 확인"에 지정해야 합니다. 일반적인 비밀번호와 구분하는 이유는 브라우저가 기존 비밀번호를 자동완성으로 채우는 것을 피하기 위함이며, 안전한 무작위 비밀번호 생성을 제안할 곳을 결정할 때도 사용하기 때문입니다.

기존 코드

<S.PasswordLabel>
    <S.InputBox
        type={showPassword ? "text" : "password"}
        name="password"
        value={inputs.password}
        placeholder="비밀번호를 입력해주세요."
        onChange={inputOnChange}
    />
    <S.VisibilityButton onClick={passwordVisibility} />
</S.PasswordLabel>
<S.PasswordLabel>
    <S.InputBox
        type={showCheckPassword ? "text" : "password"}
        name="checkPassword"
        value={inputs.checkPassword}
        placeholder="비밀번호를 확인합니다."
        onChange={inputOnChange}
    />
    <S.VisibilityButton onClick={checkPasswordVisibility} />
</S.PasswordLabel>

수정 코드 

<S.PasswordLabel>
    <S.InputBox
        type={showPassword ? "text" : "password"}
        name="password"
        value={inputs.password}
        placeholder="비밀번호를 입력해주세요."
        onChange={inputOnChange}
    	autoComplete="off" // 추가
    />
    <S.VisibilityButton onClick={passwordVisibility} />
</S.PasswordLabel>
<S.PasswordLabel>
    <S.InputBox
        type={showCheckPassword ? "text" : "password"}
        name="checkPassword"
        value={inputs.checkPassword}
        placeholder="비밀번호를 확인합니다."
        onChange={inputOnChange}
        autoComplete="off" // 추가
    />
    <S.VisibilityButton onClick={checkPasswordVisibility} />
</S.PasswordLabel>

프로젝트에서는 off로 값을 주었으나 회원가입에서는 새로운 비밀번호. 계정을 생성할 때 이므로 new-password로 설정해주는게 적절하다고 생각한다. 현업에서는 어떨까? 

Reference

https://www.chromium.org/developers/design-documents/create-amazing-password-forms/

Create Amazing Password Forms

https://developer.mozilla.org/ko/docs/Web/HTML/Attributes/autocomplete

HTML autocomplete 특성 - HTML: Hypertext Markup Language | MDN

https://developer.mozilla.org/ko/docs/Web/HTML/Element/form#autocomplete

<form> - HTML: Hypertext Markup Language | MDN