[TIL] 유니코드 이중 인코딩 문제

📖 오늘의 학습

---

백엔드와 통신 도중 사진이 제대로 나오지 않는 문제가 발생했다. ▼

 

포스트맨에는 사진의 url경로가 제대로 나오는데, 이를 불러오려고 하니 s3에서 접근을 막으며 사진을 불러와주지 않았다. ▼

문제의 원인이 무엇인지 몰라 백엔드의 문제라고 생각하며 요청을 했는데, 서버에는 사진이 제대로 올라가있는 상황이었다. 양쪽의 문제가 아니라면 도대체 문제가 무엇일까 하던 찰나 사진 url이 무언가 이상함을 눈치챘다.

 

`20240413%25EF%25BC%25BF165238.jpg`

 

위는 사진 url의 일부다. 여기서 이상한 부분은 바로 `%25EF%25BC%25BF` 부분. 유니코드로 인코딩된 부분이 조금 이상하다.

 

S3에 가보니 이런 식으로 객체 URL이 S3 URI와 다른 것을 알 수 있었다. ▼

 

 

그런데 한 가지 더 이상한 점은 `%EF%BC%BF` 는 디코딩 시 `＿` 라는 전각 문자임을 알 수 있는데, `%25EF%25BC%25BF`는 디코딩을 해도 맞는 문자가 없다는 것이다.

 

그렇다면 이 문자는 무엇일까? 검색해본 결과 `%25EF%25BC%25BF`는 `＿` 문자가 두 번 유니코드로 인코딩 된 것이었다.

 

프로젝트 코드 중에 이렇게 url을 가져오는 코드가 있었다. ▼

  const urlObject = new URL(url);
  const pathname = urlObject.pathname;

 

그런데 이렇게 만들어진 pathname은 자동으로 유니코드 인코딩을 해준다. 예를 들어 공백이 있다면, %20으로, 아까와 같이 `＿`가 있다면 `%25EF%25BC%25BF`로 인코딩을 해준다.

 

나는 저 pathname을 파일 이름으로 저장하고 그 파일 이름을 그대로 서버에 올렸기에, s3에서 자동으로 이를 한 번 더 인코딩을 하면서 두 번 인코딩이 되게 되는 것이었다.

 

즉, "Frame 30.jpg" 라는 파일을 받으면, 웹 로컬에서는 "Frame%2030.jpg"가 되고, s3에 올리면서 `%`가 한 번 더 인코딩 되어 "Frame%252030.jpg"가 되는 것이었다. 

 

 

🤔 오늘의 회고

---

방탈출 하는 느낌이었다... 단서를 못찾았다면 아무것도 못하고 시간만 날렸을 것만 같은 그런 문제였다.