Object Storage Bucket에 CORS 설정하기

Ncloud(네이버 클라우드)의 Object Storage Bucket에 CORS를 설정하는 방법입니다

Tip: 기술문서 사이트가 리뉴얼 되었습니다.

개요

Object Storage를 이용해 서비스 개발을 하다 보면 CORS 와 관련된 오류와 종종 마주치게 되는데, 테스트 버킷과 사이트를 생성해서 해결 방법을 알아보겠습니다. 그리고, Ncloud(네이버 클라우드) Object Storage의 CORS 설정은 콘솔이 아닌, CLI와 외부 Client Tool 등을 사용해야 하는데 각각의 방법을 차례로 소개합니다.

CORS: CORS(Cross-Origin Resource Sharing)는 웹 애플리케션이 서비스되는 도메인에서 다른 도메인에 있는 리소스를 접근해야 할 때 리소스에 대한 접근 허용, 제한 등에 대한 방법을 정의합니다.

테스트 방법

Object Storage에 cors-test 라는 이름의 버킷 생성
http://cors-test.com 라는 테스트 사이트 준비
버킷에 http://cors-test.com 도메인에서 접속 가능하도록 CORS 설정
Javascript를 이용해 cors-test 버킷에 있는 파일이 호출되는지 확인
버킷 CORS 설정을 변경하여 http://cors-test.com 도메인에서는 접속하지 못하게 설정
cors-test 버킷에 있는 파일 호출이 차단되는지 확인

CORS 구성 요소

CORS는 아래와 같은 요소들로 구성되어 있습니다.

AllowedHeader : 리소스를 요청할 때 사용할 수 있는 Header
AllowedMethod : 리소스를 요청할 때 허용된 Method
AllowedOrigin : 접근 허용된 Origin 도메인
ExposeHeader : 응답에서 접근이 허용된 Header
MaxAgeSeconds : 지정한 리소스에 해당하는 프리플라이트(pre-flight) OPTIONS 요청에 대한 최대 응답 시간

CLI 사용

Ncloud는 Object Storage CLI 접속 시 AWS CLI를 이용해 접속하게 되는데, 자세한 사용 방법은 아래 링크 문서에서 확인 가능합니다.

⁃ AWS CLI를 이용한 Object Storage 접속 방법

json 파일 생성

CLI를 사용하기 위해 먼저 간단하게 GET, PUT Method로 접근가능 하게 하는 CORS 설정을 입력한 별도의 json 파일을 생성 합니다. 여기서는 cors-test.json 이라는 이름으로 저장하겠습니다.

{
  "CORSRules": 
  [
    {
      "AllowedHeaders": [
        "*"
      ],
      "AllowedMethods": [
        "GET",
        "PUT"
      ],
      "AllowedOrigins": [
        "http://cors-test.com"
      ],           
      "MaxAgeSeconds": 3000
    }
  ]
}

json 형식에 대해서는 아래의 링크를 참조 합니다.

⁃ AWS - CORS 구성

json파일을 생성 하였으면 아래와 같은 형식으로 CORS 규칙 설정을 버킷에 적용하는 명령어를 입력 합니다. 여기서는 테스트를 위해 미리 [cors-test] 라는 이름의 버킷을 생성해두었습니다.

# CORS 설정 입력 명령어 형식
aws --endpoint-url=https://kr.object.ncloudstorage.com s3api put-bucket-cors --bucket <버킷이름> --cors-configuration file://<json파일 경로>

# 예제
aws --endpoint-url=https://kr.object.ncloudstorage.com s3api put-bucket-cors --bucket cors-test --cors-configuration file://cors-test.json

그런 다음 제대로 적용되었는지 확인 하기 위해 버킷의 CORS 설정을 확인하는 명령어를 실행합니다.

# CORS 설정 조회 명령어 형식
aws --endpoint-url=https://kr.object.ncloudstorage.com s3api get-bucket-cors --bucket <버킷이름>

# 예제
aws --endpoint-url=https://kr.object.ncloudstorage.com s3api get-bucket-cors --bucket cors-test

Ncloud(네이버 클라우드)의 Object Storage Bucket에 CORS를 설정하는 방법

S3 Browser 사용

외부 Client Tool중에서 CORS 설정이 가능한 것은 S3 Browser 이며, 자세한 사용 방법은 아래의 링크 문서를 참고하시기 바랍니다.

⁃ Object Storage 접속용 Windows Client Tool - S3 Browser

S3 브라우저에 접속 하신다음 CORS 설정 대상의 버킷에서 오른쪽 마우스 버튼을 클릭 합니다.

CORS Configuration 클릭하여 CORS 설정을 오픈하면 처음에는 아무 값도 설정되어 있지 않습니다.

XML 형식의 설정 준비

마찬가지로 GET, PUT Method로 접근 가능한 설정을 이번에는 XML 형식으로 입력하고 [Apply] 버튼을 클릭해서 적용합니다.

<CORSConfiguration>
  <CORSRule>
    <AllowedHeader>*</AllowedHeader>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>    
    <AllowedOrigin>http://cors-test.com</AllowedOrigin>        
    <MaxAgeSeconds>3000</MaxAgeSeconds>
  </CORSRule>
</CORSConfiguration>

접속 테스트

정상 접속 확인

설정을 마친 후 Javascript를 사용해서 cors-test 버킷에 있는 파일을 호출해보면 아래와 같이 문제 없이 접속되는 것을 확인할 수 있습니다.

CORS 변경

접속 차단을 테스트 하기 위해 CORS 설정에서 AllowedOrigin 값을 임의의 http://example.com 으로 변경하겠습니다.

접속 차단 확인

설정을 변경한 후에 접속을 해보면 이전과는 다르게 아래와 같은 메시지가 나타나면서 접속이 차단된 것을 확인할 수 있습니다.

error: Access to XMLHttpRequest at ‘https://kr.object.ncloudstorage.com/cors-test/cors-test.txt’ from origin
‘http://cors-test.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

CORS 예시

예시 1

아래 예시는 http://*.cors-test.com 즉, cors-test.com 도메인을 가진 모든 하위 도메인에 대해 허용할 요청 Method와 허용할 응답 헤더 값을 정의했습니다.

{
  "CORSRules": 
  [
    {    
      "AllowedHeaders": [
        "*"
      ],
      "AllowedMethods": [
        "PUT",
        "POST",
        "DELETE"
      ],
      "AllowedOrigins": [
        "http://*.cors-test.com"
      ],
      "ExposeHeaders": [
        "x-amz-server-side-encryption",
        "x-amz-request-id",
        "x-amz-id-2"
      ],
      "MaxAgeSeconds": 3000
    }
  ]
}

<CORSConfiguration>
  <CORSRule>
    <AllowedHeader>*</AllowedHeader>   
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedOrigin>http://*.cors-test.com</AllowedOrigin>   
    <ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
    <ExposeHeader>x-amz-request-id</ExposeHeader>
    <ExposeHeader>x-amz-id-2</ExposeHeader>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
  </CORSRule>
</CORSConfiguration>

예제 2

아래 예제 2는 2가지 도메인에 대해 각각 다른 규칙을 정의했습니다.
먼저 http로 접속하는 www.cors-test.com 도메인에 대해서는 GET 방식의 요청만 허용하고,
다음 https로 접속하는 api.cors-test.com 도메인에 대해서는 PUT, POST, DELETE 요청을 허용하는 규칙입니다.

{
  "CORSRules": 
  [
    {
      "AllowedHeaders": [
        "*"
      ],
      "AllowedMethods": [
        "PUT",
        "POST",
        "DELETE"
      ],
      "AllowedOrigins": [
        "https://api.cors-test.com"
      ]
    },
    {
      "AllowedMethods": [
        "GET"
      ],
      "AllowedOrigins": [
        "http://www.cors-test.com"
      ]
    }
  ]
}

<CORSConfiguration>
  <CORSRule>
    <AllowedHeader>*</AllowedHeader>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedOrigin>http://api.cors-test.com</AllowedOrigin>
  </CORSRule>
  <CORSRule>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedOrigin>http://www.cors-test.com</AllowedOrigin>
  </CORSRule>
</CORSConfiguration>

참고 URL

Object Storage CLI 가이드
- https://cli.ncloud-docs.com/docs/guide-objectstorage
AWS CLI를 이용한 Object Storage 접속 방법
- https://docs.3rdeyesys.com/storage/ncloud_storage_object_storage_aws_cli_connect.html
Object Storage 접속용 Windows Client Tool - S3 Browser
- https://docs.3rdeyesys.com/storage/ncloud_storage_object_storage_s3_client_s3browser.html

Tags: