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