บางเว็บไซต์อ้างว่าการอนุญาตให้ผู้ใช้วางรหัสผ่านเป็นการลดความปลอดภัย อย่างไรก็ตาม การวางโค้ดจริงๆ แล้วช่วยเพิ่มความปลอดภัยได้ เพราะทำให้สามารถใช้เครื่องมือจัดการรหัสผ่านได้
เครื่องมือจัดการรหัสผ่านมักจะสร้างรหัสผ่านที่รัดกุมสำหรับผู้ใช้ จัดเก็บไว้อย่างปลอดภัย แล้ววางรหัสผ่านนั้นในช่องรหัสผ่านโดยอัตโนมัติทุกครั้งที่ผู้ใช้ต้องลงชื่อเข้าสู่ระบบ โดยทั่วไป วิธีนี้จะปลอดภัยกว่าการบังคับให้ผู้ใช้พิมพ์รหัสผ่านที่สั้นพอที่จะจำได้
ในกรณีทั่วไป ผู้ใช้ไม่ควรถูกป้องกันไม่ให้วางลงในองค์ประกอบ <input>
ทำไมการตรวจสอบ Lighthouse นี้ไม่สำเร็จ
Lighthouse จะแจ้งโค้ดที่ป้องกันไม่ให้ผู้ใช้วางลงในช่องป้อนข้อมูลที่ไม่ใช่แบบอ่านอย่างเดียว
Lighthouse จะรวบรวมองค์ประกอบ <input> ทั้งหมดที่ไม่ใช่แบบอ่านอย่างเดียว
วางข้อความบางส่วนลงในแต่ละองค์ประกอบ แล้วยืนยันว่าตัวแฮนเดิลเหตุการณ์ที่กำหนดเองไม่ได้ป้องกันเหตุการณ์ paste ไว้
นอกจากนี้ยังป้องกันการวางนอก Listener เหตุการณ์ paste ได้ด้วย
Lighthouse ไม่พบสถานการณ์ดังกล่าว
วิธีเปิดใช้การวางในช่องรหัสผ่าน
ค้นหาโค้ดที่ทำให้วางไม่ได้
หากต้องการค้นหาและตรวจสอบโค้ดที่ทำให้วางไม่ได้อย่างรวดเร็ว ให้ทำดังนี้
- ขยายแผงเบรกพอยท์ของ Listener เหตุการณ์
- ขยายรายการคลิปบอร์ด
- เลือกช่องทำเครื่องหมาย
paste - วางข้อความลงในช่องรหัสผ่านในหน้าเว็บ
- เครื่องมือสำหรับนักพัฒนาเว็บควรหยุดชั่วคราวในบรรทัดแรกของโค้ดใน Listener เหตุการณ์
pasteที่เกี่ยวข้อง
นำโค้ดที่ทำให้วางไม่ได้ออก
แหล่งที่มาของปัญหามักจะเป็นการเรียก preventDefault() ภายใน Listener เหตุการณ์ paste ที่เชื่อมโยงกับองค์ประกอบอินพุตรหัสผ่าน ดังนี้
let input = document.querySelector('input');
input.addEventListener('paste', (e) => {
e.preventDefault(); // This is what prevents pasting.
});
หากคุณฟังแค่การวางเหตุการณ์เพื่อขัดจังหวะชั่วคราว ให้นำ Listener เหตุการณ์ทั้งหมดออก
แหล่งข้อมูล
ซอร์สโค้ดของการตรวจสอบป้องกันไม่ให้ผู้ใช้วางลงในช่องป้อนข้อมูล