이슈노트 #5: 앱 웹뷰에서 이미지 깨지는 문제

1. 발단

어느 날, 문득 앱을 보니 웹뷰에서 일부 이미지들이 잔뜩 깨져있더랬다.
분명히 그 전까지는 다 잘 보였던 것 같은데, 그 원인을 도통 알 수가 없었다.

2. 분석

그렇다고 모든 이미지가 깨진 것은 아니었다.

외부 사이트의 이미지들을 그대로 가져다 쓰는게 있었는데, 수십개의 도메인 중 4개 정도만 깨졌고,
일반 브라우저에서는 잘 되지만 앱 웹뷰에서만 깨졌다.

웹뷰는 react native webview를 사용했다.

가장 먼저 추측한 원인은, 웹뷰에서만 특정 도메인들에 대한 ssl 인증서가 없어서 브라우저 보안 문제가 생겼다는 것이었다.

3. 시도

그래서 나는 cloudflare worker로 이미지 프록시를 사용해 도메인 문제를 해소하고자 했다.
하지만 그럼에도 문제는 동일했고...

네트워크 로그를 찍어보니 프록시를 쓸때나, 쓰지 않을 때나 이미지 조회에 공통적으로 403 에러가 뜨고 있었다.

이외에도 뻘짓을 좀 했다.

웹뷰라도 일반 브라우저와 거의 동일한데, 어떻게 이런 차이가 발생하는건지.
그렇게 우리는 끝없는 번뇌에 빠졌다.

4. 해결

브라우저와 웹뷰의 네트워크 로그를 가만히 살펴보니, 아주 작은 차이가 있긴 있었다.

웹페이지에서 앱과 일반 브라우저의 분기처리를 적용하고자 일괄적으로 user-agent에 값을 보내게끔 추가해놓은게 있었던 것이다.

혹시나 해서 이게 문제인가 싶어, 그걸 제거해보니, 잘 됐다. 프록시 없이도 잘 됐다.

해당 특정 사이트들에서 user-agent 값을 엄격하게 검사해서 거부당했던 것이다.

그렇게 문제는 간단히 해결됐다.

5. 결론

user-agent는 건들지 말자.