ป้องกันไม่ให้ผู้ใช้วางข้อมูลในช่อง

บางเว็บไซต์อ้างว่าการอนุญาตให้ผู้ใช้วางรหัสผ่านเป็นการลดความปลอดภัย แต่การวางรหัสผ่านกลับช่วยเพิ่มความปลอดภัยเนื่องจากเปิดใช้เครื่องมือจัดการรหัสผ่าน

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

ในกรณีทั่วไป ผู้ใช้ไม่ควรวางในองค์ประกอบ <input>

สาเหตุที่การตรวจสอบ Lighthouse นี้ไม่ผ่าน

Lighthouse แจ้งโค้ดที่ป้องกันไม่ให้ผู้ใช้วางในช่องป้อนข้อมูลแบบอ่านอย่างเดียวดังนี้

Lighthouse จะรวบรวมองค์ประกอบ <input> ทั้งหมดที่ไม่ใช่แบบอ่านอย่างเดียว แล้ววางข้อความบางส่วนลงในองค์ประกอบแต่ละรายการ จากนั้นจะยืนยันว่าแฮนเดิลเหตุการณ์ที่กําหนดเองไม่ได้ป้องกันเหตุการณ์ paste

นอกจากนี้ยังป้องกันการวางนอก Listener เหตุการณ์ paste ได้ด้วย Lighthouse ไม่ตรวจพบสถานการณ์ดังกล่าว

วิธีเปิดใช้การวางในช่องรหัสผ่าน

ค้นหาโค้ดที่ป้องกันไม่ให้วาง

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

1. ขยายแผงเบรกพอยท์ของ Listener เหตุการณ์
2. ขยายรายการคลิปบอร์ด
3. เลือกช่องทําเครื่องหมาย paste
4. วางข้อความลงในช่องรหัสผ่านในหน้าเว็บ
5. DevTools ควรหยุดชั่วคราวที่บรรทัดแรกของโค้ดใน paste Listener เหตุการณ์ที่เกี่ยวข้อง

นำโค้ดที่ป้องกันไม่ให้วางออก

แหล่งที่มาของปัญหามักจะเป็นการโทรไปยัง preventDefault() ภายใน Listener เหตุการณ์ paste ที่เชื่อมโยงกับองค์ประกอบอินพุตรหัสผ่าน เช่น

let input = document.querySelector('input');

input.addEventListener('paste', (e) => {
  e.preventDefault(); // This is what prevents pasting.
});

หากคุณแค่ฟังแค่วางเหตุการณ์เพื่อขัดจังหวะเหตุการณ์ นำ Listener เหตุการณ์ทั้งหมดออก

แหล่งข้อมูล

ซอร์สโค้ดสำหรับการตรวจสอบป้องกันไม่ให้ผู้ใช้วางลงในช่องป้อนข้อมูล