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 tuyên bố rằng việc cho phép người dùng dán mật khẩu sẽ làm giảm bảo mật. Tuy nhiên, việc dán mật khẩu thực sự giúp cải thiện khả năng bảo mật vì cho phép người dùng 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 vào 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ớ.

Trong trường hợp chung, bạn không nên ngăn người dùng dán vào các phần tử <input>.

Cách quy trình kiểm tra Lighthouse 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 không chỉ có thể đọc:

Kiểm tra Lighthouse cho thấy trang ngăn người dùng dán vào trường mật khẩu

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

Bạn cũng có thể ngăn việc dán ra 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 các trường mật khẩu

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

Để nhanh chóng tìm và kiểm tra mã đang ngăn việc dán, hãy làm như sau:

  1. Mở rộng ngăn Điểm ngắt của trình nghe sự kiện.
  2. Mở rộng danh sách Clipboard.
  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. Công cụ cho nhà phát triển nên 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 việc dán

Nguồn gây ra vấn đề thường là một 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 lệnh dán sự kiện để giành quyền kiểm soát, hãy xoá toàn bộ trình nghe sự kiện.

Tài nguyên

Mã nguồn cho hoạt động kiểm tra Ngăn người dùng dán vào trường nhập dữ liệu