ปิดการใช้งานฟังก์ชั่น 'บันทึกรหัสผ่าน'

หนึ่งในความสุขของการทำงานให้กับหน่วยงานด้านการดูแลสุขภาพของรัฐบาลคือการจัดการกับความหวาดระแวงทั้งหมดเกี่ยวกับการจัดการกับ PHI (ข้อมูลด้านสุขภาพที่ได้รับการคุ้มครอง) อย่าเข้าใจฉันผิดฉันทุกคนทำทุกอย่างเท่าที่จะทำได้เพื่อปกป้องข้อมูลส่วนบุคคลของผู้คน (สุขภาพการเงินนิสัยในการท่องเว็บ ฯลฯ ) แต่บางครั้งผู้คนก็หวาดกลัวเกินไป

กรณีตรงประเด็น: หนึ่งในลูกค้าของเรารัฐพบว่าเบราว์เซอร์มีคุณสมบัติที่มีประโยชน์ในการบันทึกรหัสผ่านของคุณ เราทุกคนรู้ดีว่ามันมีมานานแล้วและเป็นทางเลือกที่สมบูรณ์และขึ้นอยู่กับผู้ใช้ปลายทางในการตัดสินใจว่าจะใช้อย่างชาญฉลาดหรือไม่ อย่างไรก็ตามมีความโกลาหลเล็กน้อยในขณะนี้และเรากำลังถูกขอให้ค้นหาวิธีปิดการใช้งานฟังก์ชั่นนั้นสำหรับเว็บไซต์ของเรา

คำถาม : มีวิธีใดบ้างที่เว็บไซต์จะบอกเบราว์เซอร์ว่าจะไม่เสนอให้จำรหัสผ่าน? ฉันใช้เวลานานในการพัฒนาเว็บไซต์ แต่ไม่รู้ว่าฉันเคยเจอมาก่อน

ความช่วยเหลือใด ๆ ที่ชื่นชม

ฉันไม่แน่ใจว่าจะใช้งานได้กับเบราว์เซอร์ทั้งหมดหรือไม่ แต่คุณควรลองตั้งค่าการเติมข้อความอัตโนมัติ = "ปิด" ในแบบฟอร์ม

<form id="loginForm" action="login.cgi" method="post" autocomplete="off">

วิธีที่ง่ายที่สุดและง่ายที่สุดในการปิดใช้งานการแจ้งเตือนแบบฟอร์มและรหัสผ่านและป้องกันไม่ให้ข้อมูลในฟอร์มถูกแคชไว้ในประวัติเซสชันคือการใช้แอตทริบิวต์องค์ประกอบแบบฟอร์มเติมข้อความอัตโนมัติที่มีค่า "ปิด"

จากhttp://developer.mozilla.org/En/How_to_Turn_Off_Form_Autocompletion

การวิจัยเล็กน้อยแสดงให้เห็นว่าสิ่งนี้ทำงานได้ใน IE แต่ฉันจะไม่รับประกัน;)

@Joseph : หากเป็นข้อกำหนดที่เข้มงวดในการผ่านการตรวจสอบ XHTML ด้วยมาร์กอัปจริง (ไม่รู้ว่ามันจะเป็นอย่างไร) ในทางทฤษฎีคุณสามารถเพิ่มแอตทริบิวต์นี้ด้วย javascript หลังจากนั้น แต่ผู้ใช้ที่ปิดใช้งาน js อาจเป็นจำนวนผู้ใช้ที่ละเลย หรือศูนย์หากเว็บไซต์ของคุณต้องการ js) จะยังคงมีการบันทึกรหัสผ่านไว้

ตัวอย่างด้วย jQuery:

$('#loginForm').attr('autocomplete', 'off');

นอกจาก

autocomplete="off"

ใช้

readonly onfocus="this.removeAttribute('readonly');"

สำหรับปัจจัยการผลิตที่คุณไม่ต้องการให้พวกเขาจำข้อมูลในแบบฟอร์ม ( username, passwordฯลฯ ) ที่แสดงด้านล่าง:

<input type="text" name="UserName" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

<input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

การทดสอบในรุ่นล่าสุดของเบราว์เซอร์หลัก ได้แก่Google Chrome, Mozilla Firefox, Microsoft Edgeฯลฯ และทำงานเช่นเสน่ห์ หวังว่านี่จะช่วยได้

ฉันได้รับการดิ้นรนกับปัญหานี้ในขณะที่มีการเปลี่ยนแปลงที่ไม่ซ้ำกับปัญหา ผู้ใช้ที่มีสิทธิ์ไม่สามารถใช้รหัสผ่านที่บันทึกไว้ได้ แต่ผู้ใช้ปกติจำเป็นต้องใช้ นี่หมายความว่าผู้ใช้ที่มีสิทธิ์ต้องเข้าสู่ระบบสองครั้งครั้งที่สองบังคับใช้ไม่มีรหัสผ่านที่บันทึกไว้

ด้วยข้อกำหนดนี้autocomplete="off"วิธีมาตรฐานไม่สามารถใช้ได้กับทุกเบราว์เซอร์เนื่องจากรหัสผ่านอาจถูกบันทึกไว้จากการเข้าสู่ระบบครั้งแรก เพื่อนร่วมงานพบวิธีแก้ปัญหาเพื่อแทนที่ฟิลด์รหัสผ่านเมื่อถูกเน้นด้วยฟิลด์รหัสผ่านใหม่จากนั้นมุ่งเน้นไปที่ฟิลด์รหัสผ่านใหม่ (จากนั้นเชื่อมต่อตัวจัดการเหตุการณ์เดียวกัน) สิ่งนี้ทำงานได้ (ยกเว้นมันทำให้เกิดการวนซ้ำไม่สิ้นสุดใน IE6) อาจจะมีวิธีแก้ไข แต่สิ่งนั้นทำให้ฉันเป็นไมเกรน

ในที่สุดฉันพยายามที่จะมีชื่อผู้ใช้และรหัสผ่านนอกแบบฟอร์ม ด้วยความประหลาดใจของฉันสิ่งนี้ได้ผล! มันทำงานบน IE6 และ Firefox และ Chrome เวอร์ชันปัจจุบันบน Linux ฉันไม่ได้ทำการทดสอบเพิ่มเติม แต่ฉันคิดว่ามันจะทำงานได้ดีที่สุดถ้าไม่ใช่เบราว์เซอร์ทั้งหมด (แต่มันจะไม่ทำให้ฉันแปลกใจถ้ามีเบราว์เซอร์อยู่ที่นั่นซึ่งไม่สนใจว่าจะไม่มีแบบฟอร์ม)

นี่คือตัวอย่างโค้ดพร้อมกับ jQuery เพื่อให้มันทำงาน:

<input type="text" id="username" name="username"/>
<input type="password" id="password" name="password"/>

<form id="theForm" action="/your/login" method="post">
  <input type="hidden" id="hiddenUsername" name="username"/>
  <input type="hidden" id="hiddenPassword" name="password"/>
  <input type="submit" value="Login"/>
</form>

<script type="text/javascript" language="JavaScript">
  $("#theForm").submit(function() {
    $("#hiddenUsername").val($("#username").val());
    $("#hiddenPassword").val($("#password").val());
  });
  $("#username,#password").keypress(function(e) {
    if (e.which == 13) {
      $("#theForm").submit();
    }
  });
</script>

มันเป็นโพสต์ที่เก่ามาก แต่ฉันก็ยังจะให้ทางออกซึ่งทีมของฉันพยายามที่จะประสบความสำเร็จเป็นเวลานาน เราเพิ่งเพิ่มฟิลด์ป้อนข้อมูลชนิดใหม่ = "รหัสผ่าน" ภายในฟอร์มและรวมไว้ใน div และทำให้ div ถูกซ่อนไว้ ตรวจสอบให้แน่ใจว่า div นี้อยู่ก่อนการป้อนรหัสผ่านจริง สิ่งนี้ใช้ได้สำหรับเราและมันไม่ได้ให้ตัวเลือกบันทึกรหัสผ่านใด ๆ

Plunk - http://plnkr.co/edit/xmBR31NQMUgUhYHBiZSg?p=preview

HTML:

<form method="post" action="yoururl">
      <div class="hidden">
        <input type="password"/>
      </div>
      <input type="text" name="username" placeholder="username"/>
      <input type="password" name="password" placeholder="password"/>
    </form>

CSS:

.hidden {display:none;}

คุณสามารถป้องกันไม่ให้เบราว์เซอร์จับคู่แบบฟอร์มด้วยการสุ่มชื่อที่ใช้สำหรับฟิลด์รหัสผ่านในแต่ละรายการ เบราว์เซอร์จะเห็นรหัสผ่านสำหรับ URL เดียวกัน แต่ไม่แน่ใจว่าเป็นรหัสผ่านเดียวกันรหัสผ่านเดียวกันบางทีมันอาจควบคุมอย่างอื่น

อัปเดต:โปรดทราบว่าสิ่งนี้ควรเพิ่มเติมจากใช้การเติมข้อความอัตโนมัติหรือยุทธวิธีอื่น ๆ ไม่ใช่การแทนที่สำหรับพวกเขาด้วยเหตุผลที่ระบุโดยผู้อื่น

นอกจากนี้ยังทราบว่านี้จะป้องกันไม่ให้เบราว์เซอร์จากอัตโนมัติเสร็จสิ้นรหัสผ่าน มันจะป้องกันไม่ให้มันเก็บรหัสผ่านในระดับใดก็ได้ตามความปลอดภัยที่เบราว์เซอร์เลือกใช้

ใช้การรับรองความถูกต้องด้วยสองปัจจัยจริงเพื่อหลีกเลี่ยงการพึ่งพารหัสผ่านเพียงอย่างเดียวซึ่งอาจถูกเก็บไว้ในหลาย ๆ ที่มากกว่าแคชของเบราว์เซอร์ของผู้ใช้

วิธีที่สะอาดที่สุดคือใช้autocomplete="off"แอตทริบิวต์ tag แต่ Firefox ไม่เชื่อฟังอย่างถูกต้องเมื่อคุณสลับฟิลด์ด้วย Tab

วิธีเดียวที่คุณสามารถหยุดสิ่งนี้คือการเพิ่มฟิลด์รหัสผ่านที่ซ่อนอยู่ปลอมซึ่งหลอกให้เบราว์เซอร์ใส่รหัสผ่านที่นั่น

<input type="text" id="username" name="username"/>
<input type="password" id="prevent_autofill" autocomplete="off" style="display:none" tabindex="-1" />
<input type="password" id="password" autocomplete="off" name="password"/>

มันเป็นแฮ็คที่น่าเกลียดเพราะคุณเปลี่ยนพฤติกรรมของเบราว์เซอร์ซึ่งควรถือว่าเป็นการปฏิบัติที่ไม่ดี ใช้มันเฉพาะในกรณีที่คุณต้องการจริงๆ

หมายเหตุ: สิ่งนี้จะหยุดการป้อนรหัสผ่านอัตโนมัติได้อย่างมีประสิทธิภาพเนื่องจาก FF จะ "บันทึก" ค่าของ#prevent_autofill(ซึ่งว่างเปล่า) และจะพยายามเติมรหัสผ่านที่บันทึกไว้ที่นั่นเพราะจะใช้type="password"อินพุตแรกที่พบใน DOM หลังจากชื่อผู้ใช้ อินพุต

ฉันได้ทดสอบว่าการเพิ่มการเติมข้อความอัตโนมัติ = "ปิด" ในแท็กแบบฟอร์มในเบราว์เซอร์หลักทั้งหมด ในความเป็นจริงคนส่วนใหญ่ในสหรัฐอเมริกาใช้ IE8 จนถึงขณะนี้

1. IE8, IE9, IE10, Firefox, Safari ทำงานได้ดี

   เบราว์เซอร์ไม่ถาม "บันทึกรหัสผ่าน" นอกจากนี้ชื่อผู้ใช้และรหัสผ่านที่บันทึกไว้ก่อนหน้านี้ไม่ได้บรรจุ

2. Chrome & IE 11 ไม่สนับสนุนคุณสมบัติการเติมข้อความอัตโนมัติ = "ปิด"
3. FF สนับสนุนการเติมข้อความอัตโนมัติ = "ปิด" แต่บางครั้งข้อมูลประจำตัวที่บันทึกไว้ที่มีอยู่จะถูกเติม

อัปเดตเมื่อวันที่ 11 มิถุนายน 2014

สุดท้ายด้านล่างเป็นโซลูชันเบราว์เซอร์ข้ามโดยใช้ javascript และทำงานได้ดีในเบราว์เซอร์ทั้งหมด

จำเป็นต้องลบแท็ก "form" ในแบบฟอร์มเข้าสู่ระบบ หลังจากการตรวจสอบด้านลูกค้าใส่ข้อมูลประจำตัวนั้นในรูปแบบที่ซ่อนอยู่และส่ง

นอกจากนี้ให้เพิ่มสองวิธี อันที่หนึ่งสำหรับการตรวจสอบความถูกต้อง "validateLogin ()" และอีกอันสำหรับฟังการป้อนเหตุการณ์ในขณะที่คลิกป้อนในกล่องข้อความ / รหัสผ่าน / ปุ่ม "checkAndSubmit ()" เพราะตอนนี้แบบฟอร์มการเข้าสู่ระบบไม่มีแท็กแบบฟอร์มดังนั้นให้ป้อนเหตุการณ์ที่ไม่ทำงานที่นี่

HTML

<form id="HiddenLoginForm" action="" method="post">
<input type="hidden" name="username" id="hidden_username" />
<input type="hidden" name="password" id="hidden_password" />
</form>

Username: <input type="text" name="username" id="username" onKeyPress="return checkAndSubmit(event);" /> 
Password: <input type="text" name="password" id="password" onKeyPress="return checkAndSubmit(event);" /> 
<input type="button" value="submit" onClick="return validateAndLogin();" onKeyPress="return checkAndSubmit(event);" /> 

จาวาสคริ

//For validation- you can modify as you like
function validateAndLogin(){
  var username = document.getElementById("username");
  var password = document.getElementById("password");

  if(username  && username.value == ''){
    alert("Please enter username!");
    return false;
  }

  if(password && password.value == ''){
    alert("Please enter password!");
    return false;
  }

  document.getElementById("hidden_username").value = username.value;
  document.getElementById("hidden_password").value = password.value;
  document.getElementById("HiddenLoginForm").submit();
}

//For enter event
function checkAndSubmit(e) {
 if (e.keyCode == 13) {
   validateAndLogin();
 }
}

โชคดี!!!

ไม่จริง - สิ่งเดียวที่คุณทำได้จริงคือเสนอคำแนะนำในเว็บไซต์ บางทีก่อนที่จะลงชื่อเข้าใช้ครั้งแรกคุณสามารถแสดงแบบฟอร์มพร้อมข้อมูลที่ระบุว่าไม่แนะนำให้อนุญาตให้เบราว์เซอร์จัดเก็บรหัสผ่าน

จากนั้นผู้ใช้จะทำตามคำแนะนำทันทีจดบันทึกรหัสผ่านลงในบันทึกโพสต์และบันทึกเทปลงในมอนิเตอร์

สิ่งที่ฉันทำคือการรวมกันของ autocomplete = "off" และการล้างฟิลด์รหัสผ่านโดยใช้ javascript / jQuery

ตัวอย่าง jQuery:

$(function() { 
    $('#PasswordEdit').attr("autocomplete", "off");
    setTimeout('$("#PasswordEdit").val("");', 50); 
});

ด้วยการใช้setTimeout()คุณสามารถรอให้เบราว์เซอร์กรอกข้อมูลฟิลด์ให้เสร็จก่อนที่คุณจะยกเลิกมิฉะนั้นเบราว์เซอร์จะเติมข้อความอัตโนมัติทุกครั้งหลังจากที่คุณล้างข้อมูล

ถ้า autocomplete = "off" ไม่ทำงาน ... ลบแท็กฟอร์มและใช้แท็ก div แทนจากนั้นส่งค่าฟอร์มโดยใช้ jquery ไปยังเซิร์ฟเวอร์ สิ่งนี้ใช้ได้สำหรับฉัน

เนื่องจากการเติมข้อความอัตโนมัติ = "ปิด" ไม่สามารถใช้งานได้กับฟิลด์รหัสผ่านคุณต้องใช้จาวาสคริปต์ นี่คือวิธีแก้ปัญหาอย่างง่ายตามคำตอบที่พบที่นี่

เพิ่มแอตทริบิวต์ data-password-autocomplete = "off" ในช่องรหัสผ่านของคุณ:

<input type="password" data-password-autocomplete="off">

รวม JS ต่อไปนี้:

$(function(){
    $('[data-password-autocomplete="off"]').each(function() {
        $(this).prop('type', 'text');
        $('<input type="password"/>').hide().insertBefore(this);
        $(this).focus(function() {
            $(this).prop('type', 'password');
        });
    });     
});

โซลูชันนี้ใช้ได้กับทั้ง Chrome และ FF

เพื่อให้ผู้คนรับรู้ - คุณลักษณะ 'เติมข้อความอัตโนมัติ' ทำงานได้เกือบตลอดเวลา แต่ผู้ใช้ระดับสูงสามารถใช้งานได้โดยใช้ bookmarklet

การมีเบราว์เซอร์บันทึกรหัสผ่านของคุณจะเพิ่มการป้องกันการล็อกคีย์ดังนั้นตัวเลือกที่ปลอดภัยที่สุดคือการบันทึกรหัสผ่านในเบราว์เซอร์ แต่ป้องกันด้วยรหัสผ่านหลัก (อย่างน้อยใน Firefox)

ฉันมีงานทำซึ่งอาจช่วยได้

คุณสามารถแฮ็คแบบอักษรที่กำหนดเองได้ ดังนั้นสร้างฟอนต์ที่กำหนดเองโดยใช้อักขระทั้งหมดเป็นจุด / วงกลม / ดาว ใช้สิ่งนี้เป็นแบบอักษรที่กำหนดเองสำหรับเว็บไซต์ของคุณ ตรวจสอบวิธีการทำใน inkscape: วิธีสร้างแบบอักษรของคุณเอง

จากนั้นในการเข้าสู่ระบบของคุณใช้แบบฟอร์ม:

<form autocomplete='off'  ...>
   <input type="text" name="email" ...>
   <input type="text" name="password" class="password" autocomplete='off' ...>
   <input type=submit>
</form>

จากนั้นเพิ่ม CSS ของคุณ:

@font-face {
    font-family: 'myCustomfont';
    src: url('myCustomfont.eot');
    src: url('myCustomfont?#iefix') format('embedded-opentype'),
         url('myCustomfont.woff') format('woff'),
         url('myCustomfont.ttf') format('truetype'),
         url('myCustomfont.svg#myCustomfont') format('svg');
    font-weight: normal;
    font-style: normal;

}
.password {
  font-family:'myCustomfont';
}

เบราว์เซอร์ข้ามสวยเข้ากันได้ ฉันได้ลอง IE6 +, FF, Safari และ Chrome แล้ว เพียงตรวจสอบให้แน่ใจว่าแบบอักษร oet ที่คุณแปลงไม่ได้รับความเสียหาย หวังว่าจะช่วย

วิธีที่ง่ายที่สุดในการแก้ปัญหานี้คือการวางฟิลด์ INPUT นอกแท็ก FORM และเพิ่มสองฟิลด์ที่ซ่อนอยู่ภายในแท็ก FORM จากนั้นในฟังเหตุการณ์ส่งก่อนที่ข้อมูลในแบบฟอร์มจะถูกส่งไปยังเซิร์ฟเวอร์คัดลอกค่าจากการป้อนข้อมูลที่มองเห็นไปยังคนที่มองไม่เห็น

นี่คือตัวอย่าง (คุณไม่สามารถเรียกใช้ได้ที่นี่เนื่องจากการกระทำในแบบฟอร์มไม่ได้ถูกกำหนดเป็นสคริปต์การเข้าสู่ระบบจริง):

<!doctype html>
<html>
<head>
  <title>Login & Save password test</title>
  <meta charset="utf-8">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>

  <body>
      <!-- the following fields will show on page, but are not part of the form -->
      <input class="username" type="text" placeholder="Username" />
      <input class="password" type="password" placeholder="Password" />

      <form id="loginForm" action="login.aspx" method="post">
        <!-- thw following two fields are part of the form, but are not visible -->
        <input name="username" id="username" type="hidden" />
        <input name="password" id="password" type="hidden" />
        <!-- standard submit button -->
        <button type="submit">Login</button>
      </form>

    <script>
      // attache a event listener which will get called just before the form data is sent to server
      $('form').submit(function(ev) {
        console.log('xxx');
        // read the value from the visible INPUT and save it to invisible one
        // ... so that it gets sent to the server
        $('#username').val($('.username').val());
        $('#password').val($('.password').val());
      });
    </script>

  </body>
</html>

js ของฉัน (jQuery) แก้ปัญหาคือการเปลี่ยนประเภทการใส่รหัสผ่านให้กับข้อความในแบบฟอร์มการส่ง รหัสผ่านอาจปรากฏให้เห็นเป็นครั้งที่สองดังนั้นฉันจึงซ่อนอินพุตก่อนหน้านั้น ฉันจะไม่ใช้สิ่งนี้สำหรับแบบฟอร์มการเข้าสู่ระบบแต่มันมีประโยชน์ (พร้อมกับ autocomplete = "off") ตัวอย่างเช่นภายในส่วนการดูแลของเว็บไซต์

ลองวางสิ่งนี้ลงในคอนโซล (พร้อม jQuery) ก่อนที่คุณจะส่งแบบฟอร์ม

$('form').submit(function(event) {
    $(this).find('input[type=password]').css('visibility', 'hidden').attr('type', 'text');
});

ทดสอบกับ Chrome 44.0.2403.157 (64-bit)

ฉันทดสอบวิธีแก้ปัญหามากมาย ชื่อฟิลด์รหัสผ่านแบบไดนามิก, ฟิลด์รหัสผ่านหลายรายการ (มองไม่เห็นสำหรับของปลอม), เปลี่ยนประเภทอินพุตจาก "ข้อความ" เป็น "รหัสผ่าน", การเติมข้อความอัตโนมัติ = "ปิด", การเติมข้อความอัตโนมัติ = "รหัสผ่านใหม่", ... เบราว์เซอร์

เพื่อกำจัดการจดจำรหัสผ่านในที่สุดฉันก็ถือว่ารหัสผ่านเป็นช่องป้อนข้อมูลและ "เบลอ" ข้อความที่พิมพ์

"ปลอดภัย" น้อยกว่าเขตข้อมูลรหัสผ่านดั้งเดิมเนื่องจากการเลือกข้อความที่พิมพ์จะแสดงเป็นข้อความที่ชัดเจน แต่ไม่ได้จดจำรหัสผ่าน นอกจากนี้ยังขึ้นอยู่กับการเปิดใช้งาน Javascript

คุณจะประเมินความเสี่ยงของการใช้ตัวเลือกการจดจำข้อเสนอด้านล่างกับรหัสผ่านจากตัวนำทาง

ในขณะที่ผู้ใช้สามารถจัดการรหัสผ่าน (ไม่ จำกัด ต่อเว็บไซต์) โดยผู้ใช้มันเป็นเรื่องปกติสำหรับคอมพิวเตอร์ส่วนบุคคลไม่ใช่สำหรับคอมพิวเตอร์สาธารณะหรือคอมพิวเตอร์สาธารณะ

ฉันเป็นกรณีของ ERP ที่ใช้กับคอมพิวเตอร์ที่ใช้ร่วมกันดังนั้นฉันจะลองแก้ไขปัญหาของฉันด้านล่าง

<input style="background-color: rgb(239, 179, 196); color: black; text-shadow: none;" name="password" size="10" maxlength="30" onfocus="this.value='';this.style.color='black'; this.style.textShadow='none';" onkeypress="this.style.color='transparent'; this.style.textShadow='1px 1px 6px green';" autocomplete="off" type="text">

มาร์คัสยกประเด็นสำคัญ ฉันตัดสินใจค้นหาautocompleteคุณสมบัติและได้รับสิ่งต่อไปนี้:

ข้อเสียเพียงอย่างเดียวของการใช้คุณลักษณะนี้คือมันไม่ได้มาตรฐาน (ใช้งานได้ในเบราว์เซอร์ IE และ Mozilla) และจะทำให้การตรวจสอบ XHTML ล้มเหลว ฉันคิดว่านี่เป็นกรณีที่มันสมเหตุสมผลในการทำลายการตรวจสอบ (ที่มา )

ดังนั้นฉันจะต้องบอกว่าแม้ว่ามันจะไม่ได้ผล 100% ทั่วกระดาน แต่มันก็จัดการในเบราว์เซอร์หลัก ๆ ดังนั้นมันจึงเป็นทางออกที่ดี

ฉันพยายามด้านบนautocomplete="off"และยังประสบความสำเร็จ หากคุณกำลังใช้งานเชิงมุม js คำแนะนำของฉันคือไปกับปุ่มและ ng-click

<button type="button" class="" ng-click="vm.login()" />

นี่มีคำตอบที่ยอมรับแล้วและเพิ่มสิ่งนี้ถ้ามีคนไม่สามารถแก้ปัญหาด้วยคำตอบที่ยอมรับเขาสามารถไปกับกลไกของฉัน

ขอบคุณสำหรับคำถามและคำตอบ

วิธีหนึ่งที่ฉันรู้คือใช้ JavaScript (เช่น) เพื่อคัดลอกค่าออกจากฟิลด์รหัสผ่านก่อนส่งแบบฟอร์ม

ปัญหาหลักของเรื่องนี้คือการแก้ปัญหาเชื่อมโยงกับ JavaScript

จากนั้นอีกครั้งหากสามารถเชื่อมโยงกับ JavaScript คุณอาจแฮชรหัสผ่านบนฝั่งไคลเอ็นต์ก่อนส่งคำขอไปยังเซิร์ฟเวอร์

ปัญหาที่แท้จริงนั้นลึกกว่าการเพิ่มคุณลักษณะให้กับ HTML ของคุณ - นี่เป็นข้อกังวลด้านความปลอดภัยทั่วไปนั่นคือสาเหตุที่ผู้คนคิดค้นคีย์ฮาร์ดแวร์และสิ่งอื่น ๆ เพื่อความปลอดภัย

ลองนึกภาพคุณมี autocomplete = "off" ทำงานอย่างสมบูรณ์ในเบราว์เซอร์ทั้งหมด สิ่งนั้นจะช่วยรักษาความปลอดภัยหรือไม่? แน่นอนไม่มี ผู้ใช้จะเขียนรหัสผ่านลงในตำราเรียนบนสติกเกอร์ที่ติดอยู่กับจอมอนิเตอร์ซึ่งผู้เยี่ยมชมสำนักงานทุกคนสามารถเห็นได้บันทึกไว้ในไฟล์ข้อความบนเดสก์ท็อปและอื่น ๆ

โดยทั่วไปแอปพลิเคชันเว็บและนักพัฒนาเว็บจะไม่รับผิดชอบต่อความปลอดภัยของผู้ใช้ ผู้ใช้ขั้นปลายสามารถป้องกันตนเองได้เท่านั้น โดยหลักแล้วพวกเขาจะต้องเก็บรหัสผ่านทั้งหมดไว้ในหัวและใช้ฟังก์ชันการรีเซ็ตรหัสผ่าน (หรือติดต่อผู้ดูแลระบบ) ในกรณีที่พวกเขาลืม มิฉะนั้นจะมีความเสี่ยงที่รหัสผ่านสามารถถูกมองเห็นและถูกขโมยได้

ดังนั้นไม่ว่าคุณจะมีนโยบายการรักษาความปลอดภัยที่บ้าคลั่งพร้อมกุญแจฮาร์ดแวร์ (เช่นธนาคารบางแห่งเสนอให้กับธนาคารทางอินเทอร์เน็ต แน่นอนว่านี่มันเกินความจริงไปเล็กน้อย สิ่งสำคัญคือต้องเข้าใจสิ่งที่คุณพยายามป้องกัน:

1. ไม่ได้รับอนุญาต แบบฟอร์มการเข้าสู่ระบบที่ง่ายที่สุดนั้นเพียงพอแล้ว บางครั้งก็มีมาตรการเพิ่มเติมเช่นคำถามรักษาความปลอดภัยแบบสุ่ม CAPTCHAs การใช้รหัสผ่านในที่อื่น ๆ
2. การดมกลิ่นหนังสือรับรอง HTTPS เป็นสิ่งจำเป็นหากผู้ใช้เข้าถึงเว็บแอปพลิเคชันของคุณจากฮอตสปอต Wi-Fi สาธารณะกล่าวถึงแม้ว่าจะมี HTTPS ผู้ใช้ของคุณต้องเปลี่ยนรหัสผ่านเป็นประจำ
3. การโจมตีภายใน มีสองตัวอย่างมากมายเช่นเริ่มจากการขโมยรหัสผ่านของคุณจากเบราว์เซอร์หรือที่คุณจดไว้ที่ไหนสักแห่งบนโต๊ะ (ไม่จำเป็นต้องมีทักษะด้านไอที) และสิ้นสุดด้วยเซสชั่นการปลอมและสกัดกั้นการรับส่งข้อมูลเครือข่ายท้องถิ่น และการเข้าถึงเว็บแอปพลิเคชันเพิ่มเติมเช่นเดียวกับผู้ใช้ปลายทางรายอื่น

ในโพสต์นี้โดยเฉพาะฉันสามารถเห็นข้อกำหนดที่ไม่เพียงพอทำให้นักพัฒนาซอฟต์แวร์ซึ่งเขาจะไม่สามารถแก้ไขได้เนื่องจากลักษณะของปัญหา - ความปลอดภัยของผู้ใช้ ประเด็นส่วนตัวของฉันคือผู้พัฒนาควรพูดว่าไม่มีและชี้ประเด็นปัญหาความต้องการแทนที่จะเสียเวลากับงานดังกล่าวโดยสุจริต สิ่งนี้ไม่ได้ทำให้ระบบของคุณปลอดภัยยิ่งขึ้น แต่จะนำไปสู่เคสที่ติดสติกเกอร์บนจอภาพ น่าเสียดายที่หัวหน้าบางคนได้ยินเฉพาะสิ่งที่พวกเขาต้องการได้ยิน อย่างไรก็ตามถ้าฉันเป็นคุณฉันจะพยายามอธิบายว่าปัญหาที่แท้จริงมาจากไหนและการเติมข้อความอัตโนมัตินั้น = "ปิด" จะไม่สามารถแก้ไขได้เว้นแต่จะบังคับให้ผู้ใช้เก็บรหัสผ่านทั้งหมดไว้ในหัว! นักพัฒนาซอฟต์แวร์ในตอนท้ายไม่สามารถปกป้องผู้ใช้ได้อย่างสมบูรณ์

เผชิญกับปัญหา HIPAA เดียวกันและพบวิธีแก้ปัญหาที่ค่อนข้างง่าย

1. สร้างฟิลด์รหัสผ่านที่ซ่อนด้วยชื่อฟิลด์เป็นอาร์เรย์

   <input type="password" name="password[]" style="display:none" />
   

2. ใช้อาร์เรย์เดียวกันสำหรับฟิลด์รหัสผ่านจริง

   <input type="password" name="password[]" />
   

เบราว์เซอร์ (Chrome) อาจแจ้งให้คุณ "บันทึกรหัสผ่าน" แต่ไม่ว่าผู้ใช้จะเลือกบันทึกในครั้งต่อไปที่พวกเขาเข้าสู่ระบบรหัสผ่านจะเติมฟิลด์รหัสผ่านที่ซ่อนอยู่โดยอัตโนมัติช่องว่างในอาร์เรย์

ฉันพยายามกำหนดอาเรย์เช่น "รหัสผ่าน [ตอนที่ 2]" แต่ก็ยังจำได้ ฉันคิดว่ามันจะโยนมันออกไปถ้ามันเป็นอาเรย์ที่ไม่ได้จัดทำดัชนีเพราะมันไม่มีทางเลือกนอกจากวางมันในจุดแรก

จากนั้นคุณใช้ภาษาการเขียนโปรแกรมที่คุณเลือกเพื่อเข้าถึงอาเรย์, PHP เช่น

echo $_POST['password'][1];

เนื่องจากautocompleteคำแนะนำส่วนใหญ่รวมถึงคำตอบที่ยอมรับจึงไม่สามารถใช้งานได้ในเว็บเบราว์เซอร์ในปัจจุบัน (เช่นตัวจัดการรหัสผ่านเว็บเบราว์เซอร์ไม่สนใจautocomplete) วิธีแก้ปัญหาที่แปลกใหม่ก็คือการสลับระหว่างpasswordและtextประเภทและทำให้สีพื้นหลังตรงกับสีข้อความเมื่อฟิลด์ เป็นฟิลด์ข้อความธรรมดาซึ่งยังคงซ่อนรหัสผ่านในขณะที่เป็นฟิลด์รหัสผ่านจริงเมื่อผู้ใช้ (หรือโปรแกรมอย่าง KeePass) กำลังป้อนรหัสผ่าน เบราว์เซอร์ไม่ขอให้บันทึกรหัสผ่านที่เก็บไว้ในช่องข้อความธรรมดา

ข้อดีของวิธีนี้คืออนุญาตให้มีการปรับปรุงแบบก้าวหน้าดังนั้นจึงไม่จำเป็นต้องใช้ Javascript สำหรับเขตข้อมูลเพื่อทำงานเป็นเขตข้อมูลรหัสผ่านปกติ (คุณสามารถเริ่มต้นด้วยช่องข้อความธรรมดาแทนและใช้แนวทางเดียวกัน แต่นั่นไม่ใช่ HIPAA จริงๆ พี / PII สอดคล้อง) วิธีการนี้ไม่ขึ้นอยู่กับรูปแบบ / ฟิลด์ที่ซ่อนอยู่ซึ่งอาจไม่จำเป็นต้องส่งไปยังเซิร์ฟเวอร์ (เพราะถูกซ่อนอยู่) และเทคนิคเหล่านี้บางอย่างก็ไม่สามารถใช้งานได้ในเบราว์เซอร์ที่ทันสมัยหลายแห่ง

ปลั๊กอิน jQuery:

https://github.com/cubiclesoft/php-flexforms-modules/blob/master/password-manager/jquery.stoppasswordmanager.js

ซอร์สโค้ดที่เกี่ยวข้องจากลิงค์ด้านบน:

(function($) {
$.fn.StopPasswordManager = function() {
    return this.each(function() {
        var $this = $(this);

        $this.addClass('no-print');
        $this.attr('data-background-color', $this.css('background-color'));
        $this.css('background-color', $this.css('color'));
        $this.attr('type', 'text');
        $this.attr('autocomplete', 'off');

        $this.focus(function() {
            $this.attr('type', 'password');
            $this.css('background-color', $this.attr('data-background-color'));
        });

        $this.blur(function() {
            $this.css('background-color', $this.css('color'));
            $this.attr('type', 'text');
            $this[0].selectionStart = $this[0].selectionEnd;
        });

        $this.on('keydown', function(e) {
            if (e.keyCode == 13)
            {
                $this.css('background-color', $this.css('color'));
                $this.attr('type', 'text');
                $this[0].selectionStart = $this[0].selectionEnd;
            }
        });
    });
}
}(jQuery));

การสาธิต:

https://barebonescms.com/demos/admin_pack/admin.php

คลิก "เพิ่มรายการ" ในเมนูจากนั้นเลื่อนไปที่ด้านล่างของหน้าเพื่อ "Module: Stop Password Manager"

คำเตือน: ในขณะที่วิธีการนี้ใช้งานได้สำหรับบุคคลที่มีสายตา แต่อาจมีปัญหากับซอฟต์แวร์ตัวอ่านหน้าจอ ตัวอย่างเช่นโปรแกรมอ่านหน้าจออาจอ่านรหัสผ่านของผู้ใช้ออกมาดัง ๆ เพราะเห็นฟิลด์ข้อความธรรมดา อาจมีผลกระทบอื่น ๆ ที่ไม่คาดคิดจากการใช้ปลั๊กอินด้านบน การปรับเปลี่ยนฟังก์ชั่นเว็บเบราเซอร์ในตัวควรทำอย่าง จำกัด ด้วยการทดสอบเงื่อนไขและขอบเคสที่หลากหลาย

มีวิธีใดบ้างที่เว็บไซต์จะบอกเบราว์เซอร์ว่าจะไม่เสนอให้จดจำรหัสผ่าน?

<input type="password">เว็บไซต์บอกว่าเบราว์เซอร์ที่ว่ามันเป็นรหัสผ่านโดยใช้ ดังนั้นหากคุณต้องทำสิ่งนี้จากมุมมองของเว็บไซต์คุณจะต้องเปลี่ยนมัน (เห็นได้ชัดว่าฉันไม่แนะนำสิ่งนี้)

ทางออกที่ดีที่สุดคือให้ผู้ใช้กำหนดค่าเบราว์เซอร์เพื่อไม่ให้จำรหัสผ่านได้

หากคุณไม่ต้องการเชื่อถือการตั้งค่าสถานะการเติมข้อความอัตโนมัติคุณสามารถตรวจสอบให้แน่ใจว่าผู้ใช้พิมพ์ในกล่องโดยใช้เหตุการณ์ onchange รหัสด้านล่างเป็นรูปแบบ HTML ที่เรียบง่าย องค์ประกอบของรหัสผ่านที่ซ่อนอยู่ password_edited เริ่มตั้งค่าเป็น 0 เมื่อเปลี่ยนค่ารหัสผ่าน JavaScript ที่ด้านบน (ฟังก์ชัน pw_edited) เปลี่ยนค่าเป็น 1 เมื่อกดปุ่มมันจะตรวจสอบรหัสของผู้ประเมินที่นี่ก่อนส่งแบบฟอร์ม . ด้วยวิธีนี้แม้ว่าเบราว์เซอร์จะไม่สนใจคุณและเติมข้อความในฟิลด์ให้โดยอัตโนมัติผู้ใช้จะไม่สามารถผ่านหน้าเข้าสู่ระบบโดยไม่ต้องพิมพ์ในฟิลด์รหัสผ่าน ตรวจสอบให้แน่ใจว่าได้เว้นฟิลด์รหัสผ่านแล้วเมื่อตั้งโฟกัสไว้ มิฉะนั้นคุณสามารถเพิ่มตัวละครในตอนท้ายจากนั้นย้อนกลับและลบออกเพื่อหลอกลวงระบบ ฉันขอแนะนำให้เพิ่ม autocomplete = "off" ในรหัสผ่านเพิ่มเติม แต่ตัวอย่างนี้แสดงวิธีการทำงานของรหัสสำรอง

<html>
  <head>
    <script>
      function pw_edited() {
        document.this_form.password_edited.value = 1;
      }
      function pw_blank() {
        document.this_form.password.value = "";
      }
      function submitf() {
        if(document.this_form.password_edited.value < 1) {
          alert("Please Enter Your Password!");
        }
        else {
         document.this_form.submit();
        }
      }
    </script>
  </head>
  <body>
    <form name="this_form" method="post" action="../../cgi-bin/yourscript.cgi?login">
      <div style="padding-left:25px;">
        <p>
          <label>User:</label>
          <input name="user_name" type="text" class="input" value="" size="30" maxlength="60">
        </p>
        <p>
          <label>Password:</label>
          <input name="password" type="password" class="input" size="20" value="" maxlength="50" onfocus="pw_blank();" onchange="pw_edited();">
        </p>
        <p>
          <span id="error_msg"></span>
        </p>
        <p>
          <input type="hidden" name="password_edited" value="0">
          <input name="submitform" type="button" class="button" value="Login" onclick="return submitf();">
        </p>
      </div>
    </form>
  </body>
</html>

autocomplete = "off" ใช้งานไม่ได้สำหรับการปิดการใช้งานตัวจัดการรหัสผ่านใน Firefox 31 และส่วนใหญ่ไม่ได้อยู่ในเวอร์ชันก่อนหน้าเช่นกัน

ชำระเงินการอภิปรายที่ mozilla เกี่ยวกับปัญหานี้: https://bugzilla.mozilla.org/show_bug.cgi?id=956906

เราต้องการใช้ฟิลด์รหัสผ่านที่สองเพื่อป้อนรหัสผ่านครั้งเดียวที่สร้างโดยโทเค็น ตอนนี้เรากำลังใช้การป้อนข้อความแทนการป้อนรหัสผ่าน :-(

ฉันได้รับภารกิจที่คล้ายกันเพื่อปิดใช้งานการเติมชื่อล็อกอินและรหัสผ่านโดยอัตโนมัติโดยเบราว์เซอร์หลังจากทดลองใช้งานและข้อผิดพลาดเป็นจำนวนมากฉันพบวิธีแก้ไขปัญหาด้านล่างเพื่อให้เหมาะสม เพียงเพิ่มตัวควบคุมด้านล่างก่อนการควบคุมดั้งเดิมของคุณ

<input type="text" style="display:none">
<input type="text" name="OriginalLoginTextBox">

<input type="password" style="display:none">
<input type="text" name="OriginalPasswordTextBox">

สิ่งนี้ทำงานได้ดีสำหรับ IE11 และ Chrome 44.0.2403.107

autocomplete = "off" ใช้งานได้กับเบราว์เซอร์รุ่นใหม่ส่วนใหญ่ แต่วิธีอื่นที่ฉันใช้กับ Epiphany (เบราว์เซอร์ที่ขับเคลื่อนโดย WebKit สำหรับ GNOME) คือการเก็บคำนำหน้าที่สร้างแบบสุ่มในสถานะเซสชัน (หรือเขตข้อมูลที่ซ่อนอยู่ ตัวแปรที่เหมาะสมในสถานะเซสชันแล้ว) และใช้สิ่งนี้เพื่อเปลี่ยนชื่อของฟิลด์ Epiphany ยังคงต้องการบันทึกรหัสผ่าน แต่เมื่อกลับไปที่แบบฟอร์มจะไม่เติมข้อมูลในฟิลด์

ฉันไม่มีปัญหาในการใช้วิธีนี้:

ใช้การเติมข้อความอัตโนมัติ = "ปิด" เพิ่มช่องรหัสผ่านที่ซ่อนอยู่และช่องอื่นที่ไม่ได้ซ่อนไว้ เบราว์เซอร์พยายามทำการซ่อนให้อัตโนมัติหากไม่เคารพการเติมข้อความอัตโนมัติ = "ปิด"

อีกวิธีหนึ่งคือการทำให้ POST ใช้รูปแบบที่ซ่อนอยู่ซึ่งอินพุตทั้งหมดเป็นประเภทที่ซ่อนอยู่ แบบฟอร์มที่มองเห็นได้จะใช้ประเภทของ "รหัสผ่าน" จะไม่มีการส่งแบบฟอร์มหลังดังนั้นเบราว์เซอร์จึงไม่สามารถสกัดกั้นการดำเนินการล็อกอินทั้งหมด