[React] 카카오톡 공유하기 /미리보기 썸네일 이미지가 안보이는 문제

현재 구현 중인 웹서비스의 게시물 상세페이지에서 카카오톡 공유하기 기능을 추가하기로 했다.  기능 구현 과정에서 한 가지 문제가 있었다.

 

'카카오' 버튼을 클릭하면 공유는 잘 되었지만, 게시물의 제목과 내용은 잘 들어가는데 문제는 썸네일 이미지가 보이지 않았다. 이미지 없이 텍스트만 보여서 사용자 경험이 좋지 않았다.

 

 

 

 

첫째로 의심했던 것은 이미지 URL이 올바르지 않거나, 카카오톡이 지원하지 않는 형식의 이미지를 사용하고 있는 것은 아닌가 하는 것이었다.

 

Kakao developers (https://developers.kakao.com/docs/latest/ko/message/js-link#upload-image)를 살펴보면 https 형식의 imageUrl을 사용하고 있다.

 

현재 코드에서 매개변수로 받아오는 imageUrl도 확인해 보았다.

 

이미지 형식이 잘 못된 것은 아니라는 것을 확인했다. 

정보를 찾다 보니 사용하고 있는 firebase Storage의 보안 규칙이 썸네일 이미지의 접근을 제한하고 있음으로 발생할 문제일 가능성이 있었다.

 

 

Storage > Rules를 살펴보니 allow read, write: if request.time < timestamp.date(2024, 2, 6);라고 설정되어 있었고, 이는 2024년 2월 6일까지만 파일 읽기 및 쓰기 작업을 허용한다는 것을 의미했다.  

 

Firebase Storage를 처음 생성할 때, Firebase는 종종 개발을 쉽게 시작할 수 있도록 일시적인 보안 규칙을 제공한다. 이 초기 설정은 일반적으로 30일 동안 모든 사용자가 읽고 쓸 수 있는 권한을 부여하며, 이는 신속한 개발과 테스트를 위한 것이다.

 

그런데 시간제한이 문제라면, 현재 날짜(2024.01.25)로는 아직 읽기 및 쓰기 권환이 활성화되어있는 것인데 어떤 이유에서인지 이미지 불러오기가 되지 않고 있었다.

 

해결 

우선  시간제한을 없애고 모든 사용자가 읽기 및 쓰기가 가능하도록 변경해 보았다.

 

무슨 이유에서인지 썸네일 이미지가 잘 가져와진다..

 

하지만 모든 사용자에게 읽기 및 쓰기 권한을 제한하지 않는 것은 보안상의 위험했다. 

공유 기능에서 썸네일이 제대로 보이려면, 이미지에 대한 공개적인 읽기 권한이 필요하므로, 읽기 권한은 모두에게 허용하도록 'allow read;'로 설정하고, 쓰기 권한에 대해서는  인증된 사용자에게만 허용하도록 'allow write: if request.auth!= null'로 변경했다.

 

다시 한번 카카오톡 공유 테스트에서도 썸네일 이미지가 성공적으로 표시되었다. 이번 문제를 해결하면서 공유 기능에 영향을 미칠 수 있는 보안규칙을 이해하고, 적절히 설정해줘야 한다는 것을 배웠다.