이전에 이미지 서빙속도 개선을 위한 CloudFront / S3 프로젝트를 진행하며 겪었던 아래 이슈가 있었는데, 메모하는 걸 깜빡하여 이제 기술해놓는다!
내용은 아래와 같았다.
[현 상황]
- 보안에 중점을 둔 회차 컨텐츠 이미지 파일들은 url path를 암호화함과 동시에, Cloudfront 퍼블릭키를 사용한 signed url을 생성하여 호출하였음. 이를 위해 cloudfront 뒤에 있는 s3의 path를 암호화를 하게 되는데, 해당 데이터는 이진데이터 (binary-data)이기 때문에 안전하게 텍스트 형식으로 보내기 위해 base64를 진행하였다.
[문제 상황]
전달받은 url을 통해 이미지를 조회하려고 할 때, url 중간중간에 공백이나 '/' 같은 것들이 껴 있어 정상적인 경로에 대한 조회가 안 되는 문제가 발생함
[파악 결과]
Base64의 인코딩 방식을 알아야 했었음.. 정보는 아래와 같음.
Base64 인코딩은 아래와 같은 문자를 사용하여 인코딩을 진행한다.
- 알파벳 대문자 (A-Z)
- 알파벳 소문자 (a-z)
- 숫자 (0-9)
- 두 개의 추가 문자: "+"와 "/"
그런데 url에서는 +를 일반적으로 공백을 나타내는데 사용한다.
웹 브라우저나 웹 서버에서 주소를 인코딩할 때 공백을 +로 대체하기 때문에..
또한 /는, URL에서는 경로를 구분짓기 위해 사용하는 값인데.
혼재되어있음으로써 올바른 경로를 나타내지 못하여 문제가 발생했다.
이로 인해,
인코딩, 디코딩을 진행할 때 아래와 같이 진행하였다.
인코딩 후에 나온 +나 /문자를 base64에서 사용하지 않는 -나 _로 replace 대체하여 바꾼 뒤
// URL-safe Base64 인코딩 적용
$base64_encoded = base64_encode($encrypt);
$url_safe_encoded = str_replace(['+', '/'], ['-', '_'], $base64_encoded);
다시 디코딩 하기 전에 원래 문자인 +, /로 교체하였다.
// URL-safe Base64 인코딩된 문자열을 원래의 Base64 형식으로 변환
$url_safe_decoded = str_replace(['-', '_'], ['+', '/'], $encrypt);
$encrypt = base64_decode($url_safe_decoded);
해당 방식으로 문제를 해결함으로써 올바른 cloudfront + s3 path를 얻게되었고, 이미지 조회가 정상적으로 되게 되었다.
이것 때문에 반나절을 애먹었었다..
잊지않기 위해 꼭 메모!
'★ 프로젝트 + 트러블 슈팅 ★' 카테고리의 다른 글
Vercel 환경설정 (0) | 2024.06.09 |
---|---|
[ELB WAF 이슈] ELB WAF 데이터 차단 트러블 슈팅 (0) | 2024.05.27 |
Lambda@Edge / CloudFront / S3 프로젝트 최종정리 (이미지 파일 관리 개선 프로젝트) (0) | 2024.02.04 |
[이미지 보안 이슈] pre_signed_url / CloudFront / S3 트러블 슈팅 (5) (0) | 2024.01.30 |
[Cache 무효화] CloudFront / S3 트러블 슈팅 (4) (0) | 2024.01.11 |
댓글