HTML 양식에서 자동 완성을 비활성화하는 W3C 유효한 방법이 있습니까?

424

xhtml1-transitional.dtddoctype을 사용하는 경우 다음 HTML을 사용하여 신용 카드 번호를 수집하십시오.

<input type="text" id="cardNumber" name="cardNumber" autocomplete='off'/>

W3C 유효성 검사기에 경고를 표시합니다.

"autocomplete"속성이 없습니다.

양식의 민감한 필드에서 브라우저 자동 완성을 비활성화하는 W3C / 표준 방법이 있습니까?

html  standards  forms  w3c 
— 매트 b
소스
10
사용자의 자동 완성 설정을 엉망으로 만드는 것이 확실합니까? 전원이 켜져 있으면 마음에들 것입니다. 자동 완성 기능은 사용자가 글꼴 크기 등을 변경할 수있는 버튼과 같은 완전히 브라우저 측 기능입니다. 원하는대로 방해해서는 안됩니다
— rmeador
113
신용 카드 번호만큼 민감한 것이라도? 나는 대부분의 브라우저에서 자동 완성 기능이 기본적으로 설정되어 있기 때문에 기억하고 싶어하는 많은 사람들을 생각할 수 없습니다. 그들이 나쁜 것을 기억하고 싶다면 구글 툴바와 같은 양식을 채우는 것을 사용할 수 있습니다.
— matt b
13
내 사용 사례는 약간 다릅니다. 내 자동 완성을 굴리고 브라우저와 충돌하지 않기를 바랍니다. 방금 autocomplete = "off"가 유효하지 않다는 것을 발견했지만 다른 간단한 해결책이없는 것 같습니다 (js로 주입하는 것은 어리 석습니다)
— thepeer
13
@rmeador는 표준 자동 제안 상자에 대해보다 사용자 친화적 인 대안을 제공하기를 원하기 때문입니다. @corydoras는 OSX 무게를 밀지 마십시오.이 질문의 해결에는 도움이되지 않습니다.
— Josh M.
12
문제는 고객의 실수가 100 %에 달하더라도 사기 거래가 발생한 경우 은행이 판매자에게 책임을지게한다는 것입니다. 따라서 경우에 따라 고객 기능을 사용하지 않는 것이 합법적입니다.
— Alexandre H. Tremblay

답변:

421

다음 은 자동 완성을 구성하는 문제 및 해결책을 설명하는 MDC의 좋은 기사입니다. Microsoft는 여기에 비슷한 것을 게시 했습니다. .

솔직히 말해서 이것이 사용자에게 중요한 것이면 이런 방식으로 '위반적인'표준이 적절 해 보입니다. 예를 들어 Amazon은 'autocomplete'속성을 상당히 사용하며 제대로 작동하는 것 같습니다.

경고를 완전히 제거하려면 JavaScript를 사용하여 속성을 지원하는 브라우저 (IE 및 Firefox가 중요한 브라우저)에 속성을 적용 할 수 있습니다. someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );

마지막으로 사이트에서 HTTPS를 사용하는 경우 IE는 자동 완성 기능을 자동으로 해제합니다 (아는 다른 브라우저도 마찬가지입니다).

최신 정보

이 답변은 여전히 ​​많은 공감대를 얻었으므로 HTML5에서 양식 요소에 'autocomplete'속성을 사용할 수 있음을 지적하고 싶었습니다. W3C 의 설명서 를 참조하십시오 .

— 닉 프레 스타
소스
41
Firefox가 https에서 자동 완성 기능을 끄지 않는 것처럼 보이지만 유용한 지식입니다. 감사!
— matt b
3
Safari는 autocomplete = "off"속성을 존중하지 않습니다. 참조 stackoverflow.com/questions/22817801/...
— Skurpi
1
autocomplete사용할 수 있습니다 뿐만 아니라에 form요소 , 그리고 off적어도 가치 작품을chromium-40.0.2214.115
— X-유리
W3C는 (이 댓글의로 초안에) HTML5.1에 자동 완성에 대한 기준을 확대 할 것으로 보인다 w3c.github.io/html/...
— 저스틴 Nafe에게
1
아무것도 작동하지 않으면 텍스트 상자 대신 텍스트 영역을 사용하여 자동 완성을 끄십시오.
— Bsienn
64

W3C가 (X) HTML4와 작동하는 방식을 제안했을 때 매우 놀랐습니다. 자동 완성 기능은 전적으로 브라우저 기반이며 지난 몇 년 동안 소개되었습니다 (HTML4 표준이 작성된 후).

HTML5가 있다면 놀라지 않을 것입니다.

편집 : 내가 생각, HTML5가 수행 하는이 기능을. 페이지를 HTML5로 정의하려면 다음 doctype을 사용하십시오 (예 : 소스 코드에서 첫 번째 텍스트로 입력). 모든 브라우저가이 표준을 아직 지원하지는 않는다.

<!DOCTYPE html>
— 헨릭 폴
소스
7
모든 브라우저는 이전 버전의 Konqueror가이를 지원할 것으로 기대합니다. IE6조차도 그것을 지원합니다. 가는 것은 doctype입니다.
— BalusC
56

HTML 4 : 아니오

HTML 5 : 예

자동 완성 속성은 열거 된 속성입니다. 이 속성에는 두 가지 상태가 있습니다. 에 상태에 키워드지도하고, 오프 오프 상태로 키워드지도. 속성은 생략 될 수도 있습니다. 결 측값 기본값은 켜짐 상태입니다. 오프 상태는 기본적으로 형태의 폼 컨트롤은 자신의 자동 완성 필드 이름 집합을 나타냅니다 오프 ; 켜짐 상태는 기본적으로 양식의 양식 컨트롤에 autofill필드 이름이 "on"으로 설정되어 있음을 나타냅니다 .

참조 : W3

— RuudKok
소스
@ freestock.tk 그래, 다른 것보다 명확하다. 단순함이 중요합니다.
— OverCoder
32

아니요, 그러나 브라우저 자동 완성은 종종 name이전에 채워진 필드 와 동일한 속성을 가진 필드에 의해 트리거됩니다 . 무작위 필드 이름 을 갖는 영리한 방법을 만들 수 있다면 자동 완성은 이전에 입력 한 필드 값을 가져올 수 없습니다.

입력 필드에 " email_<?= randomNumber() ?>" 와 같은 이름을 지정 하고이 데이터를 수신하는 스크립트가 POST "또는 GET 변수를 통해 패턴" email_[some number]"과 일치하는 것을 찾도록하는 경우 이를 제거 할 수 있습니다. 실질적으로) 브라우저와 상관없이 성공을 보장 합니다 .

— 팬텀 왓슨
소스
6
이로 인해 자동 테스트가 더 어려워집니다.
— David Waters
14
테스트 소프트웨어가 임의의 숫자가 추가 될 수있는 필드를 확인하거나 읽을 수없는 경우에만 자동 테스트를 더 어렵게 만듭니다. 자동화 된 테스트 소프트웨어를 업그레이드 할시기입니다.
— corydoras
8
자동 완성 정보는 여전히 브라우저의 데이터 디렉토리에 저장됩니까?
— Joey Adams
2
아마. 그러나 실제로 사용자에게 다시 나타날 것으로 예상되지는 않습니다.
— 팬텀 왓슨
1
Chrome은 이제 특정 사이트의 이름 속성 대신 type = "password"속성을 사용합니다. name = "newpassword"autocomplete = 'off'type = "password"가 있고 자동 완성됩니다! 유형을 변경하면 자동 완성 없음
— Enigma Plus
31

아니요, Mozila Wiki 에는 좋은 기사가 있습니다 .

나는 invalid를 계속 사용합니다 attribute. 실용주의가 유효성 검사를이기는 곳이라고 생각합니다.

— 데이비드 워터스
소스
23

JavaScript로 설정하는 것은 어떻습니까?

var e = document.getElementById('cardNumber');
e.autocomplete = 'off'; // Maybe should be false

완벽하지는 않지만 HTML은 유효합니다.

— 그렉
소스
8
Javascript를 오류를 확인하는 해결 방법으로 사용하는 것은 깔개 밑의 먼지를 청소하는 것과 같습니다. HTML 문서가 유효 해지지 만 결과 HTML + JS 페이지는 유효하지 않습니다.
— fregante
11

jQuery를 사용하면 다음과 같이 할 수 있습니다.

$(document).ready(function(){$("input.autocompleteOff").attr("autocomplete","off");});

원하는 곳에 autocompleteOff 클래스를 사용하십시오.

<input type="text" name="fieldName" id="fieldId" class="firstCSSClass otherCSSClass autocompleteOff" />

모든 입력을 원하는 경우 autocomplete=off간단히 다음을 사용할 수 있습니다.

$(document).ready(function(){$("input").attr("autocomplete","off");});
— 토토 체
소스
4
HTML5 doctype을 사용하는 것이 더 쉽고 좋습니다.
— BalusC
5
어쨌든 이것은 실제로 유효한 HTML이 아니며, HTML autocomplete과 다른 방식으로 (잘못된) 속성을 설정하는 것입니다.
— matt b
이 코드는 저에게 효과적이지 않습니다. 나는 괜찮은 $('input.autocompleteOff').val('');것처럼 사용했습니다 .
— dqd
5
Javascript를 오류를 확인하는 해결 방법으로 사용하는 것은 깔개 밑의 먼지를 청소하는 것과 같습니다. HTML 문서가 유효 해지지 만 결과 HTML + JS 페이지는 유효하지 않습니다.
— fregante
8

보안에 도움이되는 또 다른 방법은 입력 할 때마다 캡타처럼 입력 상자를 다르게 호출하는 것입니다. 이런 식으로 세션은 한 번만 입력을 읽을 수 있으며 자동 완성은 진행되지 않습니다.

브라우저 환경을 방해해야하는지에 대한 rmeador의 질문에 관한 요점은 다음과 같습니다. Contact Management & CRM 시스템을 개발하고 다른 사람의 데이터를 양식에 입력 할 때 자신의 세부 정보를 지속적으로 제안하는 것을 원하지 않습니다.

이것은 우리의 요구에 효과적이지만, 사용자에게 적절한 브라우저를 제공하도록 지시하는 사치가 있습니다 :)

autocomplete='off'
— 수수께끼 플러스
소스
8

autocomplete="off" 이것은 모든 최신 브라우저의 문제를 해결해야합니다.

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

최신 버전의 Gecko 브라우저에서 자동 완성 속성이 완벽하게 작동합니다. 이전 버전의 경우 Netscape 6.2로 돌아가서 "주소"및 "이름"이있는 양식은 예외로 작동했습니다.

최신 정보

경우에 따라 autocomplete 속성이 off로 설정되어 있어도 브라우저는 자동 완성 값을 계속 제안합니다. 이 예기치 않은 동작은 개발자에게 매우 어려울 수 있습니다. 자동 완성 기능을 강제하지 않는 속임수 는 무작위 문자열을 속성 에 할당하는 것 입니다. 예를 들면 다음과 같습니다.

autocomplete="nope"

이 임의의 값은이 아니므로 valid one브라우저가 포기합니다.

다큐 멘 테이션

— 에밀리오 고 르트
소스
최신 브라우저는 선택에 따라 자동 완성 = 해제를 존중하지 않습니다. : / 불행히도.
— Alexus
@Alexus는 매우 빠른 일부 갱신 ... 인터넷 변화를 추가
— 에밀리오 고트에게
6

임의의 '이름'속성을 사용하면 효과적입니다.

양식을 보낼 때 이름 속성을 재설정하여 양식을 보낼 때 이름으로 액세스 할 수 있습니다. (id 속성을 사용하여 이름 저장)

— 오즈 하를렘
소스
5

자동 완성 속성의 위치에 약간의 혼란이 있습니다. 전체 FORM 태그 또는 개별 INPUT 태그에 적용 할 수 있으며 HTML5 이전에는 표준화되지 않았으며 ( 두 위치 모두 명시 적으로 허용 ) 가장 오래된 문서는이 Mozilla 기사에서 FORM 태그 만 언급합니다. 동시에 일부 보안 스캐너는 INPUT 태그 자동 완성에 대한보고가 누락 된 경우 (이 경우에도 불평 것 입니다 부모 폼에서). 이 혼란에 대한보다 자세한 분석은 여기에 게시되어 있습니다 : HTML 형식의 AUTOCOMPLETE = OFF 속성에 대한 혼동 .

— 크라비츠
소스
3

이상적이지는 않지만 텍스트 상자를 렌더링 할 때마다 텍스트 상자의 ID와 이름을 변경할 수 있습니다. 서버 쪽도 추적해야 데이터를 가져올 수 있습니다.

이것이 효과가 있는지 확실하지 않은 것은 단지 생각이었습니다.

— 키에 론
소스
2

더 간단한 방법이 있다고 생각합니다. 임의의 이름 (자바 스크립트를 통해)으로 숨겨진 입력을 작성하고 사용자 이름을 해당 이름으로 설정하십시오. 비밀번호로 반복하십시오. 이런 식으로 백엔드 스크립트는 자동 완성을 어두운 상태로 유지하면서 적절한 필드 이름이 무엇인지 정확히 알고 있습니다.

아마 틀렸을 지 모르지만 그것은 단지 아이디어 일뿐입니다.

— 뱀과 커피
소스
2 
if (document.getElementsByTagName) {
    var inputElements = document.getElementsByTagName("input");
    for (i=0; inputElements[i]; i++) {
        if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
            inputElements[i].setAttribute("autocomplete","off");
        }
    }
}
— 잭턱
소스
-1

이 솔루션은 나와 함께 작동합니다.

$('form,input,select,textarea').attr("autocomplete", "nope");

이 지역에서 자동 완성을 사용하려면 autocomplete="false"ex 요소에 추가하십시오 .

<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">
— 헝 트 ị
소스
-5

유효한 자동 완성 기능

<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
    /* ]]> */ 
</script>
— 사우 샘프 턴 웹 디자인
소스
13
물론 사용자가 JS를 끈 경우 카드 번호를 입력 할 수 없어 주문을 완료 할 수 없습니까? JS 내가 말하고 싶지만 통해 더 나은이 속성을 보완하기 위해 - 최악의 경우 :), JS의 오프 자동 완성의 가능성과 카드 번호 필드를 제공하지만, 적어도 그들은 그냥 ... 생각을 주문할 수 있습니다
— Terry_Brown
3
재미 없어
— Ricardo Pieper 2016 년
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.