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

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

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

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

ทำไมการตรวจสอบ Lighthouse นี้ไม่สำเร็จ

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

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

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

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

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

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

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

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

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

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

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

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

แหล่งข้อมูล

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