일부 웹사이트에서는 사용자가 비밀번호를 붙여넣을 수 있도록 허용하면 보안이 저하된다고 주장합니다. 하지만 비밀번호를 붙여넣으면 비밀번호 관리자를 사용할 수 있으므로 보안이 강화됩니다.
비밀번호 관리자는 일반적으로 사용자를 위해 강력한 비밀번호를 생성하고 안전하게 저장한 후 사용자가 로그인해야 할 때마다 비밀번호 입력란에 자동으로 붙여넣습니다. 이 접근 방식은 일반적으로 사용자가 기억하기에 충분히 짧은 비밀번호를 입력하도록 강요하는 것보다 더 안전합니다.
일반적으로 사용자가 <input> 요소에 붙여넣지 못하도록 해서는 안 됩니다.
이 Lighthouse 감사가 실패하는 경우
Lighthouse는 사용자가 읽기 전용이 아닌 입력란에 붙여넣지 못하도록 하는 코드를 신고합니다.
Lighthouse는 읽기 전용이 아닌 모든 <input> 요소를 수집하고 각 요소에 텍스트를 붙여넣은 다음 맞춤 이벤트 핸들러에 의해 paste 이벤트가 방지되지 않았는지 확인합니다.
paste 이벤트 리스너 외부에서 붙여넣기를 방지할 수도 있습니다.
Lighthouse는 이 시나리오를 감지하지 않습니다.
비밀번호 입력란에 붙여넣기 사용 설정 방법
붙여넣기를 방해하는 코드 찾기
붙여넣기를 방해하는 코드를 빠르게 찾아 검사하려면 다음 단계를 따르세요.
- Event Listener Breakpoints 창을 펼칩니다.
- 클립보드 목록을 펼칩니다.
paste체크박스를 선택합니다.- 페이지의 비밀번호 입력란에 텍스트를 붙여넣습니다.
- DevTools가 관련
paste이벤트 리스너의 첫 번째 코드 줄에서 일시중지됩니다.
붙여넣기를 방해하는 코드 삭제
문제의 원인은 비밀번호 입력 요소와 연결된 paste 이벤트 리스너 내에서 preventDefault()를 호출하는 경우가 많습니다.
let input = document.querySelector('input');
input.addEventListener('paste', (e) => {
e.preventDefault(); // This is what prevents pasting.
});
붙여넣기 이벤트를 먼저 처리하기 위해 수신 대기하는 경우 전체 이벤트 리스너를 삭제합니다.