참고서적 : 아마존 웹 서비스를 다루는 기술 11장 (http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9788966187935&orderClick=LEa&Kc=)

image.png

11.1 - 버킷 생성하기
11.2 - S3 버킷에 파일 올리기/받기
11.3 - S3 세부 설정하기

책 너무 좋아요... 🤣🤣 꼭 읽어보세요!


이번 글에서는 AWS에서 S3 Bucket에 올려진 이미지 파일을 특정 도메인에서만 접근할 수 있도록 제한해보겠습니다.

0. HTTP Referer란?

HTTP는 헤더값으로 웹 브라우저에서 생성하는 데이터 입니다. 예를들어 http://naver.com 웹사이트에서 특정 링크를 클릭하거나 <img> 태그로 그림 파일을 보여줄때 해당 Resource로 보내는 HTTP 헤더의 Referer값은 http://naver.com 입니다. 따라서 링크를 어디서 클릭했는지, 그림 파일을 어디서 보여주고 있는지를 알 수 있습니다. S3에서는 이 Referer값을 판단해 파일을 보여줄지 말지 제한할 수 있습니다.

1. Bucket 생성하기

이번 실습을 위해선 AWS S3에 2개의 Bucket이 필요합니다.

이미지 파일을 저장하기위한 Bucket(minho-bucket-image-folder)와 정적 웹 사이트 호스팅을 위한 Bucket(minho-bucket-tutorial2)을 아래와 같이 생성하겠습니다.

image.png

2. Bucket 권한 관리하기

이미지 파일을 저장히기위한 Bucket은 AWS Policy Generator를 사용해 아래와 같이 Bucket Policy를 지정합니다.

{
    "Version": "2012-10-17",
    "Id": "Policy1574678695789",
    "Statement": [
        {
            "Sid": "Stmt1574678689238",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::minho-bucket-image-folder/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": "http://minho-bucket-tutorial2.s3-website-ap-northeast-1.amazonaws.com/*"
                }
            }
        }
    ]
}

위의 내용을 살펴보면 다음과 같습니다.

Effect : 지정한 도메인만 허용 -> Allow
Principal : 정책을 적용할 대상. 인터넷 전체 공개 -> *
Action : 이미지 파일을 다운로드 -> s3:GetObject
Condition : 문자열 포함 조건절 -> StringLike

이미지 파일을 저장한 Bucket은 위의 정책(Policy)에 따라서, aws:Referer에 선언된 도메인에서만 접근가능하게 됩니다.

여기서 minho-bucket-tutorial2.s3-website-ap-northeast-1.amazonaws.com/* 에는 본인이 생성한 S3 정적 웹사이트 호스팅 버킷의 주소를 설정합니다.

다음으로 아래와 같이 Block Public Access를 수정해줍니다.

image.png

만약 여기서 Block All Public AccessON으로 설정되어있다면, 어떠한 public access도 접근가능하지 않으므로 반드시 OFF로 설정하여 줍니다. 이후 작성한 Bucket Policy를 기반으로 접근을 제어하기 위해 세번째 항목을 ON으로 설정합니다.

3. 테스트

먼저 위의 aws:Referer에 등록되지 않은 도메인에서 이미지 저장 Bucket에 업로드 되어있는 이미지 파일을 열어보겠습니다.

image.png
위와 같이 이미지 파일 Bucket에 저장되어있는 사진을 클릭해 아래와 같이 OverView 페이지를 열어줍니다.

image.png

여기서 선택한 이미지의 Object URL을 클릭해보면,

image.png

위와 같이 AccessDenied 에러와 함께 사진이 열리지 않습니다. 이는 방금전 Object URL을 클릭했던 도메인(https://s3.console.aws.amazon.com) 즉, HTTP RefererBucket Policy에 등록한 Referer(http://minho-bucket-tutorial2.s3-website-ap-northeast-1.amazonaws.com/*) 와 맞지 않기 때문입니다.

그렇다면 어떻게하면 해당 Referer에서 이미지 파일을 불러올 수 있을까?

4. 정적 웹호스팅 S3에 html 작성하기

Referer가 등록된 Bucket이미지 파일을 불러오기 위한 예제 파일을 작성해 보겠습니다.

Editor를 사용해 아래와 같은 간단한 html을 작성합니다.

<html>
<head>
    <title>S3 Example Website Hosting</title>
</head>

<body>
    <p>Hello S3</p>
    <img src="https://minho-bucket-image-folder.s3-ap-northeast-1.amazonaws.com/20190901_103355.jpg" width="320"
        height="240">
</body>
</html>

작성한 파일을 index.html로 저장후 정적 웹호스팅을 설정한 S3 Bucket에 해당 html 파일을 업로드해줍니다.

image.png

5. 정적 웹호스팅 S3에서 이미지 파일 불러오기

마지막으로, 이미지 파일을 불러오겠습니다.

정적 웹호스팅 S3의 Properties탭의 Static Web hosting을 클릭해줍니다.

image.png

만약 이전에 Index document를 등록하지 않았다면, 아래와 같이 Index documentindex.html로 설정해주고 Save버튼을 눌러줍니다.
잠시후 다시한번 Static Web hosting을 클릭하면 정상적으로 Endpoint가 등록되어있습니다. Endpoint는 해당 정적 웹호스팅 S3의 메인페이지 정도라고 생각하시면 될 것 같습니다.
image.png

마지막으로, Endpointurlhttp://minho-bucket-tutorial2.s3-website-ap-northeast-1.amazonaws.com 를 클릭하면 아래와 같이 이미지 파일이 정상적으로 출력된 것을 확인할 수 있습니다.
이미지 파일 저장 BucketPolicy에 등록된 HTTP-Referer 정책에 위의 정적 웹호스팅 S3URL이 등록되어 있기 때문에 아래와 같이 이미지가 정상적으로 출력될 수 있었습니다.

image.png

6. 결론

이미지 파일 저장 Bucket에 특정 도메인만 접근할 수 있도록 제한하려면?
-> AWS Policy Generator를 사용해 HTTP-Referer 접근 제한자를 설정하면된다.