브라우저는 사용자에게 암호를 저장하라는 메시지를 언제 알 수 있습니까?

브라우저는 사용자에게 암호를 저장하라는 메시지를 언제 알 수 있습니까?

---

이것은 내가 여기서 묻는 질문과 관련이 있습니다. 브라우저에서 암호를 저장하라는 메시지를 표시하려면 어떻게해야합니까?

이것이 문제입니다. 브라우저에서 개발중인 사이트의 비밀번호를 저장하라는 메시지를 표시 할 수 없습니다. (Firefox에서 양식을 제출할 때 가끔 나타나는 표시 줄에 대해 말하는 것입니다. "yoursite.com의 비밀번호를 기억하십니까? 예 / 지금은 안 됨 / 절대 안함")

Firefox (및 비슷한 방식으로 작동하기를 바라는 대부분의 다른 최신 브라우저)의이 기능이 수수께끼처럼 보이기 때문에 이것은 매우 실망 스럽습니다. 이는 브라우저가 수행하는 마술과 같습니다. 코드 나 제출 한 내용 등을 보는 곳에서 사용자 이름 (또는 이메일 주소) 필드와 비밀번호 필드가있는 로그인 양식처럼 "보여지면"제공합니다. 저장합니다.

이 경우를 제외하고는 내 로그인 양식을 사용한 후 사용자에게 해당 옵션을 제공하지 않아서 나를 미치게 만듭니다. :-)

(내 Firefox 설정을 확인했습니다. 브라우저에이 사이트에 대해 "절대"라고 말하지 않았습니다. 메시지가 표시 될 것입니다.)

내 질문

Firefox가 사용자에게 저장하라는 메시지를 표시해야하는시기를 알기 위해 사용하는 휴리스틱은 무엇입니까? Mozilla 소스에 바로 있기 때문에 대답하기가 너무 어렵지 않아야합니다 (어디를 찾아야할지 모르거나 직접 알아 내려고합니다). 나는 또한 이것에 대해 Mozilla 개발자로부터 블로그 게시물이나 다른 유사한 개발자 노트를 찾지 못했습니다.

(이 질문에 Safari 또는 IE에 대한 답변이 있으면 괜찮을 것입니다. 모든 브라우저가 매우 유사한 규칙을 사용한다고 생각하므로 그중 하나에서 작동하도록 할 수 있으면 다른 브라우저에서도 작동합니다.)

(* 귀하의 답변이 쿠키, 암호화 또는 내 로컬 데이터베이스에 암호를 저장하는 방법에 관한 기타 관련이 있다면 내 질문을 오해했을 가능성이 높습니다. :-)

---

필자가 읽은 내용을 바탕으로 Firefox는 form.elements[n].type == "password"(모든 양식 요소를 반복 하여) 비밀번호 를 감지 한 다음 양식 요소를 통해 비밀번호 필드 바로 앞의 텍스트 필드를 역방향으로 검색하여 사용자 이름 필드를 감지 한다고 생각 합니다 (자세한 내용은 여기 ). Javascript에서 비슷한 것을 시도하고 암호 필드를 감지 할 수 있는지 확인할 수 있습니다.

내가 알 수 있듯이 로그인 양식은 a의 일부 여야 <form>합니다. 그렇지 않으면 Firefox가이를 감지하지 못합니다. 설정 id="password"암호 필드에 아마 중 하나를 해치지 않을 수 있습니다.

그래도 여전히 많은 문제가 발생한다면 Mozilla 프로젝트의 개발자 메일 링리스트 중 하나에 문의하는 것이 좋습니다 (이 기능을 설계 한 개발자로부터 응답을받을 수도 있습니다).

---

나는 같은 문제가 있었고 해결책을 찾았습니다.

1. 브라우저가 암호 저장을 요청하도록하려면 사용자 이름과 암호 상자가 양식에 있어야하며 해당 양식이 실제로 제출되어야합니다. 제출 버튼은 onclick 핸들러에서 false를 반환 할 수 있습니다 (따라서 제출이 실제로 발생하지 않음).

2. 브라우저가 이전에 저장된 비밀번호를 복원하도록하려면 입력 상자가 기본 HTML 양식에 존재해야하며 javascript를 통해 동적으로 생성되지 않아야합니다. display : none으로 양식을 만들 수 있습니다.

암호는 페이지가로드되는 즉시 채워지고 전체 세션 동안 거기에 존재하므로 삽입 된 자바 스크립트로 읽을 수 있습니다. 이는 이러한 공격을 훨씬 더 악화시킵니다. 이를 방지하려면 로그인하기 위해 별도의 페이지로 전달하는 것이 합리적이며이 주제를 읽기 시작한 모든 문제를 해결합니다. 부분적인 해결책으로 양식을 제출할 때 필드를 지 웁니다. 사용자가 로그 아웃하고 다시 로그인하려는 경우 브라우저에서 암호를 채우지 않지만 나에게는 사소합니다.

Viliam

---

---

당신은 봐야한다 모질라 암호 관리자 디버깅 페이지와 nsILoginManager의 워드 프로세서 (단지 파이어 폭스 암호 관리를 다루는 방법의 핵심적하자면 기술적 인 세부 사항에 대한) 확장 작가. 암호 관리자가 사이트 및 확장 프로그램과 상호 작용하는 방식을 알고 싶었던 것보다 더 많은 정보를 찾으려면 거기에 대한 답변과 거기에 링크 된 다른 페이지를 파헤칠 수 있습니다.

(특히 암호 관리자 디버깅 문서에서 지적했듯이, 사용자 이름과 암호를 저장하라는 메시지가 표시되지 않도록 html에서 자동 완성 기능이 꺼져 있지 않은지 확인하십시오)

---

이것은 Mac의 Firefox, Chrome 및 Safari에서 작동하는 것 같습니다. Windows에서 테스트되지 않았습니다.

<form id="bridgeForm" action="#" target="loginframe" autocomplete="on">
    <input type="text" name="username" id="username" />
    <input type="password" name="password" id="password"/>
</form>

<iframe id="loginframe" name="loginframe" src="anyblankpage.html"></iframe>

페이지에 추가해야합니다. 동적으로 추가 할 수 없습니다. 양식 및 iframe은 display : none으로 설정할 수 있습니다. iframe의 src를 설정하지 않으면 양식을 한 번 이상 제출할 때까지 프롬프트가 표시되지 않습니다.

그런 다음 양식 submit ()을 호출하십시오.

bridgeForm.submit();

작업은 선택 사항이고 자동 완성은 선택 사항 일 수 있습니다. 테스트하지 않았습니다.

참고 : 일부 브라우저에서는 브라우저가 응답하기 전에 양식이 서버 (로컬 호스트 및 파일 시스템 아님)에서 실행되어야합니다.

그래서 이거:

http://www.mysite.com/myPage.html

이거 말고:

http://126.0.0.1/myPage.html
http://localhost/myPage.html
file://directory/myPage.html

---

앵귤러, 크롬, 파이어 폭스와 함께 저를 위해 작동합니다 : (몇 시간 동안 검색하고 테스트했습니다. 크롬의 경우 폼 액션 매개 변수 ( #)가 답이었습니다. @ 1.21 기가 와트 , 감사합니다 !!! 귀하의 답변 은 매우 귀중했습니다.)

형태

firefox 30.0-숨겨진 iframe 및 제출 버튼 (아래 참조)이 필요하지 않지만 다음과 같이 자동 완성 된 자격 증명을 인식하기위한 "login-form-autofill-fix"지시문이 필요합니다.

<form name="loginForm" login-form-autofill-fix action="#" target="emptyPageForLogin" method="post" ng-submit="login({loginName:grpEmail,password:grpPassword})">
<input type="text" name=username" id="username" ng-model="grpEmail"/>
<input type="password" name="password" id="password" ng-model="grpPassword"/>
<button type="submit">Login</button>
</form>

숨겨진 iframe

chrome 35.0-위의 지시문은 필요하지 않지만 숨겨진 iframe과 실제 양식에 제출 버튼이 필요합니다. 숨겨진 iframe은 다음과 같습니다.

<iframe src="emptyPageForLogin.html" id="emptyPageForLogin" name="emptyPageForLogin" style="display:none"></iframe>

각도 지시문 (jqLite 사용)

이것은 각도 1.2.18에서 작동합니다.

module.directive('loginFormAutofillFix', function() { 
            return function(scope, elem, attrs) {
        if(!attrs.ngSubmit) {
            return;
        }
        setTimeout(function() {
            elem.unbind("submit").bind("submit", function(e) {
                //DO NOT PREVENT!  e.preventDefault(); 
                elem.find("input").triggerHandler("input");
                scope.$apply(attrs.ngSubmit);
            });
        }, 0);
});

개정

• 몇 가지 테스트 후, 크롬은 각도 로그인 방법 (200ms)에 의해 약간의 시간 초과가 필요하다는 것을 깨달았습니다. 리디렉션이 때때로 암호 관리자에 비해 너무 빠릅니다.
• 더 나은 명확한 브라우저 캐시 ... 모든 변경 사항

---

Well, on our site, a form field with name "username" type "text" immediately followed by a field with name "password" and type "password" seems to do the trick.

---

If you're using AJAX login, take a look at that source code: https://gist.github.com/968927

It consists of submitting a login form to a hidden iframe, so that IE and Chrome can detect the actual login, without having to reload the page.

---

I also noticed that Chrome will not offer to remember a password if the login form is still present after the login request, even if it's hidden on the page.

I guess it thinks the login action failed and thus refuse to store invalid credentials.

Seen on Chrome 34.0.

---

I'd recommend looking at the Firefox source code. It's actually pretty straightforward code.

The methods you want to look at are _onFormSubmit, _getFormFields and _getPasswordFields.

You might even find the problem you're having is infact an undiscovered bug in Firefox ;) https://bugzilla.mozilla.org/show_bug.cgi?id=1211780

---

The heuristics are pretty simple here: detect fields with certain names in certain order. Which ones, I can't tell, but this worked fine for me in Chrome and IE:

Username field: name "login", type "text";
Password field: name "password", type "password"
Submit button: element "input", type "submit". 
Element "button" type "submit" did not work.

---

If you have for example two type=text in your form before input type=password, Browser detect the nearest input type=text for your username.

This is not matter another input has is=username and name=username

for solving this problem you must put your username input that you want to save exactly before your input password

Good Luck :-)

---

In addition to a lot that has been said already I realized that the input fields must not be "disabled". We had a multi-step login that first asks for the username and then, on the next screen, for the password. On that second screen we repeated the email but disabled it and that prevented Chrome et. al. from recognizing as a valid field for the username.

Since we really wanted to keep that disabled input field we ended up with this hacky workaround:

<input type="text" name="display-username" id="display-username" value="ENTERED_USERNAME" placeholder="Username" disabled="disabled">
<input type="text" name="username" id="username" value="ENTERED_USERNAME" placeholder="Username" style="display: none;">
<input type="password" name="password" id="password" value="" autofocus="autofocus" autocomplete="on" placeholder="Password" required="required">

I wouldn't go so far to recommend this but maybe it points somebody to something in their own code:

1. The first element displays the username in a disabled input field. Disabled doesn't submit as part of the form and disabled isn't recognized by the browser.
2. The second element is a proper input field, with type = "text" and name/id = "username". This is being recognized by the browser. In order to prevent the user from editing it we hide it with CSS (display:none).

---

The major keyword is here,

   <input type="password">

참고URL : https://stackoverflow.com/questions/2398763/how-does-browser-know-when-to-prompt-user-to-save-password