development

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

big-blog 2020. 2. 19. 22:08
반응형

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


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

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

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

"자동 완성"속성이 없습니다.

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


다음 은 자동 완성을 구성하는 문제 및 솔루션을 설명하는 MDC의 좋은 기사입니다. 마이크로 소프트도 여기 비슷한 것을 발표했다 .

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

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

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

최신 정보

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


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

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

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

<!DOCTYPE html>

HTML 4 : 아니오

HTML 5 : 예

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

참조 : W3


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

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


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

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


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

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

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


4 가지 유형의 입력을 모두 잡는 것이 좋습니다.

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

참고:


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");});

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

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

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

autocomplete='off' 

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브라우저가 포기합니다.

다큐 멘 테이션


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

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


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


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

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


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

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


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");
        }
    }
}

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

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

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

<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">

유효한 자동 완성 기능

<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
    /* ]]> */ 
</script>

참고 URL : https://stackoverflow.com/questions/582244/is-there-a-w3c-valid-way-to-disable-autocomplete-in-a-html-form



반응형