웹 양식 필드/입력 태그에서 브라우저 자동 완성을 어떻게 비활성화합니까?

질문자 :Brett Veenstra

특정 입력(또는 양식 필드)에 대해 주요 브라우저에서 자동 완성을 비활성화하는 방법은 무엇입니까?

Firefox 30은 autocomplete="off" 를 무시하고 대신 암호를 클라이언트에 저장할지 여부를 사용자에게 묻도록 선택합니다. 2014년 5월 5일의 다음 주석에 유의하십시오.

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

Mozilla 개발자 네트워크 문서에 따르면 부울 양식 요소 속성 autocomplete 양식 데이터가 이전 브라우저에서 캐시되는 것을 방지합니다.

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

nlucaroni

autocomplete=off 를 설정하는 것 외에도 페이지를 생성하는 코드에 의해 양식 필드 이름이 무작위로 지정되도록 할 수도 있습니다. 이름 끝에 세션별 문자열을 추가하면 됩니다.

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

Ben Combee

대부분의 주요 브라우저 및 암호 관리자(정확히 말하면 IMHO)는 이제 autocomplete=off 무시합니다.

왜요? 많은 은행 및 기타 "보안 수준이 높은" 웹사이트는 autocomplete=off 를 추가했지만 이는 사람들이 이러한 보안 수준이 높은 사이트의 비밀번호를 기억하기 쉽도록 변경하므로 실제로 보안이 저하됩니다. ) 자동 완성이 깨졌기 때문입니다.

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

불행히도, 자동 완성 구현의 버그는 사용자 이름 및/또는 비밀번호 정보를 부적절한 양식 필드에 삽입하여 양식 유효성 검사 오류를 일으키거나 더 심각한 것은 사용자가 의도적으로 공백으로 남겨둔 필드에 실수로 사용자 이름을 삽입하는 것입니다.

웹 개발자는 무엇을 해야 하나요?

• 페이지의 모든 비밀번호 필드를 단독으로 유지할 수 있다면 비밀번호 필드의 존재가 사용자/패스 자동 완성의 주요 트리거인 것처럼 보이기 때문에 좋은 시작입니다. 그렇지 않으면 아래 팁을 읽으십시오.
• Safari 는 2개의 비밀번호 필드가 있음을 확인하고 이 경우 자동 완성을 비활성화합니다. 이 경우 로그인 양식이 아니라 비밀번호 변경 양식이어야 합니다. 따라서 허용하는 모든 양식에 대해 2개의 비밀번호 필드(신규 및 신규 확인)를 사용해야 합니다.

• 불행히도 Chrome 34는 비밀번호 필드가 표시될 때마다 사용자/패스로 필드를 자동 채우기를 시도합니다. 이것은 Safari 동작을 변경할 수 있는 아주 나쁜 버그입니다. 그러나 이것을 양식 상단에 추가하면 비밀번호 자동 완성이 비활성화되는 것 같습니다.

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

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

apinstein

경우에 따라 autocomplete=off도 자격 증명을 잘못된 필드에 채우는 것을 방지 하지 않지만 사용자 또는 닉네임 필드는 그렇지 않습니다.

이 해결 방법은 브라우저 동작에 대한 핀스타인의 게시물에 추가된 것입니다.

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

 <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/

// 업데이트 종료

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

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

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

dsuess

Chrome의 솔루션 autocomplete="new-password" 를 추가하는 것입니다. 아래 예시를 확인해주세요.

예시:

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

Chrome은 해당 상자에 대해 autocomplete = "new-password" 를 표시하기에 충분한 password 유형 의 상자를 찾으면 항상 데이터를 자동 완성합니다.

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

참고: F12 키 를 눌러 변경 사항이 적용되는지 확인하십시오. 여러 번 브라우저는 페이지를 캐시에 저장하는데, 이것이 작동하지 않는다는 나쁜 인상을 주었지만 실제로 브라우저가 변경 사항을 가져오지는 않았습니다.

Geynen

<form name="form1" id="form1" method="post" autocomplete="off" action="http://www.example.com/form.cgi">

이것은 Internet Explorer와 Mozilla Firefox에서 작동합니다. 단점은 XHTML 표준이 아니라는 것입니다.

brendan

다른 사람들이 말했듯이 대답은 autocomplete="off" 입니다.

그러나 이에 대한 일부 답변과 중복 질문에서 이 기능을 끄지 않는 것이 더 낫다고 제안했기 때문에 특정 경우에 이것을 사용하는 것이 좋은 이유를 설명 할 가치가 있다고 생각합니다.

신용 카드 번호를 저장하는 브라우저를 중지하는 것은 사용자에게 맡겨져서는 안 됩니다. 너무 많은 사용자는 그것이 문제라는 사실조차 깨닫지 못할 것입니다.

신용 카드 보안 코드 필드에서 이 기능을 끄는 것이 특히 중요합니다. 이 페이지 에는 다음과 같이 명시되어 있습니다.

"보안 코드를 절대 저장하지 마세요... 그 가치는 그것을 제공하는 유일한 방법은 실제 신용 카드에서 그것을 읽어 그것을 제공하는 사람이 실제로 카드를 보유하고 있음을 증명하는 것이라는 가정에 달려 있습니다."

문제는 공용 컴퓨터(사이버 카페, 도서관 등)인 경우 다른 사용자가 카드 세부 정보를 훔치기 쉽고 자신의 컴퓨터에서도 악성 웹사이트가 자동 완성 데이터를 훔칠 수 있다는 것입니다.

Sam Hasler

랜덤 캐릭터를 사용하여 구글 크롬으로 끝없는 싸움을 해결했습니다. 항상 임의의 문자열로 자동 완성을 렌더링하면 아무 것도 기억하지 않습니다.

 <input name="name" type="text" autocomplete="rutjfkde">

다른 사람들에게 도움이 되기를 바랍니다.

step

자동 완성 비활성화를 피하기 위해 말하는 답변과 다르게 구걸해야합니다.

가장 먼저 불러올 것은 로그인 양식 필드에서 명시적으로 비활성화되지 않은 자동 완성이 PCI-DSS 실패라는 것입니다. 또한 사용자의 로컬 시스템이 손상되면 모든 자동 완성 데이터가 일반 데이터에 저장되기 때문에 공격자가 쉽게 얻을 수 있습니다.

확실히 사용성에 대한 논쟁이 있지만, 어떤 양식 필드가 자동 완성을 비활성화해야 하고 어떤 것이 비활성화되어서는 안 되는지에 관해서는 아주 미세한 균형이 있습니다.

Securatek

세 가지 옵션:

첫 번째:

 <input type='text' autocomplete='off' />

두번째:

 <form action='' autocomplete='off'>

세 번째(자바스크립트 코드):

 $('input').attr('autocomplete', 'off');

yajay

관련되거나 실제로는 완전히 반대되는 메모에 -

"앞서 언급한 양식의 사용자이고 자동 완성 기능을 다시 활성화하려면 이 책갈피 페이지 에서 '비밀번호 기억' 책갈피를 사용하십시오. 페이지의 모든 양식에서 autocomplete="off" 속성을 제거합니다. 계속 좋은 싸움을 파이팅!"

Antti Kissaniemi

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

 <input name="pass" type="password" autocomplete="new-password" />

텍스트, 선택 등과 같은 다른 컨트롤에서도 이 전략을 사용할 수 있습니다.

Muhammad Awais

뿐만 아니라

 autocomplete="off"

사용하다

 readonly onfocus="this.removeAttribute('readonly');"

아래와 같이 username , password 등)를 기억하지 않도록 하려는 password

 <input type="text" name="UserName" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" > <input type="password" name="Password" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" >

도움이 되었기를 바랍니다.

Murat Yıldız

autocomplete="off" 설정하면 됩니다. 이렇게 하는 데에는 아주 좋은 이유가 있습니다. 자신만의 자동 완성 기능을 제공하고 싶을 것입니다!

EndangeredMassa

나는 끝없는 솔루션을 시도했지만 다음을 찾았습니다.

autocomplete="off" 대신 autocomplete="false" 를 사용하기만 하면 됩니다.

그렇게 간단하고 Google 크롬에서도 매력처럼 작동합니다!

Fery Kaszoni

우리는 실제로 한 사이트에 대해 sasb 의 아이디어를 사용했습니다.

진료실을 운영하는 의료 소프트웨어 웹 앱이었습니다. 그러나 우리 고객 중 많은 수가 반 공공 터미널을 포함하여 다양한 워크스테이션을 사용하는 외과 의사였습니다. 그래서 그들은 자동 저장된 암호의 의미를 이해하지 못하거나 주의를 기울이지 않는 의사가 실수로 로그인 정보에 쉽게 액세스할 수 있도록 남겨두는 일이 없도록 하고 싶었습니다.

물론 이것은 인터넷 익스플로러 8, 파이어폭스 3.1 등에 등장하기 시작한 프라이빗 브라우징 개념 이전의 일이다. 그럼에도 불구하고 많은 의사들은 IT가 변하지 않는 병원에서 구식 브라우저를 강제로 사용하고 있다.

그래서 우리는 로그인 페이지에서 해당 게시물에 대해서만 작동하는 임의의 필드 이름을 생성하도록 했습니다. 예, 덜 편리하지만 공용 터미널에 로그인 정보를 저장하지 않는 것에 대해 사용자가 머리를 맞대고 있습니다.

Jon Adams

이 대화에서 어떤 솔루션도 저에게 효과가 없었습니다.

마침내 JavaScript 가 필요하지 않고 최신 브라우저에서 작동하며(Internet Explorer를 제외하고 적어도 하나의 catch가 있어야 했습니다. 맞죠?), 전체 양식에 대해 자동 완성을 비활성화할 필요가 없는 순수한 HTML 솔루션 을 마침내 알아냈습니다. .

양식에서 자동 완성을 끄고 form 내에서 작동하기를 원하는 input 대해 켜기만 하면 됩니다. 예를 들어:

 <form autocomplete="off"> <!-- These inputs will not allow autocomplete and Chrome won't highlight them yellow! --> <input name="username" /> <input name="password" type="password" /> <!-- This field will allow autocomplete to work even though we've disabled it on the form --> <input name="another_field" autocomplete="on" /> </form>

lifo

autocomplete=off 가 HTML 5에서 지원된다고 생각합니다.

왜 이것을 하고 싶은지 스스로에게 물어보십시오. 어떤 상황에서는 이해가 될 수 있지만 단지 그것을 하기 위해 하지 마십시오.

사용자에게 덜 편리하고 OS X의 보안 문제도 아닙니다(아래 Soren이 언급함). 사람들이 원격으로 비밀번호를 도난당하는 것이 걱정된다면 앱에서 autcomplete=off 사용하더라도 키스트로크 로거는 여전히 이를 수행할 수 있습니다.

브라우저가 내 정보(대부분)를 기억하도록 선택한 사용자로서 귀하의 사이트가 내 정보를 기억하지 못한다면 짜증이 날 것입니다.

user631300

최상의 솔루션:

사용자 이름(또는 이메일) 및 비밀번호 자동 완성 방지:

 <input type="email" name="email"><!-- Can be type="text" --> <input type="password" name="password" autocomplete="new-password">

필드 자동 완성 방지:

 <input type="text" name="field" autocomplete="nope">

설명 : autocomplete 에서 작업을 계속 <input> , autocomplete="off" 이 작동하지 않음,하지만 당신은 변경할 수 있습니다 off 임의의 문자열, 등에 nope .

작동 위치:

• 크롬: 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64

• 파이어폭스: 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58

Cava

필드에 비표준 이름과 ID를 사용하여 "name" 대신 "name_"을 사용합니다. 그러면 브라우저는 이를 이름 필드로 보지 않습니다.

가장 좋은 점은 모든 필드가 아닌 일부 필드에 이 작업을 수행할 수 있으며 일부 필드는 자동 완성되지만 모든 필드는 자동 완성되지 않는다는 것입니다.

Teifion

autocomplete="off" 추가해도 잘리지 않습니다.

input 유형 속성을 type="search" 변경하십시오.
Google은 검색 유형이 있는 입력에 자동 완성을 적용하지 않습니다.

Matas Vaitkevicius

방금이 문제에 부딪혀 몇 가지 실패를 시도했지만 이것은 나를 위해 작동합니다 ( MDN 에서 찾을 수 있음).

경우에 따라 브라우저는 autocomplete 속성이 off로 설정되어 있어도 자동 완성 값을 계속 제안합니다. 이 예기치 않은 동작은 개발자에게 상당히 당혹스러울 수 있습니다. 실제로 완료되지 않도록 하는 트릭은 다음과 같이 속성에 임의의 문자열을 할당하는 것입니다.

 autocomplete="nope"

AAH-Shoot

추가

autocomplete="off"

form 태그에 추가하면 해당 특정 양식 내의 input 필드에서 브라우저 자동 완성(이전에 해당 필드에 입력한 것)이 비활성화됩니다.

테스트 대상:

• 파이어폭스 3.5, 4 베타
• 인터넷 익스플로러 8
• 크롬

Hash

여기 있습니다:

 function turnOnPasswordStyle() { $('#inputpassword').attr('type', "password"); }

 <input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">

Stav Bodik

이것은 브라우저가 현재 무시하는 보안 문제입니다. 개발자가 정보를 민감하고 저장해서는 안 된다고 생각하더라도 브라우저는 입력 이름을 사용하여 콘텐츠를 식별하고 저장합니다.

두 요청 간에 입력 이름을 다르게 하면 문제가 해결됩니다(그러나 여전히 브라우저 캐시에 저장되고 브라우저 캐시도 증가함).

사용자에게 브라우저 설정에서 옵션을 활성화 또는 비활성화하도록 요청하는 것은 좋은 해결책이 아닙니다. 이 문제는 백엔드에서 수정할 수 있습니다.

여기 수정 사항이 있습니다. 모든 자동 완성 요소는 다음과 같은 숨겨진 입력으로 생성됩니다.

 <?php $r = md5(rand() . microtime(TRUE)); ?> <form method="POST" action="./"> <input type="text" name="<?php echo $r; ?>" /> <input type="hidden" name="__autocomplete_fix_<?php echo $r; ?>" value="username" /> <input type="submit" name="submit" value="submit" /> </form>

그런 다음 서버는 다음과 같이 게시 변수를 처리합니다. ( Demo )

 foreach ($_POST as $key => $val) { $newKey = preg_replace('~^__autocomplete_fix_~', '', $key, 1, $count); if ($count) { $_POST[$val] = $_POST[$newKey]; unset($_POST[$key], $_POST[$newKey]); } }

값은 평소와 같이 액세스할 수 있습니다.

 echo $_POST['username'];

그리고 브라우저는 이전 요청이나 이전 사용자로부터 정보를 제안할 수 없습니다.

이는 브라우저가 자동 완성 속성을 무시/준수하도록 기술을 업데이트하더라도 계속 작동합니다.

Community Wiki

잘못된 XHTML을 방지하기 위해 JavaScript를 사용하여 이 속성을 설정할 수 있습니다. jQuery를 사용한 예:

 <input type="text" class="noAutoComplete" ... /> $(function() { $('.noAutoComplete').attr('autocomplete', 'off'); });

문제는 JavaScript가 없는 사용자가 자동 완성 기능을 사용할 수 있다는 것입니다.

cherouvim

이것이 보고된 지 한참이 지난 후에도 이것이 여전히 문제라는 것이 믿기지 않습니다. Safari 는 요소가 표시되지 않거나 화면 밖에 표시되지 않을 때를 알고 있는 것처럼 보이므로 이전 솔루션은 저에게 효과가 없었지만 다음은 저에게 효과적이었습니다.

 <div style="height:0px; overflow:hidden; "> Username <input type="text" name="fake_safari_username" > Password <input type="password" name="fake_safari_password"> </div>

Ben

autocomplete="off" 가 작동하지 않는 경우에도 다음을 시도하십시오.

 autocorrect="off" autocapitalize="off" autocomplete="off"

jeff

여기에 언급된 해킹 중 어느 것도 Chrome에서 저에게 효과가 없었습니다. 여기에 문제에 대한 토론이 있습니다. https://code.google.com/p/chromium/issues/detail?id=468153#c41

<form> 내부에 이것을 추가하면 작동합니다(적어도 현재로서는).

 <div style="display: none;"> <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" /> </div>

Jakob Løkke Madsen

input 사용할 수 있습니다.

예를 들어;

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

xxxxx

출처 : http:www.stackoverflow.com/questions/2530/how-do-you-disable-browser-autocomplete-on-web-form-field-input-tags