Chrome 자동 완성 사용 중지
여러 양식에서 크롬 자동 완성 동작에 문제가 발생했습니다.
양식의 필드는 모두 "email", "name"또는 "password"와 같이 매우 일반적이고 정확한 이름을 가지며 autocomplete="off"설정되어 있습니다.
자동 완성 플래그는 입력을 시작할 때 값 드롭 다운이 표시되는 자동 완성 동작을 성공적으로 비활성화했지만 Chrome이 필드를 자동으로 채우는 값은 변경하지 않았습니다.
이 동작은 크롬이 입력을 잘못 채우는 것을 제외하고는 괜찮을 것입니다 (예 : 전화 입력을 이메일 주소로 채우는 것). 고객이 이에 대해 불만을 제기했기 때문에 여러 사례에서 발생하는 것으로 확인되었으며 내 컴퓨터에서 로컬로 수행 한 작업에 대한 결과가 아닙니다.
내가 생각할 수있는 유일한 현재 해결책은 사용자 지정 입력 이름을 동적으로 생성 한 다음 백엔드에서 값을 추출하는 것입니다. 그러나 이것은이 문제를 해결하는 데 꽤 해이 한 방법처럼 보입니다. 이 문제를 해결하는 데 사용할 수있는 자동 완성 동작을 변경하는 태그 나 단점이 있습니까?
새 Chrome 버전 autocomplete="new-password"의 경우 비밀번호 입력란에 입력하면됩니다. 나는 그것을 확인했고 잘 작동합니다.
이 토론에서 Chrome 개발자로부터 팁을 받았습니다 : https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7
추신 : 자동 채우기를 방지하기 위해 다른 필드에 고유 한 이름을 사용하는 것을 잊지 마십시오.
난 그냥 당신이 사이트에 대한 기억 사용자 이름과 암호가있는 경우, 크롬의 현재 버전에 사용자 이름 / 이메일 주소를 자동 완성 할 것으로 나타났습니다 전에 필드 모든 type=password필드. 필드가 무엇인지는 상관하지 않습니다. 암호가 사용자 이름이되기 전에 필드가 있다고 가정합니다.
오래된 솔루션
사용하기 만하면 <form autocomplete="off">브라우저가 만들 수있는 가정을 기반으로하는 모든 종류의 휴리스틱 필드 채우기뿐만 아니라 암호 사전 채우기를 방지 할 수 있습니다 (종종 잘못됨). <input autocomplete="off">암호 자동 완성에 의해 거의 무시되는 것처럼 보이는 사용 과는 반대로 (즉, Firefox는이를 준수합니다).
업데이트 된 솔루션
이제 Chrome은 <form autocomplete="off">. 따라서 내 원래 해결 방법 (내가 삭제 한)은 이제 모든 분노입니다.
몇 개의 필드를 만들고 "display : none"을 사용하여 숨기면됩니다. 예:
<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
그런 다음 실제 필드를 아래에 두십시오.
댓글을 추가하는 것을 잊지 마십시오. 그렇지 않으면 팀의 다른 사람들이 당신이 무엇을하고 있는지 궁금 할 것입니다!
2016 년 3 월 업데이트
최신 Chrome으로 테스트했습니다. 모두 좋습니다. 이것은 현재 상당히 오래된 대답이지만 우리 팀이 수십 개의 프로젝트에서 수년 동안 그것을 사용하고 있음을 언급하고 싶습니다. 아래의 몇 가지 의견에도 불구하고 여전히 훌륭하게 작동합니다. 필드가 display:none초점을 맞추지 못함을 의미 하기 때문에 접근성에 문제가 없습니다 . 내가 언급했듯이 실제 필드 앞에 놓아야합니다 .
자바 스크립트를 사용하여 양식을 수정하는 경우 추가 트릭이 필요합니다. 양식을 조작하는 동안 가짜 필드를 표시 한 다음 밀리 초 후에 다시 숨 깁니다.
jQuery를 사용하는 예제 코드 (가짜 필드에 클래스를 제공한다고 가정) :
$(".fake-autofill-fields").show();
// some DOM manipulation/ajax here
window.setTimeout(function () {
$(".fake-autofill-fields").hide();
},1);
2018 년 7 월 업데이트
Chrome의 사용 방지 전문가가 열심히 일했기 때문에 내 솔루션이 더 이상 잘 작동하지 않습니다. 그러나 그들은 우리에게 다음과 같은 형태로 뼈를 던졌습니다.
<input type="password" name="whatever" autocomplete="new-password" />
이것은 효과가 있으며 대부분 문제를 해결합니다.
그러나 비밀번호 필드가없고 이메일 주소 만 있으면 작동하지 않습니다. 또한 노란색으로 변하고 미리 채우기를 중단하는 것도 어려울 수 있습니다. 가짜 필드 솔루션을 사용하여이 문제를 해결할 수 있습니다.
사실 때로는 두 개의 가짜 필드에 들러서 다른 곳에서 시도해야합니다. 예를 들어, 양식 시작 부분에 이미 가짜 필드가 있었지만 Chrome은 최근에 '이메일'필드를 다시 미리 채우기 시작했습니다. 그래서 두 배로 줄여서 '이메일'필드 바로 앞에 가짜 필드를 더 많이 입력했는데 수정되었습니다. . 첫 번째 또는 두 번째 필드를 제거하면 잘못된 자동 완성으로 되돌아갑니다.
몇 달 동안의 투쟁 끝에 솔루션이 상상할 수있는 것보다 훨씬 간단하다는 것을 알게되었습니다.
대신 autocomplete="off"사용 autocomplete="false")
그렇게 간단하고 Chrome에서도 매력적으로 작동합니다!
2019 년 8 월 업데이트 (댓글에서 @JonEdiger에 대한 크레딧)
참고 : 많은 온라인 정보에 따르면 브라우저는 이제 autocomplete = 'false'를 autocomplete = 'off'와 동일하게 처리합니다. 적어도 현재로서는이 세 가지 브라우저에 대한 자동 완성을 방지하고 있습니다.
양식 수준에서 설정 한 다음 해제하려는 입력에 대해 '없음'과 같은 유효하지 않은 값으로 설정합니다.
<form autocomplete="off">
<input type="text" id="lastName" autocomplete="none"/>
<input type="text" id="firstName" autocomplete="none"/>
</form>
때로는 autocomplete=off자격 증명을 잘못된 필드에 채우는 것을 막지 못할 수도 있습니다.
해결 방법은 읽기 전용 모드를 사용하여 브라우저 자동 채우기를 비활성화하고 포커스에 쓰기 가능을 설정하는 것입니다.
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
이 focus이벤트는 마우스를 클릭하고 필드를 탭할 때 발생합니다.
최신 정보:
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 의 암호 필드 앞에 나타나는 가장 가까운 textlike-input 필드에 사용자 이름 을 자동 으로 채 웁니다 (관찰 때문에 추측). 브라우저가 마지막 인스턴스이고 제어 할 수 없기 때문에
위의 읽기 전용 수정이 저에게 효과적이었습니다.
검색 상자 기능을 구현하는 경우 type속성을 search다음과 같이 설정해보십시오 .
<input type="search" autocomplete="off" />
이것은 Chrome v48에서 저에게 효과적이며 합법적 인 마크 업으로 보입니다.
https://www.w3.org/wiki/HTML/Elements/input/search
이 시도. 나는 질문이 다소 오래되었다는 것을 알고 있지만 이것은 문제에 대한 다른 접근 방식입니다.
나는 또한 문제가 password필드 바로 위에 있음을 발견했습니다 .
나는 두 가지 방법을 모두 시도했다.
<form autocomplete="off">그리고 <input autocomplete="off">하지만 그들 중 누구도 나를 위해 일하지 않는다.
그래서 아래 코드를 사용하여 수정했습니다. 비밀번호 유형 필드 바로 위에 다른 텍스트 필드를 추가하고 만들었습니다 display:none.
이 같은:
<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />
누군가를 도울 수 있기를 바랍니다.
이유는 모르겠지만 이것은 나를 위해 도움이되었고 효과적이었습니다.
<input type="password" name="pwd" autocomplete="new-password">
이유는 모르겠지만 autocompelete = "new-password"는 자동 완성을 비활성화합니다. 최신 49.0.2623.112 크롬 버전 에서 작동했습니다 .
나를 위해 간단
<form autocomplete="off" role="presentation">
그것을했다.
여러 버전에서 테스트되었으며 마지막 시도는 56.0.2924.87입니다.
이 속성을 추가해야합니다.
autocomplete="new-password"
소스 링크 : 전체 기사
너무 간단하고 까다 롭습니다 :)
구글 크롬은 기본적으로 검색 마다 표시되는 첫 번째 암호 요소 내부 <form>, <body>그리고 <iframe>태그 그래서 당신은 다음과 같은 더미 암호 요소를 추가하기 위해 필요한이 비활성화, 그들을 위해 자동 리필을 사용하려면 :
-
<form>태그 안에 비밀번호 요소가있는 경우<form>오픈 태그 바로 뒤에 더미 요소를 양식의 첫 번째 요소로 넣어야합니다.<form>태그 안에 비밀번호 요소가 없으면<body>오픈 태그 바로 뒤에 더미 요소를 html 페이지의 첫 번째 요소로 넣으십시오.
css를 사용하지 않고 더미 요소를 숨길 필요가
display:none있으므로 기본적으로 다음을 더미 암호 요소로 사용하십시오.<input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
Google이 사람들이 만드는 모든 해결 방법을 재정의하기 때문에 제가 제안한 솔루션은 다음과 같습니다.
옵션 1-클릭시 모든 텍스트 선택
입력 값을 사용자의 예 (예 :) your@email.com또는 필드의 레이블 (예 :)로 설정 Email하고 focus-select입력에 호출 된 클래스를 추가합니다 .
<input type="text" name="email" class="focus-select" value="your@email.com">
<input type="password" name="password" class="focus-select" value="password">
다음은 jQuery입니다.
$(document).on('click', '.focus-select', function(){
$(this).select();
});
나는 Chrome이 가치를 망치는 것을 정말로 볼 수 없습니다. 그것은 미친 것입니다. 그래서 이것이 안전한 해결책이되기를 바랍니다.
옵션 2-이메일 값을 공백으로 설정 한 다음 삭제
이메일 및 비밀번호와 같은 두 가지 입력이 있다고 가정하고 이메일 필드의 값을 " "(공백)으로 설정하고 속성 / 값을 추가 autocomplete="off"한 다음 JavaScript로이를 지 웁니다. 비밀번호 값은 비워 둘 수 있습니다.
사용자가 어떤 이유로 자바 스크립트를 가지고 있지 않다면, 공간을 삭제하지 않을 경우를 대비하여 입력 서버 측을 다듬어야합니다 (어쨌든 그래야합니다).
다음은 jQuery입니다.
$(document).ready(function() {
setTimeout(function(){
$('[autocomplete=off]').val('');
}, 15);
});
테스트에서 가끔 작동하는 것처럼 보였기 15때문에 시간 제한을 설정했습니다. 5따라서이 숫자를 3 배로 늘리는 것이 안전한 내기처럼 보입니다.
초기 값을 공백으로 설정하지 않으면 Chrome이 입력을 자동으로 채운 것처럼 노란색으로 남겨 둡니다.
옵션 3-숨겨진 입력
양식의 시작 부분에 다음을 입력하십시오.
<!-- Avoid Chrome autofill -->
<input name="email" class="hide">
CSS :
.hide{ display:none; }
다른 개발자가 삭제하지 않도록 HTML 노트를 보관하십시오! 또한 숨겨진 입력의 이름이 적절한 지 확인하십시오.
경우에 따라 브라우저는 autocomplete 속성이 off로 설정되어 있어도 자동 완성 값을 계속 제안합니다. 이 예기치 않은 동작은 개발자에게 매우 당혹 스러울 수 있습니다. 자동 완성을 강제로 강제하는 비결 은 속성에 임의의 문자열을 할당하는 것 입니다. 예를 들면 다음과 같습니다.
autocomplete="nope"
이것을 양식에 추가하면 Chrome에서 자동 완성을 사용하지 못하는 것으로 나타났습니다.
<div style="display: none;">
<input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>
여기에서 찾았습니다. https://code.google.com/p/chromium/issues/detail?id=468153#hc41
Chrome이 개발자보다 자동 완성시기를 더 잘 안다고 결정한 것은 정말 실망 스럽습니다. 실제 Microsoft 느낌이 있습니다.
<input readonly onfocus="this.removeAttribute('readonly');" type="text">
onfocus 이벤트와 함께 태그에 readonly 속성을 추가하면 문제가 해결됩니다.
사용자 이름 암호 콤보의 경우 이것은 해결하기 쉬운 문제입니다. Chrome 휴리스틱 스는 다음 패턴을 찾습니다.
<input type="text">
뒤에 :
<input type="password">
다음을 무효화하여이 프로세스를 중단하십시오.
<input type="text">
<input type="text" onfocus="this.type='password'">
Mike Nelsons가 제공 한 솔루션은 Chrome 50.0.2661.102 m에서 저에게 작동하지 않았습니다. display : none이 설정된 동일한 유형의 입력 요소를 추가하는 것만으로 더 이상 기본 브라우저 자동 완성이 비활성화되지 않습니다. 이제 자동 완성을 비활성화하려는 입력 필드의 이름 속성을 복제해야합니다.
또한 입력 필드가 양식 요소 내에있을 때 중복되는 것을 방지하려면 표시되지 않는 요소에 비활성화를 배치해야합니다. 이렇게하면 해당 요소가 양식 작업의 일부로 제출되지 않습니다.
<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">
type = password 를 사용하지 않고 css text-security : disc 를 사용하십시오 .
HTML
<input type='text' name='user' autocomplete='off' />
<input type='text' name='pass' autocomplete='off' class='secure' />
or
<form autocomplete='off'>
<input type='text' name='user' />
<input type='text' name='pass' class='secure' />
</form>
CSS
input.secure {
text-security: disc;
-webkit-text-security: disc;
}
자리 표시자를 유지하는 데 문제가 있지만 크롬 자동 완성을 비활성화하는 경우이 해결 방법을 찾았습니다.
문제
HTML
<div class="form">
<input type="text" placeholder="name"><br>
<input type="text" placeholder="email"><br>
<input type="text" placeholder="street"><br>
</div>
http://jsfiddle.net/xmbvwfs6/1/
위의 예는 여전히 자동 채우기 문제를 생성하지만 required="required"일부 CSS를 사용 하면 자리 표시자를 복제 할 수 있으며 Chrome은 태그를 선택하지 않습니다.
해결책
HTML
<div class="form">
<input type="text" required="required">
<label>Name</label>
<br>
<input type="text" required="required">
<label>Email</label>
<br>
<input type="text" required="required">
<label>Street</label>
<br>
</div>
CSS
input {
margin-bottom: 10px;
width: 200px;
height: 20px;
padding: 0 10px;
font-size: 14px;
}
input + label {
position: relative;
left: -216px;
color: #999;
font-size: 14px;
}
input:invalid + label {
display: inline-block;
}
input:valid + label {
display: none;
}
http://jsfiddle.net/mwshpx1o/1/
우리 모두가이 문제를 가지고 있기 때문에이 문제에 대해 작동하는 jQuery 확장을 작성하는 데 시간을 투자했습니다. Google은 Google을 따르지 않고 HTML 마크 업을 따라야합니다.
(function ($) {
"use strict";
$.fn.autoCompleteFix = function(opt) {
var ro = 'readonly', settings = $.extend({
attribute : 'autocomplete',
trigger : {
disable : ["off"],
enable : ["on"]
},
focus : function() {
$(this).removeAttr(ro);
},
force : false
}, opt);
$(this).each(function(i, el) {
el = $(el);
if(el.is('form')) {
var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable))
el.find('input').autoCompleteFix({force:force});
} else {
var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
if (settings.force && !enabled || disabled)
el.attr(ro, ro).focus(settings.focus).val("");
}
});
};
})(jQuery);
Just add this to a file like /js/jquery.extends.js and include it past jQuery. Apply it to each form elements on load of the document like this:
$(function() {
$('form').autoCompleteFix();
});
In 2016 Google Chrome started ignoring autocomplete=off though it is in W3C. The answer they posted:
The tricky part here is that somewhere along the journey of the web autocomplete=off become a default for many form fields, without any real thought being given as to whether or not that was good for users. This doesn't mean there aren't very valid cases where you don't want the browser autofilling data (e.g. on CRM systems), but by and large, we see those as the minority cases. And as a result, we started ignoring autocomplete=off for Chrome Autofill data.
Which essentially says: we know better what a user wants.
They opened another bug to post valid use cases when autocomplete=off is required
I haven't seen issues connected with autocomplete throught all my B2B application but only with input of a password type.
Autofill steps in if there's any password field on the screen even a hidden one. To break this logic you can put each password field into it's own form if it doesn't break your own page logic.
<input type=name >
<form>
<input type=password >
</form>
There's two pieces to this. Chrome and other browsers will remember previously entered values for field names, and provide an autocomplete list to the user based on that (notably, password type inputs are never remembered in this way, for fairly obvious reasons). You can add autocomplete="off" to prevent this on things like your email field.
However, you then have password fillers. Most browsers have their own built-in implementations and there's also many third-party utilities that provide this functionality. This, you can't stop. This is the user making their own choice to save this information to be automatically filled in later, and is completely outside the scope and sphere of influence of your application.
I really did not like making hidden fields, I think that making it like that will get really confusing really fast.
On the input fields that you want to stop from auto complete this will work. Make the fields read only and on focus remove that attribute like this
<input readonly onfocus="this.removeAttribute('readonly');" type="text">
what this does is you first have to remove the read only attribute by selecting the field and at that time most-likely you will populated with your own user input and stooping the autofill to take over
By setting autocomplete to off should work here I have an example which is used by google in search page. I found this from inspect element.
edit: In case off isn't working then try false or nofill. In my case it is working with chrome version 48.0
Previously entered values cached by chrome is displayed as dropdown select list.This can be disabled by autocomplete=off , explicitly saved address in advanced settings of chrome gives autofill popup when an address field gets focus.This can be disabled by autocomplete="false".But it will allow chrome to display cached values in dropdown.
On an input html field following will switch off both.
Role="presentation" & autocomplete="off"
While selecting input fields for address autofill Chrome ignores those input fields which don't have preceding label html element.
To ensure chrome parser ignores an input field for autofill address popup a hidden button or image control can be added between label and textbox. This will break chrome parsing sequence of label -input pair creation for autofill. Checkboxes are ignored while parsing for address fields
Chrome also considers "for" attribute on label element. It can be used to break parsing sequence of chrome.
Try the following jQuery code which has worked for me.
if ($.browser.webkit) {
$('input[name="password"]').attr('autocomplete', 'off');
$('input[name="email"]').attr('autocomplete', 'off');
}
Here's a dirty hack -
You have your element here (adding the disabled attribute):
<input type="text" name="test" id="test" disabled="disabled" />
And then at the bottom of your webpage put some JavaScript:
<script>
setTimeout(function(){
document.getElementById('test').removeAttribute("disabled");
},100);
</script>
As per Chromium bug report #352347 Chrome no longer respects autocomplete="off|false|anythingelse", neither on forms nor on inputs.
The only solution that worked for me was to add a dummy password field:
<input type="password" class="hidden" />
<input type="password" />
Different solution, webkit based. As mentioned already, anytime Chrome finds a password field it autocompletes the email. AFAIK, this is regardless of autocomplete = [whatever].
To circumvent this change the input type to text and apply the webkit security font in whatever form you want.
.secure-font{
-webkit-text-security:disc;}
<input type ="text" class="secure-font">
From what I can see this is at least as secure as input type=password, it's copy and paste secure. However it is vulnerable by removing the style which will remove asterisks, of course input type = password can easily be changed to input type = text in the console to reveal any autofilled passwords so it's much the same really.
The only way that works for me was:(jQuery required)
$(document).ready(function(e) {
if ($.browser.webkit) {
$('#input_id').val(' ').val('');
}
});
I've faced same problem. And here is the solution for disable auto-fill user name & password on Chrome (just tested with Chrome only)
<!-- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -->
<input type="tel" hidden />
<input type="password" ng-minlength="8" ng-maxlength="30" ng-model="user.password" name="password" class="form-control" required placeholder="Input password">
참고URL : https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
'your programing' 카테고리의 다른 글
| Genymotion VM에 Google Play 서비스를 설치하는 방법 (드래그 앤 드롭 지원 없음)? (0) | 2020.10.02 |
|---|---|
| SO_REUSEADDR과 SO_REUSEPORT는 어떻게 다릅니 까? (0) | 2020.10.02 |
| Android xml 드로어 블 파일에서 원 모양을 정의하는 방법은 무엇입니까? (0) | 2020.10.02 |
| HTTP 헤더는 대소 문자를 구분합니까? (0) | 2020.10.02 |
| Ruby의 "continue"에 해당 (0) | 2020.10.02 |