브레이브 브라우저의 fingerprinting 이슈

키워드
window.screen.width

오늘 제가 발견한 이슈인 fingerprinting에 대해 이야기하기 전에 이 이슈가 발생하게 된 배경 설명을 먼저 하고자 합니다.

포트폴리오 콜렉션 프로젝트는 위와 같은 레이아웃으로 구성되어 있습니다.
상단의 1fr 1fr auto 값은 아래의 CSS로 지정되어 있습니다.

style={{
	display: "grid",
    gridTemplateColumns: "1fr 1fr auto",
    minHeight: "100vh",
}}

위의 코드로 구현된 화면은 아래와 같습니다.

Lorem ipsum 문장으로 채워진 First Second가 보입니다. 그리고 portfolio #0으로 시작하는 리스트를 가진 맨 오른쪽의 Third가 보입니다.
브라우저 창을 가로로 줄이면 gridTemplateColumns: "1fr 1fr auto" CSS에 의해 First Second는 서로 같은 가로 비율을 유지하며 줄어들게됩니다.

그리고 이 반응형 레이아웃에서 저의 목표는 First와 Second 내부에 있는 컨텐츠 영역의 width를 각각 고정값으로 주어 First와 Second의 width가 줄더라도 컨텐츠 영역은 그대로 크기를 유지하는 것입니다.

이 크기를 유지하기 위한 해결 방법으로 저는 window.screen.width 프로퍼티를 쓰기로 했습니다. 이 프로퍼티는 모니터 화면 가로 크기 값을 CSS 픽셀 값으로 리턴합니다.

만약 유저가 사용 중인 모니터의 가로 길이가 2000px 크기라면 window.screen.width는 2000px 값이고 이 값에 Third 컴포넌트의 width 값을 빼면 브라우저 화면이 모니터를 가로 방향으로 꽉 채우고 있을 때의 First와 Second의 width를 더한 값이 나오게 됩니다.

식으로 간단히 표현해 보면,
$First.width$ $+$ $Second.width$ $=$ $2000px$ $-$ $Third.width$

First Second Third 이 세 컴포넌트는 레이아웃에서 각각 1열씩 차지하고 있는데 useRef 훅을 이용하여 Third 컴포넌트에 접근합니다.

const thirdRef = useRef(null);

return (
  <ul ref={thirdRef}>
  	 ...
  </ul>
)

그리고 이 Third 컴포넌트의 가로 길이에 접근하여 가로 길이 값을 읽어들입니다.

useEffect(() => {
  const third = thirdRef.current;
  if (third) {
    setColumnsWidth(
      (prev) => (
        { ...prev, third: third.clientWidth }
      ));
  }
}, []);

그러면 First, Second의 width가 줄어도 컨텐츠 영역은 width가 줄지 않아 컨텐츠 영역이 First와 Second 박스의 각각 우측으로 튀어나갈 것입니다.
(아래의 이미지처럼요.)

이를 방지하기 위해 overflow: hidden 값을 정해줬습니다.

그럼 튀어나가있는 부분은 잘려나가 보이지 않게 됩니다.
(아래 이미지는 실제 개발중인 프로젝트에서 overflow:hidden 적용 결과입니다.)

fingerprinting 이슈

의도한대로 개발되고 있다고 생각했습니다.
하지만 프로젝트를 github page에 배포하여 확인해보니 이슈가 발생했습니다.

저는 브레이브 브라우저를 사용하고 있습니다.
프로젝트의 개발 버전, 배포 버전 모두 브레이브 브라우저로 실행하고 있었는데요.

개발 버전에서는 window.screen.width 값이 정상 작동했습니다.
하지만 배포 버전에서는 정상 작동하지 않았습니다.
처음에는 github page에 배포한 것이니 github의 클라우드 서버 컴퓨터 환경 문제인것인가 생각해봤습니다.
그러나 이것은 말이 안됐습니다. 그 이유는 프로젝트에 접속했을 때, 브라우저가 이 프로젝트의 코드를 처리하면서 브라우저가 실행중인 컴퓨터의 모니터 화면 크기 값을 읽어들여야하기 때문이었습니다.

사고의 흐름이 이렇게 흐르자 저는 설마하고 엣지 브라우저, 크롬 브라우저로 프로젝트 배포 버전을 확인해봤습니다. 이 두 브라우저에서는 정상적으로 배포 버전이 작동했습니다.
그래서 이것이 브레이브 브라우저의 이슈라고 판단하게 됐습니다.

브레이브 브라우저에서 window.screen.width 값 이슈가 있는지 구글링해보니 이미 이전에 제대로된 값이 나오지 않는다고 이슈가 논의된게 있었습니다.

출처:
https://community.brave.com/t/screen-width-and-screen-height-are-wrong/446476

브레이브 브라우저는 다른 브라우저들과 다르게 개인 정보 접근을 방지하기 위한 방안의 일부분으로 유저의 모니터 정보에 접근하는 것을 막아 window.screen.width 가 window.innerWidth 처럼 작동하도록 만들어둔 것이었습니다.

그리고 유저가 사이트를 접속했을 때 개인정보에 접근 가능하게 되는 것을 지문 흔적이 남는 것에 비유하여 fingerprinting 이라고 하는 것을 알 수 있었습니다.

min-width

그렇기에 저는 다른 선택지를 택해야 했습니다.

First 와 Second 컴포넌트의 각 min-width 를 지정해주어 유저가 화면을 줄였을 때 더 이상 줄지 않게 하였고 이제 유저의 모니터 화면 정보에 접근하는 경우가 사라졌기에 브레이브 브라우저에서도 배포 버전이 개발 버전과 똑같이 작동하는 것을 확인했습니다.