Post

AWS Amplify에 WAF 적용하기

Amplify는 사용자에게 빠른 개발 및 배포 프로세스를 제공하지만 AWS WAF가 직접 통합되지 않기 때문에 AWS Amplify에서 호스팅하는 많은 웹 애플리케이션에는 방화벽이 연결되어 있지 않다.

웹 방화벽(WAf: Web Application Firewall)

웹 애플리케이션으로 이동하는 악의적인 HTTP/S 트래픽을 필터링, 모니터링 및 차단하여 웹 앱을 보호하고, 승인되지 않은 데이터가 앱에서 나가는 것을 방지한다.


WAF 보안이 중요한 이유

웹 애플리케이션 방화벽을 사용하면 지리적 위치 데이터, 허용 목록에 포함되거나 블랙리스트에 올라간 IP 주소, HTTP URL, HTTP 헤더를 기반으로 한 액세스 제어를 통해 퍼블릭 클라우드, 온-프레미스 및 다중 클라우드 환경에 배포된 애플리케이션을 보호할 수 있다.

WAF는 JavaScript, CAPTCHA(Completely Automated Public Turing Test to tell Computers and Humans Apart), 장치 해석, 인간 상호 작용 알고리즘을 포함한 고급 검증 방법 집합을 활용하여 악의적인 봇 트래픽을 식별하고 차단할 수 있다.

WAF는 여러 소스와 OWASP(Open Web Application Security Project) 감지 규칙에서 집계되는 통합 위협 인텔리전스의 결과로 인터넷 연결 애플리케이션을 공격으로부터 보호한다.

기존 Amplify만 사용했을시 보안적인 측면에 문제가 있을 수 있으므로 AWS에서 제공하는 WAF서비스를 적용하기로 하였다.


AWS Amplify에서 AWS WAF를 활성화 아키텍처

image


Amplify에 WAF 적용하기

1. Github에서 소스 코드를 다운로드

AWS에서 제공하는 Amplify 호스팅 웹 애플리케이션에 대해 WAF 활성화 소스코드를 새롭게 만든 프로젝트에 clone해준다.

1
git clone https://github.com/aws-samples/aws-cdk-amplify-with-waf.git


2. virtualenv를 수동으로 생성하고 활성화

먼저 파이썬이 설치되어 있지 않다면 파이썬 다운로드를 먼저 해준다.

새로 다운로드한 소스 코드로 디렉터리를 변경(aws-cdk-amplify-with-waf)하고 Window의 경우라면 cdk.json파일에서 app을 python3에서 python으로 변경해준다.

image

그 다음, 아래의 명령어를 입력하면 .venv 폴더가 생성된 것을 확인할 수 있다.

1
2
python -m venv .venv
.venv\Scripts\activate.bat

.venv 폴더 생성

image


3. 종속성 설치

1
pip install -r requirements.txt


4. CDK 앱 부트스트랩

4-1. aws-ckd가 설치되어 있지 않다면 먼저 설치해준다.

1
npm install -g aws-cdk

4-2. AWS CLI 자격 증명을 한다.

1
aws configure

위의 명령어를 입력하면 AWS의 Access key와 Secret Access key를 입력하라고 나오는데 이는 AWS의 IAM 서비스에서 확인할 수 있다.

4-3. 스택 생성

1
cdk bootstrap aws://ACCOUNT-NUMBER/REGION-1 aws://ACCOUNT-NUMBER/REGION-2
  • Region-1: 웹 ACL을 배포할 지역(생성한 웹 ACL이 없는 경우 us-east-1로 설정)

  • Region-2: Amplify 앱이 존재하는 지역


AWS의 CloudFormation에서 생성된 CDKToolkit 스택을 확인할 수 있다.

CDKToolkit 스택 생성 그림1


5. 웹 ACL스택 배포 (웹 ACL이 없는 경우에만 실행)

1
cdk deploy CustomWebAclStack


AWS의 CloudFormation에서 생성된 CustomWebAclStack 스택과 Web ACL에서 생성된 웹 ACL를 확인할 수 있다.

CustomWebAclStack 스택 생성

그림2


웹 ACL생성 그림3


6. cdk.json 파일 업데이트

cdk.json파일에서 context에 있는 app_id, branch_name, web_acl_arn을 변경한다.

  • app_id : WAF를 연결하려는 기존 amplify 앱의 Amplify 앱 ID이다.

    이는 일반적으로 형식이 Amplify App Arn의 마지막 부분이다. arn:PARTITION:amplify:REGION:ACCOUNT_ID:apps/APP_ID.

  • branch_name : WAF를 사용하여 보호해야 하는 배포에 해당하는 지점

  • web_acl_arn : Amplify 앱과 연결된 기존 WebACL을 원하는 경우 기존 WebACL의 ARN을 제공한다.

    이전에서 생성된 웹 ACL을 클릭 한 후 copy ARN를 클릭한다. 그림4


7. Amplify에 대한 WAF 보호를 활성화하는 CDK 스택을 배포

1
cdk deploy CustomAmplifyDistributionStack


CustomAmplifyDistributionStack 스택 생성 확인 그림5


CloudFront 생성 확인 그림6




적용하면서 겪은 어려움

❗ 문제 상황

  1. CloudFront로 배포한 도메인에서 이미지를 모두 가져오지 못함

  2. 로그인 후 main페이지로 이동해야하는데 이동되지 않음

일단 main페이지로 이동하지 않는 문제를 해결하고자 여러 시행착오 끝에 알아낸 사실!

로그인 후에 SSR로 브라우저 쿠키의 token과 cognito의 currentSession으로 token을 비교하는데 확인하는 과정에서의 문제로 리다이렉트되어 로그인창으로 다시 넘어가는 문제였다.

브라우저 쿠키의 token과 cognito의 currentSession을 확인결과 로컬에서는 둘다 문제가 없었지만 배포된 사이트에서 확인해보니 브라우저의 쿠키를 읽어오지 못했다.

💡 문제 해결

CloudFront에 적용된 캐시 정책을 확인해 보니 쿠키가 없음으로 지정되어 있어 새로운 캐시 정책을 만들고 쿠키를 모두 허용해주었다.

다시 배포된 것을 확인하니 쿠키도 가져오고 동시에 이미지도 잘 뜨게 되었다!

This post is licensed under CC BY 4.0 by the author.