웹 양식 필드 / 입력 태그에서 브라우저 자동 완성을 비활성화하는 방법

html forms browser autocomplete


특정 input (또는 form field ) 에 대해 주요 브라우저에서 autocomplete 을 어떻게 비활성화 합니까?




Answer 1 nlucaroni


Firefox 30은 암호에 대해 autocomplete="off" 를 무시 하고 대신 암호를 클라이언트에 저장할 것인지 묻는 메시지를 표시합니다. 2014 년 5 월 5 일 의 다음 주석에 유의하십시오 .

  • 암호 관리자는 항상 암호 를 저장할 것인지 묻습니다. 비밀번호는 사용자의 허가없이 저장되지 않습니다.
  • 우리는 IE와 Chrome에 이어이 변경을 구현 한 세 번째 브라우저입니다.

에 따르면 모질라 개발자 네트워크 문서, 부울 폼 요소 속성 autocomplete 방지는 이전 버전의 브라우저에 캐시되는 데이터를 형성한다.

<input type="text" name="foo" autocomplete="off" />



Answer 2 Ben Combee


autocomplete=off 외에도 양식 필드 이름을 페이지를 생성하는 코드에 의해 무작위로 지정할 수 있습니다 (예 : 세션 끝에 문자열을 이름 끝에 추가).

양식을 제출하면 서버 측에서 처리하기 전에 해당 부분을 제거 할 수 있습니다. 이렇게하면 웹 브라우저가 해당 필드의 컨텍스트를 찾지 못하고 공격자가 양식 제출에 대한 필드 이름을 추측 할 수 없으므로 XSRF 공격을 방지하는 데 도움이 될 수 있습니다.




Answer 3 apinstein


대부분의 주요 브라우저 및 비밀번호 관리자 (올바로 IMHO)는 이제 autocomplete=off 를 무시 합니다 .

왜? 많은 은행 및 기타 "높은 보안"웹 사이트는 "보안 목적으로"로그인 페이지 에 autocomplete=off 을 추가 했지만 사람들이 보안 수준이 높은 사이트의 암호를 기억하기 쉽도록 변경하기 때문에 실제로 보안이 저하됩니다. )가 자동 완성에 실패했습니다.

오래 전에 대부분의 암호 관리자는 autocomplete=off 를 무시하기 시작 했으며 이제 브라우저는 사용자 이름 / 암호 입력에 대해서만 동일한 작업을 시작합니다.

불행히도 자동 완성 구현의 버그로 인해 사용자 이름 및 / 또는 암호 정보가 부적절한 양식 필드에 삽입되어 양식 유효성 검사 오류가 발생하거나 사용자가 의도적으로 비워 둔 필드에 실수로 사용자 이름을 삽입하는 경우가 있습니다.

웹 개발자는 무엇을해야합니까?

  • 페이지의 모든 비밀번호 필드를 단독으로 유지할 수 있다면, 비밀번호 필드가 사용자 / 패스 자동 완성에 대한 주요 트리거 인 것처럼 보이기 시작하는 것이 좋습니다. 그렇지 않으면 아래 팁을 읽으십시오.
  • Safari 는 2 개의 비밀번호 필드가 있으며이 경우 로그인 양식이 아닌 비밀번호 변경 양식이어야한다고 가정하면 자동 완성을 비활성화합니다. 따라서 허용되는 모든 양식에 대해 2 개의 비밀번호 필드 (신규 및 신규 확인)를 사용하십시오.
  • 불행히도 Chrome 34는 비밀번호 필드가 표시 될 때마다 사용자 / 패스로 필드를 자동으로 채우려 고 시도합니다. 이것은 사파리의 행동을 바꿀 수있는 아주 나쁜 버그입니다. 그러나 양식 맨 위에 이것을 추가하면 비밀번호 자동 완성이 사용 중지 된 것으로 보입니다.

    <input type="text" style="display:none">
    <input type="password" style="display:none">

아직 IE 또는 Firefox를 철저히 조사하지는 않았지만 다른 사람들이 의견에 정보가 있으면 답변을 업데이트하게되어 기쁩니다.




Answer 4 dsuess


때로는 심지어 자동 완성 해제 = 것입니다 채우기 위해 방지 할 사용자 또는 별칭 필드 잘못된 필드에 자격 증명 있지만.

이 해결 방법은 브라우저 동작에 대한 apinstein의 게시물에 추가됩니다.

읽기 전용으로 브라우저 자동 완성을 수정하고 포커스에 쓰기 가능 설정 (클릭 및 탭)

 <input type="password" readonly  
     onfocus="this.removeAttribute('readonly');"/>

업데이트 : Mobile Safari는 필드에 커서를 설정하지만 가상 키보드는 표시하지 않습니다. 새로운 수정 사항은 이전과 동일하지만 가상 키보드를 처리합니다.

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

라이브 데모 https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

브라우저가 자격 증명을 잘못된 텍스트 필드에 자동으로 채 웁니다!?

동일한 형식의 비밀번호 필드가있을 때 Chrome과 Safari에서이 이상한 동작을 발견했습니다 . 브라우저가 저장된 자격 증명을 삽입하기 위해 암호 필드를 찾습니다. 그런 다음 DOM의 암호 필드 앞에 나타나는 가장 가까운 텍스트 입력 필드를 자동으로 채 웁니다 (관찰으로 추측). 브라우저가 마지막 인스턴스이므로 제어 할 수 없으므로

위의 읽기 전용 수정은 저에게 효과적이었습니다.




Answer 5 Geynen


Chrome의 해결책 은 입력 유형 비밀번호 에 autocomplete="new-password" 를 추가하는 것입니다. 아래 예를 확인하십시오.

Example:

<form name="myForm"" method="post">
   <input name="user" type="text" />
   <input name="pass" type="password" autocomplete="new-password" />
   <input type="submit">
</form>

비밀번호 가 box 유형 인 상자를 찾으면 Chrome은 항상 데이터를 자동 완성합니다. autocomplete = "new-password" 상자에 표시하기에 충분합니다 .

이것은 나를 위해 잘 작동합니다.

참고 : F12 를 사용하여 변경 사항이 적용 되는지 확인하십시오. 브라우저는 페이지를 캐시에 저장하는 경우가 많습니다.