Ngăn người dùng dán nội dung vào các trường nhập dữ liệu

Một số trang web cho rằng việc cho phép người dùng dán mật khẩu sẽ làm giảm tính bảo mật. Tuy nhiên, việc dán mật khẩu thực sự cải thiện khả năng bảo mật vì cho phép sử dụng trình quản lý mật khẩu.

Trình quản lý mật khẩu thường tạo mật khẩu mạnh cho người dùng, lưu trữ mật khẩu một cách an toàn, sau đó tự động dán mật khẩu vào các trường mật khẩu bất cứ khi nào người dùng cần đăng nhập. Phương pháp này thường an toàn hơn so với việc buộc người dùng nhập mật khẩu đủ ngắn để nhớ.

Nhìn chung, người dùng không bị ngăn dán nội dung vào các phần tử <input>.

Lý do khiến quy trình kiểm tra Lighthouse này không thành công

Lighthouse gắn cờ mã ngăn người dùng dán vào các trường nhập dữ liệu không phải chỉ có thể đọc:

Lighthouse thu thập tất cả các phần tử <input> không phải chỉ có thể đọc, dán một số văn bản vào mỗi phần tử, sau đó xác minh rằng trình xử lý sự kiện tuỳ chỉnh không ngăn chặn sự kiện paste.

Bạn cũng có thể ngăn việc dán bên ngoài trình nghe sự kiện paste. Lighthouse không phát hiện được trường hợp đó.

Cách bật tính năng dán vào trường mật khẩu

Tìm mã đang ngăn chặn việc dán

Cách nhanh chóng tìm và kiểm tra mã đang ngăn chặn việc dán:

1. Mở rộng ngăn Event Listener Breakpoints (Các điểm ngắt của trình nghe sự kiện).
2. Mở rộng danh sách Clipboard (Bảng nhớ tạm).
3. Chọn hộp đánh dấu paste.
4. Dán một số văn bản vào trường mật khẩu trên trang của bạn.
5. DevTools sẽ tạm dừng ở dòng mã đầu tiên trong trình nghe sự kiện paste có liên quan.

Xoá mã đang ngăn chặn việc dán

Nguồn gốc của vấn đề thường là lệnh gọi đến preventDefault() trong trình nghe sự kiện paste liên kết với phần tử nhập mật khẩu:

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

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

Nếu bạn chỉ nghe các sự kiện dán để ngăn chặn chúng, hãy xoá toàn bộ trình nghe sự kiện.

Tài nguyên

Mã nguồn cho quy trình kiểm tra Ngăn người dùng dán nội dung vào các trường nhập dữ liệu