autocomplete 크로스 브라우징

milkboy2564·2023년 3월 7일
0
post-thumbnail

문제 상황

회사에서 사용자 등록 페이지를 작업하다가 이용 약관, 개인 정보 정책, 연구 동의서 동의 항목을 구현하다가 이상하게도 링크를 눌러 외부의 약관 페이지로 이동을 한 후(target=_blank) 다시 돌아오면 비밀번호와 휴대폰 번호 입력 창이 초기화가 되는 이슈가 발생했습니다.

테스트 결과 아이폰 11, 아이폰 se2, 갤럭시 S21와 chrome, kakao , samsung , safari 브라우저에서는 정상 동작하는 것으로 확인이 됐는데 갤럭시 Z 플립과 아이폰 12 미니 기종과 네이버 웍스 브라우저에서만 위에서 언급한 이슈가 발생했습니다.

원인

해당 이슈의 원인을 파악한 결과 브라우저의 캐시 정책이 달라서 발생한 것으로 파악했습니다.

모바일 기기에서는 보통 브라우저의 캐시를 많이 사용하는데 비밀번호와 휴대전화 입력창에서 autocomplete='off' 로 설정을 해줬기 때문에 브라우저가 데이터를 캐시하지 않았기 때문에 발생한 문제입니다..

분석

특정 기기에서만 이러한 문제가 발생하는 것은 그 기기의 브라우저나 캐시 처리 방식 등의 차이 때문일 수 있습니다.

예를 들어, 모바일 기기에서는 브라우저가 자동으로 폼 데이터를 저장하는 기능이 켜져 있을 수 있습니다. 이 경우에는 폼 데이터가 캐시에 저장되어서 다음에 페이지를 열 때 이전 데이터가 자동으로 채워질 수 있습니다.

또 다른 가능성은 해당 기기에서 사용하는 브라우저의 버전이나 설정 등에 따라서도 발생할 수 있습니다. 예를 들어, 일부 브라우저에서는 autocomplete="off" 속성을 무시하는 경우가 있습니다. 이 경우에는 autocomplete="off"를 사용해도 폼 데이터가 자동으로 채워질 수 있습니다.

따라서 이러한 문제가 발생하는 경우에는 해당 기기에서 사용하는 브라우저와 설정을 확인하고, 가능하면 autocomplete="off"와 같은 방법을 사용하여 브라우저 캐시 문제를 회피할 수 있도록 해야 합니다.

해결

autocomplete="off" 옵션을 제거해서 브라우저가 데이터를 캐싱할 수 있도록 처리해주니 정상적으로 동작하였습니다.

profile
FE 개발자

0개의 댓글