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

Question

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

Answer 1

Firefox 30은 무시합니다. autocomplete="off" 비밀번호의 경우 비밀번호를 클라이언트에 저장해야 하는지 여부를 사용자에게 묻는 메시지를 대신 표시하도록 선택합니다.다음 사항에 유의하세요. 해설 2014년 5월 5일부터:

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

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

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

Answer 2

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

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

Answer 3

대부분의 주요 브라우저 및 비밀번호 관리자(정확하게는 IMHO)는 이제 다음을 무시합니다. autocomplete=off.

왜?많은 은행 및 기타 "높은 수준의 보안" 웹사이트가 추가되었습니다. autocomplete=off "보안 목적으로" 로그인 페이지에 로그인하지만 자동 완성 기능이 깨졌기 때문에 사람들이 기억하기 쉽도록 보안이 높은 사이트의 비밀번호를 변경하게 되므로 실제로 보안이 저하됩니다.

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

불행하게도 자동 완성 구현의 버그는 부적절한 양식 필드에 사용자 이름 및/또는 비밀번호 정보를 삽입하여 양식 유효성 검사 오류를 일으키거나 더 나쁜 경우 사용자가 의도적으로 비워 둔 필드에 실수로 사용자 이름을 삽입하는 경우도 있습니다.

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

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

• 크롬 불행하게도 34는 비밀번호 필드를 볼 때마다 사용자/패스로 필드를 자동 완성하려고 시도합니다.이것은 Safari 동작을 변경하는 매우 나쁜 버그입니다.그러나 양식 상단에 다음을 추가하면 비밀번호 자동 완성이 비활성화되는 것 같습니다.

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

아직 IE나 Firefox를 철저하게 조사하지는 않았지만 다른 사람들이 댓글에 정보를 가지고 있으면 답변을 업데이트해 드리겠습니다.

Answer 4

때때로 심지어 자동완성=꺼짐 ~일 것이다 채우는 것을 막지 마라 자격 증명을 잘못된 필드에 입력했지만 사용자 또는 별명 필드에는 입력하지 않았습니다.

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

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

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

업데이트:모바일 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의 비밀번호 필드 앞에 나타나는 가장 가까운 텍스트와 유사한 입력 필드를 자동으로 채웁니다(관찰로 인해 추측).브라우저는 마지막 인스턴스이므로 제어할 수 없으므로,

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

Answer 5

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

이는 Internet Explorer 및 Mozilla FireFox에서 작동하지만 단점은 XHTML 표준이 아니라는 것입니다.

Answer 6

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".

이것은 나에게 잘 작동합니다.

메모:F12를 눌러 변경 사항이 적용되는지 확인하세요. 브라우저는 여러 번 페이지를 캐시에 저장합니다. 이로 인해 작동하지 않는다는 나쁜 인상을 받았지만 브라우저가 실제로 변경 사항을 가져오지 않았습니다.

Answer 7

다른 사람들이 말했듯이 대답은 다음과 같습니다. autocomplete="off"

그러나 나는 언급할 가치가 있다고 생각한다. 왜 어떤 경우에는 이에 대한 답변으로 이것을 사용하는 것이 좋습니다. 복제하다 질문에 따르면 전원을 끄지 않는 것이 좋습니다.

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

신용 카드 보안 코드 필드에서는 이 기능을 끄는 것이 특히 중요합니다.처럼 이 페이지 상태:

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

문제는 공용 컴퓨터(사이버 카페, 도서관 등)라면 다른 사용자가 귀하의 카드 정보를 쉽게 훔칠 수 있으며 귀하의 컴퓨터에서도 악성 웹사이트가 발생할 수 있다는 것입니다. 자동완성 데이터 훔치기.

Answer 8

자동 완성 기능을 비활성화하지 말라는 답변과 다르게 해달라고 간청해야 합니다.

가장 먼저 언급해야 할 점은 로그인 양식 필드에서 자동 완성이 명시적으로 비활성화되지 않은 것은 PCI-DSS 실패라는 것입니다.또한 사용자의 로컬 컴퓨터가 손상되면 자동 완성 데이터가 일반 파일로 저장되므로 공격자가 쉽게 얻을 수 있습니다.

유용성에 대한 논쟁은 확실히 있지만, 자동 완성 기능을 비활성화해야 하는 양식 필드와 비활성화하지 않아야 하는 양식 필드에 대해서는 매우 균형 잡힌 균형이 있습니다.

Answer 9

세 가지 옵션:첫 번째:

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

두번째:

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

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

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

Answer 10

Chrome과의 끝없는 싸움을 임의의 문자를 사용하여 해결했습니다.항상 임의의 문자열로 자동 완성을 렌더링하면 아무것도 기억되지 않습니다.

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

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

Answer 11

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

"위에서 언급 한 양식의 사용자이고 자동 완성 기능을 다시 활성화하려면 '기억'책갈피를 사용하십시오. 북마크 페이지 페이지.그것은 모두를 제거합니다 autocomplete="off" 페이지에 있는 모든 양식의 속성.좋은 싸움과 계속 싸우십시오! "

Answer 12

우리는 실제로 사용했습니다 사브한 사이트에 대한 님의 아이디어입니다.진료실을 운영하기 위한 의료 소프트웨어 웹앱이었습니다.그러나 우리 고객 중 다수는 준공용 터미널을 포함하여 다양한 워크스테이션을 사용하는 외과의사였습니다.따라서 그들은 자동 저장된 비밀번호의 의미를 이해하지 못하거나 주의를 기울이지 않는 의사가 실수로 자신의 로그인 정보에 쉽게 접근할 수 있도록 남겨 두는 일이 없도록 하고 싶었습니다.물론 이는 IE8, FF3.1 등에 등장하기 시작한 개인정보 보호 브라우징 개념 이전의 일입니다.그럼에도 불구하고 많은 의사들은 IT가 변하지 않는 병원에서 구식 브라우저를 사용해야 합니다.

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

Answer 13

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

Answer 14

저는 끝없이 해결책을 시도해 본 결과 다음과 같은 결과를 얻었습니다.

대신에 autocomplete="off" 그냥 그냥 사용 autocomplete="false"

그렇게 간단하고 Google Chrome에서도 매력적으로 작동합니다!

Answer 15

제 생각에는 autocomplete=off HTML 5에서 지원됩니다.

하지만 왜 이 일을 하고 싶은지 스스로에게 물어보세요. 상황에 따라 의미가 있을 수 있지만 단지 목적으로만 해서는 안 됩니다.

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

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

Answer 16

이 대화에서는 어떤 솔루션도 나에게 도움이 되지 않았습니다.

나는 마침내 알아냈다. 순수 HTML 솔루션 요구하는 자바스크립트 없음, 최신 브라우저에서 작동합니다(IE 제외,최소한 1번은 잡아야 했습니다. 그렇죠?) 전체 양식에 대해 자동 완성을 비활성화할 필요는 없습니다.

간단히 자동 완성 기능을 끄세요. 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>

Answer 17

이를 수행하는 비표준 방법이었지만(Mozilla와 Internet Explorer는 여전히 이를 지원한다고 생각합니다) 사용자의 기대를 어지럽히는 것은 나쁜 생각입니다.

사용자가 양식에 신용카드 정보를 입력한 후 다른 사람이 해당 브라우저를 사용하도록 허용하는 경우에는 문제가 되지 않습니다.:)

Answer 18

이것은 나에게 효과적입니다.

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

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

Answer 19

게임에 조금 늦었습니다...하지만 방금 이 문제에 부딪혀 여러 번의 실패를 시도했지만 이 문제는 저에게 효과적입니다. MDN

어떤 경우에는 브라우저가 자동 완성 속성이 OFF로 설정되어 있어도 자동 완성 값을 계속 제안합니다.이 예상치 못한 행동은 개발자에게는 상당히 수수께끼 일 수 있습니다.완전성을 실제로 강제로 강요하는 요령은 다음과 같은 속성에 임의 문자열을 할당하는 것입니다.

autocomplete="nope"

Answer 20

최고의 솔루션:

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

<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

Answer 21

추가

autocomplete="off"

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

테스트 대상:

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

Answer 22

추가해 보세요

읽기 전용 onfocus="this.removeAttribute('readonly');"

게다가

자동완성="꺼짐"

양식 데이터를 기억하고 싶지 않은 입력(username, 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');" >

업데이트: 다음은 이러한 접근 방식을 기반으로 한 전체 예입니다. 드래그 앤 드롭, 복사, 반죽, 등.

<input type="text" name="UserName" style="text-transform:lowercase;" placeholder="Username" 
    autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" 
    oncopy="return false" ondrag="return false" ondrop="return false" 
    onpaste="return false" oncontextmenu="return false" > 

<input type="password" name="Password" placeholder="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" oncopy="return false" ondrag="return false" 
    ondrop="return false" onpaste="return false" oncontextmenu="return false" >

주요 브라우저의 최신 버전에서 테스트되었습니다. Google Chrome, Mozilla Firefox, Microsoft Edge, 등.그리고 아무 문제 없이 작동합니다.도움이 되었기를 바랍니다...

Answer 23

필드에 비표준 이름과 ID를 사용하십시오. 따라서 "name" 대신 "name_"을 사용하십시오.그러면 브라우저는 이를 이름 필드로 보지 않습니다.가장 좋은 점은 전체가 아닌 일부 필드에 대해 이 작업을 수행할 수 있으며 전체 필드가 ​​아닌 일부 필드가 자동 완성된다는 점입니다.

Answer 24

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

<input type="text" class="noAutoComplete" ... />

$(function() {
    $('.noAutoComplete').attr('autocomplete', 'off');
});

문제는 자바스크립트가 없는 사용자가 자동 ​​완성 기능을 사용할 수 있다는 것입니다.

Answer 25

첨가 autocomplete="off" 자르지 않을 거예요.

입력 유형 속성을 다음으로 변경합니다. type="search".
Google은 검색 유형이 포함된 입력에는 자동 완성을 적용하지 않습니다.

Answer 26

만약 그렇다면 이것들도 시도해 보세요 autocomplete="off" 작동하지 않습니다:

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

Answer 27

이 문제가 보고된 지 오랜 시간이 지나도 여전히 문제가 된다는 것이 믿기지 않습니다.Safari는 요소가 표시되지 않거나 화면에서 벗어나는 시기를 아는 것처럼 보였기 때문에 위의 솔루션은 저에게 효과적이지 않았지만 다음은 저에게 효과적이었습니다.

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

누군가에게 유용하길 바랍니다!

Answer 28

이는 현재 브라우저가 무시하는 보안 문제입니다.개발자가 해당 정보가 민감하여 저장해서는 안 된다고 생각하는 경우에도 브라우저는 입력 이름을 사용하여 콘텐츠를 식별하고 저장합니다.두 요청 간에 입력 이름을 다르게 지정하면 문제가 해결됩니다(그러나 브라우저 캐시에는 계속 저장되며 브라우저 캐시도 늘어납니다).사용자에게 브라우저 설정에서 옵션을 활성화 또는 비활성화하도록 요청하는 것은 좋은 해결책이 아닙니다.이 문제는 백엔드에서 해결될 수 있습니다.

여기 내 수정 사항이 있습니다.내 프레임워크에서 구현한 접근 방식입니다.모든 자동 완성 요소는 다음과 같은 숨겨진 입력으로 생성됩니다.

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

그런 다음 서버는 다음과 같은 사후 변수를 처리합니다.

foreach ($_POST as $key => $val)
{
    if(preg_match('#^__autocomplete_fix_#', $key) === 1){
        $n = substr($key, 19);
        if(isset($_POST[$n]))$_POST[$val] = $_POST[$n];
    }
}

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

var_dump($_POST['username']);

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

브라우저가 업데이트되더라도 자동 완성을 무시할지 여부는 모두 매력처럼 작동합니다.이것이 문제를 해결하는 가장 좋은 방법이었습니다.

Answer 29

여기에 언급된 해킹 중 어느 것도 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>

Answer 30

그래서 여기 있습니다:

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

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