[HTML] 크롬 확장 프로그램으로 인한 HTML 속성 충돌 (bis_skin_checked, bis_label, bis_size )

개요

서비스하고있던 특정 웹 페이지의 Iframe 영역에서만 버튼 이미지의 전환이 되지 않는 이슈가 발생했다. 첫 페이지 로드 시에만 해당 이슈가 발생했고, Iframe 내에서 페이지를 이동해주면 해결되었다.

 

알 수 없는 HTML 속성들

<span style="color: rgb(71, 116, 207); background-image: url('https://*****.***/***/****');" 
bis_label="style" 
bis_size="{&quot;x&quot;:36,&quot;y&quot;:630,&quot;w&quot;:13,&quot;h&quot;:7,&quot;abs_x&quot;:522,&quot;abs_y&quot;:913}">
</span>

 

퍼블리싱된 페이지의 HTML 소스를 보니, 이슈가 발생하는 태그 내에서 기존에 없던 커스텀 속성이 추가되어있는 것을 발견했다. (bis_label, bis_size)

 

이외에도 대부분의 태그에 bis_skin_checked 등 알 수 없는 커스텀 속성이 추가되어있었다.

 

원인 및 해결방법

정말 예상치 못하게도, "Urban VPN Proxy" 라는 크롬 확장 프로그램과 충돌하는 것을 확인했다. 사용하고 있지 않아도 크롬 브라우저에 활성화만 되어있으면 HTML 코드에 간섭하는 것 같다. 

 

활성화된 크롬 확장 프로그램

"크롬 브라우저 우측 상단 더보기 (...) > 확장 프로그램 > 확장 프로그램 관리" 경로에서 설치된 확장 프로그램 목록들을 확인할 수 있다. 해당 프로그램을 찾아 파란 토글 버튼을 클릭해 비활성화하면 bis_ 커스텀 속성들은 전부 사라진다.

 

PS.

이미 5년전 스택 오버플로우에 나와 같은 현상을 겪은 사람이 있는 것을 확인했다.. .

 

https://stackoverflow.com/questions/56013947/what-does-bis-skin-checked-1-mean-its-showing-on-most-of-my-elements-when-us

What does bis_skin_checked="1" mean? It's showing on most of my elements when using chromes code source view?

 

정확한 이유는 알아낼 수 없었지만, 다음부터는 브라우저 에러 발생지 후보를 쿠키, 캐시 뿐 아니라 확장 프로그램까지 검토해야 할 것 같다.