[Base64 인코딩 이슈] CloudFront / S3 트러블 슈팅 (6)

이전에 이미지 서빙속도 개선을 위한 CloudFront / S3 프로젝트를 진행하며 겪었던 아래 이슈가 있었는데, 메모하는 걸 깜빡하여 이제 기술해놓는다!

 

내용은 아래와 같았다.

 

[현 상황]

- 보안에 중점을 둔 회차 컨텐츠 이미지 파일들은 url path를 암호화함과 동시에, Cloudfront 퍼블릭키를 사용한 signed url을 생성하여 호출하였음. 이를 위해 cloudfront 뒤에 있는 s3의 path를 암호화를 하게 되는데, 해당 데이터는 이진데이터 (binary-data)이기 때문에 안전하게 텍스트 형식으로 보내기 위해 base64를 진행하였다.

 

[문제 상황]

전달받은 url을 통해 이미지를 조회하려고 할 때, url 중간중간에 공백이나 '/' 같은 것들이 껴 있어 정상적인 경로에 대한 조회가 안 되는 문제가 발생함

 

[파악 결과]

Base64의 인코딩 방식을 알아야 했었음.. 정보는 아래와 같음.

 

Base64 인코딩은 아래와 같은 문자를 사용하여 인코딩을 진행한다.

1. 알파벳 대문자 (A-Z)
2. 알파벳 소문자 (a-z)
3. 숫자 (0-9)
4. 두 개의 추가 문자: "+"와 "/"

 

그런데 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를 얻게되었고, 이미지 조회가 정상적으로 되게 되었다.

 

이것 때문에 반나절을 애먹었었다..

잊지않기 위해 꼭 메모!