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

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

이것이 문제입니다. 개발중인 사이트의 비밀번호를 저장하라는 메시지가 브라우저에 표시되지 않습니다. (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();

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

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

그래서 이건:

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

이거 말고:

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

angular, chrome, firefox와 함께 저에게 적합합니다. (몇 시간 동안 검색하고 테스트했습니다. 크롬의 경우 양식 작업 매개 변수 ( #)가 답이었습니다. @ 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)에 의해 약간의 시간 초과가 필요하다는 것을 깨달았습니다. 리디렉션이 때때로 암호 관리자에 비해 너무 빠릅니다.
• 더 나은 명확한 브라우저 캐시 ... 모든 변경 사항

글쎄, 우리 사이트에서 , "username"유형 "text"라는 이름의 양식 필드 바로 뒤에 "password"이름과 "password"유형의 필드가 뒤 따르는 것처럼 보입니다.

AJAX 로그인을 사용하는 경우 해당 소스 코드를 살펴보십시오. https://gist.github.com/968927

숨겨진 iframe에 로그인 양식을 제출하여 IE와 Chrome이 페이지를 다시로드하지 않고도 실제 로그인을 감지 할 수 있도록 구성됩니다.

여기서 휴리스틱은 매우 간단합니다. 특정 순서로 특정 이름을 가진 필드를 감지합니다. 어느 것, 나는 말할 수 없지만 이것은 Chrome과 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.

또한 로그인 요청 후 로그인 양식이 페이지에 숨겨져 있어도 여전히 존재하는 경우 Chrome이 비밀번호를 기억하도록 제안하지 않는다는 것을 알게되었습니다.

로그인 작업이 실패했다고 생각하여 잘못된 자격 증명을 저장하는 것을 거부합니다.

Chrome 34.0에서 확인되었습니다.

Firefox 소스 코드를 살펴 보는 것이 좋습니다 . 실제로 매우 간단한 코드입니다.

보려는 방법은 _onFormSubmit, _getFormFields및 _getPasswordFields입니다.

당신이 겪고있는 문제가 실제로 Firefox에서 발견되지 않은 버그임을 발견 할 수도 있습니다.) https://bugzilla.mozilla.org/show_bug.cgi?id=1211780

이미 말한 많은 것 외에도 입력 필드가 "비활성화"되어서는 안된다는 것을 깨달았습니다. 먼저 사용자 이름을 요청한 다음 다음 화면에서 비밀번호를 묻는 다단계 로그인이있었습니다. 두 번째 화면에서 이메일을 반복했지만 비활성화하여 Chrome 등을 차단했습니다. al. 사용자 이름에 대한 유효한 필드로 인식됩니다.

비활성화 된 입력 필드를 유지하고 싶었 기 때문에 다음과 같은 해키 해결 방법으로 끝났습니다.

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

나는 이것을 추천하기 위해 지금까지 가지 않을 것이지만 누군가 자신의 코드에서 누군가를 가리킬 수도 있습니다.

1. 첫 번째 요소는 비활성화 된 입력 필드에 사용자 이름을 표시합니다. Disabled는 양식의 일부로 제출되지 않으며 disabled는 브라우저에서 인식되지 않습니다.
2. 두 번째 요소는 유형이 "텍스트"이고 이름 / ID가 "사용자 이름"인 적절한 입력 필드입니다. 이것은 브라우저에서 인식되고 있습니다. 사용자가 편집하는 것을 방지하기 위해 CSS (display : none)로 숨 깁니다.

예를 들어 type = password를 입력하기 전에 양식에 두 개의 type = text가있는 경우 브라우저는 사용자 이름에 가장 가까운 입력 type = text를 감지합니다.

다른 입력에 is = username 및 name = username이있는 것은 중요하지 않습니다.

이 문제를 해결하려면 저장하려는 사용자 이름 입력을 입력 암호 앞에 정확히 입력해야합니다.

행운을 빕니다 :-)

주요 키워드는 여기,

   <input type="password">