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