크롬 html input 에서 자동완성 막기

Chrome HTML input 자동완성 막기

Chrome 브라우저의 input 자동완성(autocomplete) 기능을 비활성화하는 방법입니다. 보안이 중요한 폼이나 검색창에서 자동완성을 막아야 할 때 사용합니다.

언제 사용하나요?

• 비밀번호 입력 필드에서 저장된 비밀번호 노출 방지
• 신용카드 정보 입력 폼
• 검색창에서 검색 기록 숨기기
• 일회용 인증번호 입력

기본 방법 (표준)

<!-- 개별 input에 적용 -->
<input type="text" name="username" autocomplete="off">

<!-- 폼 전체에 적용 -->
<form autocomplete="off">
    <input type="text" name="username">
    <input type="password" name="password">
</form>

<!-- 주의: Chrome은 autocomplete="off"를 무시할 수 있음 -->

Chrome 우회 방법 1: new-password

<!-- 새 비밀번호 입력임을 명시 -->
<input type="password" autocomplete="new-password">

<!-- 사용자명 필드 -->
<input type="text" autocomplete="off" 
       name="username_RANDOM123">

<!-- 랜덤 name 속성 사용 -->
<script>
document.querySelector("input[name^=username]").name = 
    "username_" + Math.random().toString(36).substr(2, 9);
</script>

Chrome 우회 방법 2: 숨겨진 더미 필드

<!-- 더미 필드를 먼저 배치 (Chrome이 이쪽에 자동완성) -->
<form autocomplete="off">
    <!-- 숨겨진 더미 필드 -->
    <input type="text" name="fake_user" 
           style="display:none;">
    <input type="password" name="fake_pass" 
           style="display:none;">
    
    <!-- 실제 필드 -->
    <input type="text" name="real_username" 
           autocomplete="off">
    <input type="password" name="real_password" 
           autocomplete="new-password">
</form>

Chrome 우회 방법 3: readonly 활용

<!-- 포커스 시 readonly 해제 -->
<input type="password" 
       readonly 
       onfocus="this.removeAttribute("readonly");"
       autocomplete="off">

<!-- JavaScript로 -->
<script>
document.querySelectorAll("input").forEach(input => {
    input.setAttribute("readonly", true);
    input.addEventListener("focus", function() {
        this.removeAttribute("readonly");
    });
});
</script>

autocomplete 값 종류

<!-- 완전 비활성화 -->
<input autocomplete="off">

<!-- 새 비밀번호 (저장 안함) -->
<input type="password" autocomplete="new-password">

<!-- 현재 비밀번호 (저장된 것 사용) -->
<input type="password" autocomplete="current-password">

<!-- 일회성 코드 -->
<input type="text" autocomplete="one-time-code">

<!-- 신용카드 정보 -->
<input autocomplete="cc-number">
<input autocomplete="cc-exp">
<input autocomplete="cc-csc">

<!-- 주소 -->
<input autocomplete="street-address">
<input autocomplete="postal-code">

CSS로 자동완성 스타일 제거

<style>
/* Chrome 자동완성 배경색 제거 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
    -webkit-text-fill-color: #333;
}

/* 트랜지션으로 자연스럽게 */
input:-webkit-autofill {
    transition: background-color 5000s ease-in-out 0s;
}
</style>

완전한 예시

<!DOCTYPE html>
<form autocomplete="off" method="post">
    <!-- 더미 필드 -->
    <input type="text" style="display:none">
    <input type="password" style="display:none">
    
    <!-- 실제 로그인 필드 -->
    <div>
        <label>아이디</label>
        <input type="text" 
               name="loginId" 
               autocomplete="off"
               readonly
               onfocus="this.removeAttribute("readonly");">
    </div>
    
    <div>
        <label>비밀번호</label>
        <input type="password" 
               name="loginPwd"
               autocomplete="new-password"
               readonly
               onfocus="this.removeAttribute("readonly");">
    </div>
    
    <button type="submit">로그인</button>
</form>

주의사항

• Chrome은 사용자 편의를 위해 autocomplete="off" 무시
• 보안상 민감한 정보는 서버 측 보호도 필수
• 접근성 고려: 자동완성은 사용자 편의 기능
• 브라우저 업데이트로 동작이 변경될 수 있음