최근 QA를 진행하던 중 예상치 못한 흥미로운 버그를 만났습니다.
Chrome 브라우저에서 ‘자동 로그인’ 기능이 활성화된 상태로 특정 검색 페이지에 접속했을 때,검색어 입력창에 사용자의 ID가 자동으로 채워지는 현상이었습니다. 분명히 해당 input 필드에 autocomplete="off" 속성을 명시했는데도 말이죠.
이 버그를 해결하는 과정에서 Chrome Autofill 엔진의 작동 원리와 정책을 이해하게 되었고,이 경험을 공유하고자 합니다.
버그 분석
아래는 버그가 발생한 코드 구조(CASE 1)와 이를 해결한 코드 구조(CASE 2)입니다.
CASE 1 — ❌ ID 자동 입력 발생 (form 태그 없음, input automcomplete="off" 사용)
<select id="searchType" name="search-type">...</select>
<input
type="search"
id="searchWord"
name="search-query"
maxlength="100"
autocomplete="off"
aria-label="검색어 입력"
/> // ID 자동 입력됨
<button class="btn-small-blue btn-search-dx-history" type="button">검색</button>CASE 2 — ✅ ID 자동 입력 차단 성공 (form autocomplete=“off” 사용)
<form autocomplete="off">
<select id="searchType" name="search-type">...</select>
<input
type="search"
id="searchWord"
name="search-query"
maxlength="100"
autocomplete="off"
aria-label="검색어 입력"
/> // ID 자동 입력 차단됨!
<button class="btn-small-blue btn-search-dx-history" type="button">검색</button>
</form>왜 CASE 1의 개별 input의 autocomplete="off"는 무시되고, CASE 2의 form의 autocomplete="off"는 적용된 걸까요?
Chrome Autofill 엔진의 작동 원리
이 현상을 이해하기 위해서는 Autofill 엔진이 폼 데이터를 처리하는 방식과 브라우저의 정책을 알아야 합니다.
Autofill 엔진은 “휴리스틱스 기반 분석가”
Autofill 기능은 단순한 입력 기록이 아니라, 저장된 사용자 프로필 정보(이름, 주소, 비밀번호 등)를 폼에 매핑하는 시스템입니다.
이를 위해 Autofill 엔진은 휴리스틱스(Heuristics) 를 사용하여 폼 필드의 의미를 추론합니다.
💬 휴리스틱스
“Predicted autofill value, which Autofill determines using heuristics.”
- input의 name, id, label 텍스트, 폼 전체 구조 등을 종합 분석해 “이 필드는 어떤 목적의 입력란일까?”를 추론하는 경험적 알고리즘입니다.
input autocomplete="off" 가 무시되는 이유
“Note: In most modern browsers, setting autocomplete to “off” will not prevent a password manager from asking the user if they would like to save username and password information…”
- MDN Web Doc: HTML attribute: autocomplete
Autofill 엔진은 개별 input의 off 설정을 무시할 수 있도록 설계되었습니다. 이렇게 설계된 이유는 개발자가 사용자에게 유용한 자동완성을 무분별하게 차단하는 것을 방지하기 위해서입니다.
즉, Chrome은 사용자의 편의성과 보안(예: 비밀번호 관리)을 더 우선시합니다.
CASE 1에서는 form이 존재하지 않기 때문에 Autofill 엔진은 해당 input을 보고 아래처럼 판단했을 수 있습니다.
👩💻 CASE1 구조 분석
Autofill 엔진이 저장한 폼 필드과 비슷하다고 판단 ,input autocomplete="off" 무시
→ 저장한 데이터와 매핑
→ 자동 완성 form autocomplete="off" 가 적용되는 이유
“Every time the user submits a form, entries in text input fields organized by the name of the field specified in HTML get stored in the SQLite database under the profile.”
- The Chromium Projects : Form Autofill Design Document
form 태그는 서버로 전송될 데이터를 논리적으로 묶는 단위이며, Autofill 엔진이 휴리스틱 분석을 시작하는 최상위 단위입니다.
form autocomplete="off"을 사용하면, 폼 내부의 모든 필드는 Autofill 분석 및 매핑 대상에서 제외됩니다. 휴리스틱 분석 자체를 건너뛰게 되어, 사용자가 자동 로그인 설정을 하더라도 자동 입력이 차단됩니다.
마무리: 트러블 슈팅을 통해 배운 것
트러블 슈팅 시 문제 해결에서 끝나지 않고 원인과 해결 방안을 근본적인 이유나 설계까지 파헤쳐보려고 노력 중입니다. (이렇게 공부할 때, 개발 지식이 가장 잘 쌓이는 것 같습니다.)
form과 input에 대한 Autofill 엔진의 공식 문서 내용을 찾는 게 쉽지 않았지만, QA 중 만난 작은 버그 덕분에 브라우저의 설계 철학을 살펴볼 수 있었습니다.
웹 프론트엔드 개발자로서 매일 브라우저 위에서 기능을 구현해 왔지만, 정작 그 근간이 되는 브라우저의 설계 철학은 깊이 생각해 본 적이 없었습니다.
그동안은 빠르게 구현하고 새로운 기술을 익히는 데 집중했지만, 이번 경험을 통해 엔진의 동작 뒤에는 늘 설계자의 의도와 철학이 있다는 것을 깨달았습니다.
앞으로는 눈앞의 문제를 해결하는 데서 그치지 않고, 왜 그런 방식으로 동작하는지까지 이해하려는 개발자로 성장하고 싶습니다.
