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

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

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

โดยทั่วไปแล้ว ไม่ควรป้องกันไม่ให้ผู้ใช้วางข้อมูลในองค์ประกอบ <input>

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

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

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

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

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

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

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

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

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

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

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

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

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

หากคุณกำลังฟังเหตุการณ์วางเพื่อหยุดเหตุการณ์ดังกล่าวไว้ก่อน ให้นำ Listener เหตุการณ์ทั้งหมดออก

แหล่งข้อมูล

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