Amazon S3가 CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)를 공식적으로 지원하면서 HTML5 기반 파일 업로드가 드디어 가능해졌습니다. 이제 Plupload의 HTML5 런타임을 활용하면 서버를 거치지 않고 브라우저에서 S3 버킷으로 파일을 직접 전송할 수 있습니다.
왜 이전에는 불가능했을까?
브라우저의 동일 출처 정책(Same-Origin Policy) 때문에 과거에는 클라이언트 측 JavaScript에서 다른 도메인의 리소스에 접근하는 것이 제한되었습니다. 그 결과 파일 업로드 시 반드시 자체 서버를 중간 경유지로 사용해야 했고, 이는 서버 부하와 트래픽 비용 증가로 이어졌습니다.
CORS가 해결해 준 문제
S3가 CORS를 지원함에 따라 버킷 소유자가 특정 출처(origin), HTTP 메서드(GET, PUT, POST 등), 헤더를 선택적으로 허용하도록 설정할 수 있게 되었습니다. 이를 통해 외부 도메인에서 호스팅되는 웹 애플리케이션도 승인된 범위 내에서 안전하게 S3 리소스에 접근할 수 있습니다.
Plupload를 활용한 직접 업로드
Plupload는 다양한 런타임(HTML5, Flash, Silverlight 등)을 지원하는 인기 있는 파일 업로드 라이브러리입니다. HTML5 런타임 환경에서는 XMLHttpRequest Level 2를 기반으로 동작하므로, S3 버킷에 적절한 CORS 구성만 추가하면 별도의 프록시 서버 없이 곧바로 업로드가 이루어집니다.
기본적인 CORS 설정 예시
S3 버킷 속성에서 CORS 구성에 아래와 같은 규칙을 추가하면 됩니다:
- 허용할 출처(AllowedOrigin): 예를 들어 https://www.example.com 또는 와일드카드 *
- 허용할 메서드(AllowedMethod): PUT, POST, GET
- 허용할 헤더(AllowedHeader): *
기대 효과
CORS를 활용하면 서버를 거치지 않는 리치 클라이언트 웹 애플리케이션을 만들 수 있습니다. 대용량 파일 업로드 시 자체 서버의 부담이 크게 줄어들고, 업로드 속도 역시 개선됩니다. 또한 사전 서명된 URL(Presigned URL)이나 정책 문서를 조합하면 보안성까지 확보할 수 있어, 이미지·동영상 저장 서비스나 백업 애플리케이션 구축에 매우 유용합니다.