[HTML] 자동으로 생성되는 autocomplete 해제하기

[HTML] 자동으로 생성되는 autocomplete 해제하기

웹 사이트에서 양식 필드의 자동 완성을 사용 중지하는 방법에 대해 설명합니다.

기본적으로 브라우저는 사용자가 웹 사이트의 필드를 통해 제출하는 정보를 기억합니다. 이를 통해 브라우저는 자동 완성 기능을 제공 할 수 있습니다 (즉, 사용자가 입력하기 시작한 필드에 대해 가능한 완료를 제안하거나 자동 채우기 (즉,로드시 특정 필드를 미리 채 웁니다).

이러한 기능은 대개 기본적으로 사용 가능하지만 사용자가 개인 정보를 염려 할 수 있으므로 브라우저에서 사용자가 사용을 중지 할 수 있습니다. 

그러나 양식에 제출 된 일부 데이터는 앞으로는 유용하지 않으며 (예 : 일회성 핀) 민감한 정보 (예 : 고유 한 정부 ID 또는 신용 카드 보안 코드)가 포함되어 있습니다. 

웹 사이트 작성자는 브라우저의 자동 완성 기능을 사용하는 경우에도 브라우저가 해당 필드의 값을 기억하지 않는 것을 선호 할 수 있습니다.

<input autocomplete="off">
 
<!-- or -->
 
<form method="post" action="/form" autocomplete="off">
[…]
</form>
 
<!-- or -->
 
<form method="post" action="/form">
  […]
  <div>
    <label for="cc">Credit card:</label>
    <input type="text" id="cc" name="cc" autocomplete="off">
  </div>
</form>

하지만 위 방법은 2가지 사이드 이펙트가 있습니다.

1. 사용자가 입력 한 데이터를 저장하지 말고 유사한 양식으로 나중에 자동 완성을 수행하지만 크로스 브라우징 이슈가 있습니다.

2. 브라우저가 세션 기록에 양식 데이터를 캐싱하지 못하도록합니다. form 데이터가 세션 기록에 캐시되면 사용자가 양식을 제출하고 뒤로 버튼을 클릭하여 원래 form 페이지로 돌아갈 경우 사용자가 채운 정보가 표시됩니다.

경우에 따라 브라우저는 자동 완성 속성이 꺼져 있어도 자동 완성 값을 계속 제안합니다. 이 예기치 않은 동작은 개발자에게 매우 혼란 스러울 수 있습니다. 

하지만 아래와 같은 트릭으로 이 기능을 완성시킬 수 있습니다.

<input autocomplete="nope">

이 값은 autocomplete 속성에 유효한 값이 아니므로 브라우저는 일치시킬 방법이 없으며 필드를 자동 완성하려고하지 않습니다. 이 기능은 Firefox에서는 작동하지 않습니다. 무효 값을 완전히 무시하고 기본 자동 완성 동작으로 돌아갑니다

대부분의 브라우저의 기본 기능 때문에 이 기능은 제대로 동작하지 않습니다. 

사이트가 a에 대해 autocomplete = "off"로 설정하고 양식에 사용자 이름 및 비밀번호 입력 필드가있는 경우 브라우저는 여전히이 로그인을 기억하도록 제안하고 사용자가 동의하면 다음에 사용자가 로그인 할 때 브라우저가 자동 완성합니다 페이지를 방문합니다.

사이트가 사용자 이름과 암호 필드에 대해 autocomplete = "off"로 설정하면 브라우저는 여전히이 로그인을 기억하도록 제안하고 사용자가 동의하면 브라우저는 다음에 사용자가 페이지를 방문 할 때 해당 필드를 자동 완성합니다.

사용자가 다른 사람의 새 암호를 지정할 수있는 사용자 관리 페이지를 정의하고 있으므로 암호 필드의 자동 채우기를 방지하려면 autocomplete = "new-password"를 사용할 수 있습니다. 그러나이 값에 대한 지원은 Firefox에서 구현되지 않았습니다.

<input autocomplete="new-password">

출처 : https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion