서버에 HTTPS 요청 보내기 1편 - (feat. Mixed Content 에러 해결)

개요

최종적으로 프론트엔드와 백엔드의 작업이 끝나 테스트를 해보기 위해, Vercel에 배포된 웹 페이지에서  테스트 서버 EC2 인스턴스 API 요청을 보냈다. 하지만 연동하자마자 에러를 만날 수 있었다. 

 

Mixed Content 란?

Mixed Content 에러는 웹 페이지가 HTTPS를 통해 로드되면서, HTTP를 통해 로드되는 리소스(예: 이미지, 스크립트, 스타일시트 등)를 포함할 때 발생한다. 이러한 상황은 보안 위험을 초래할 수 있으므로, 대부분의 현대 브라우저는 Mixed Content를 허용하지 않고 차단한다.

Mixed Content의 종류

1. Passive Mixed Content (Display Mixed Content)
   • 페이지가 여전히 HTTPS로 로드되지만, HTTP를 통해 로드된 리소스(이미지, 비디오 등)를 포함하는 경우.
   • 사용자 데이터를 직접적으로 위협하지 않지만, 공격자가 HTTP를 통해 로드된 리소스를 변경할 수 있어 신뢰성이 떨어짐.
   • 대부분의 브라우저는 이를 경고 정도로만 표시하거나, 일부 경우에 차단.
2. Active Mixed Content (Block Mixed Content)
   • 페이지가 여전히 HTTPS로 로드되지만, HTTP를 통해 로드된 리소스(스크립트, 스타일시트, AJAX 요청 등)를 포함하는 경우.
   • 보안에 직접적인 영향을 미치며, 공격자가 악성 스크립트를 삽입할 수 있어 매우 위험.
   • 대부분의 브라우저는 이를 차단하여 페이지의 로딩을 막음.

 

원인

프론트엔드 로컬 개발 환경에서 EC2 테스트 서버에 연동하여 테스트할 때는 HTTP 통신으로 충분히 가능했으므로 문제가 되지 않았다. 하지만 프론트엔드를 Vercel에 배포한 후에는 이러한 에러가 발생했다. 이유는 로컬에서는 HTTP 통신을 사용했지만, 배포된 Vercel 페이지에서는 HTTPS 통신을 사용하기 때문이다. API 요청이 HTTP로 이루어지면서 Active Mixed Content가 발생했다. 따라서 브라우저는 보안을 위해 Mixed Content 에러를 표시하고 페이지 로딩을 차단했다.

 

서버는 이젠 HTTP 통신이 아닌, HTTPS 통신으로 API 요청을 받을 수 있어야 한다. HTTP는 데이터를 암호화하지 않고 전송하기 때문에, 전송 중에 데이터를 제3자가 쉽게 읽거나 변조할 수 있다. 이를 방지하기 위해 HTTPS가 나왔다. HTTPS는 SSL(Secure Sockets Layer) / TLS(Transport Layer Security) 프로토콜을 사용하여 데이터를 암호화한다. 이를 통해 데이터 전송 중에 제3자가 데이터를 읽거나 변조하는 것을 방지한다.

 

해결법 

백엔드 API 서버에 직접 HTTPS 통신에 관한 설정할 수 있지만, 그렇게 하지 않고, SSL Termination 이라는 방식을 사용했다.

오프로딩(Offloading)은 시스템의 특정 작업이나 처리를 다른 시스템, 장치 또는 프로세스로 이전하여 메인 시스템의 부하를 줄이고 성능을 향상시키는 기술이다. 백엔드 서버의 공통된 앞단의 한 곳에서 SSL 관련 처리를  모두 진행하는 것이다. SSL Termination은 SSL Offloading의 한 형태로, SSL/TLS 연결이 로드 밸런서나 리버스 프록시 서버와 같은 중간 장치에서 종료되는 것을 의미한다. 이 경우, 암호화된 트래픽은 중간 장치에서 복호화되고, 복호화된 트래픽은 내부 네트워크를 통해 전달된다.

즉, SSL Termination은 주로 로드 밸런서 또는 리버스 프록시 서버에서 SSL/TLS 암호화를 해제(terminate)하고, 백엔드 서버(예: EC2 인스턴스)와는 암호화되지 않은 평문 HTTP로 통신하는 방식이다. SSL Termination은 다음과 같은 장점이 있다.

1. 성능 향상: SSL/TLS 암호화와 복호화는 CPU 집약적인 작업이다. SSL Termination을 사용하면 로드 밸런서 또는 프록시 서버가 이 작업을 처리하므로, EC2 인스턴스의 CPU 부하를 줄일 수 있다.

2. 단순한 인증서 관리: SSL 인증서를 한 곳(로드 밸런서 또는 프록시 서버)에서 관리할 수 있다. 이를 통해 인증서 갱신, 배포, 설정 등을 중앙에서 관리하기가 쉽다. 모든 백엔드 서버에서 인증서를 설치하고 관리할 필요가 없어진다.

 

 

SSL Termination 처리하는 방법으로는 위에서 말했듯이 2가지가 대표적이다.

1. 리버스 프록시 서버 활용 : 아파치 혹은 NGINX 를 구동시켜 리버스 프록시 서버를 만들어  백엔드 서버에 요청이 오면 먼저 리버스 프록시 서버에서 처리하게 된다. 리버스 프록시 서버에는 Let's Encrypt 같은

TLS/SSL 인증서를 쉽게 가져오고 설치할 수 있는 CA(인증 기관)에서 제공하는 인증서를 설정하여 SSL Termination을 가능하게 한다.

리버스 프록시 서버에서 HTTP 요청을 받으면 HTTPS 요청으로 리다이렉트 시키고, HTTPS 요청을 받으면 SSL Termination 한 후 평문 요청을 Path 맞는 백엔드 서버에 포워딩 해주게 된다.

2. 로드밸런서 활용 : 백엔드 서버 앞에 로드밸런서를 두어 트래픽을 먼저 로드밸런서가 받게 된다.  리버스 프록시 서버 와 같이 HTTP로 온 요청은 HTTPS 요청으로 리다이렉트 시키고, 로드밸런서에서 SSL Termination 한 후 평문 요청을 백엔드 서버로 보내게 된다. AWS를 이용하게 되면 ACM을 통해 인증서를 발급하고, ALB(Application Load Balancer = ELB) 에 인증서를 설정해주어 SSL Termination이 가능하다.

 

두가지 방법 모두 도메인이 있어야한다. SSL/TLS 인증서는 도메인 이름을 기준으로 발급되며, 이 인증서를 통해 클라이언트는 서버의 신원을 확인하고 통신을 암호화할 수 있다. 인증 기관(Certificate Authority, CA)은 도메인의 소유권을 확인하고 해당 도메인에 대한 인증서를 발급한다.

 

이번 프로젝트에서는 AWS 로 처음 배포 하기도 해서 ACM 인증서를 이용하여  ALB(Application Load Balancer) 를 통해 백엔드 서버에 HTTPS 요청을 보낼 수 있도록 해보았다. 간략하게 먼저 설명하자면,

AWS Route53 서비스를 이용하여 도메인 이름을 호스팅 영역 등록하고, DNS 설정을 통해 서버와 로드 밸런서와 관련한 레코드를 등록한다. AWS에서는 ACM(AWS Certificate Manager)을 사용하여 무료 인증서를 발급받을 수 있다. 발급받은 인증서를 로드 밸런서에 설정하여 SSL Termination을 구성한다.

다른 프로젝트에선 리버스 프록시 서버를 활용하여 SSL Termination 가능하게 했다.

 

AWS Route 53

먼저 필요한 도메인을 구입한다.

도메인은 AWS 의 Route 53 서비스로 도메인을 등록해도 되지만, 비교적 값이 싼 가비아에서 사는 걸 추천한다.

.shop  또는 .store 같은 경우 550원이면 도메인 등록 가능하다. 필자 또한 .store 로 도메인을 구입했다.

(이번 프로젝트에선 가비아로 도메인을 구입해보고, 다음 프로젝트에서는 AWS Route53 으로 도메인을 구입했다. 좀 괜찮은 도메인은 18000원 정도 한다. 환율이,,,,,,😨)

 

구입하거나 무료로 얻은 도메인은 등록이 필요하다.

AWS에서 Route 53에 접속하여 호스팅 영역 생성을 눌러준다.

 

세번째는 미리 만들어둔 나의 도메인이다.

 

 

 

본인이 구매하거나 얻은 도메인 이름을 입력해준다.(EX:  example.store , example.com)

다른 설정은 건들이지 않고 유형 또한 퍼블릭 호스팅 영역으로

호스팅 영역 생성을 클릭하여 호스팅 영역을 생성한다.

 

 

생성된 호스팅 영역 이름을 클릭해서 들어가보면 세부 정보를 볼 수 있다. 필자는 다 설정 해둔 거기 때문에 레코드가 여러개 나오지만 처음인 사람은 NS 레코드와 SOA 레코드 2개 정도 기본으로 생긴다.

1. A 레코드 (Address Record)
역할: A 레코드는 도메인 이름을 IPv4 주소와 연결한다. 이는 사용자가 웹 브라우저에 도메인 이름을 입력하면 해당 도메인이 실제 서버의 IP 주소로 변환되어 접속할 수 있도록 한다.

2. CNAME 레코드 (Canonical Name Record)
역할: CNAME 레코드는 하나의 도메인 이름을 다른 도메인 이름에 별칭(alias)으로 연결한다. 이는 하나의 도메인 이름이 여러 도메인 이름을 가리키도록 할 때 유용합니다. CNAME 레코드는 최종적으로 A 레코드나 AAAA 레코드로 해석다. ( EX: www.example.com. IN CNAME example.com. )

3. NS 레코드 (Name Server Record)
역할: NS 레코드는 도메인 이름의 네임서버를 지정합니다. 네임서버는 도메인 이름의 DNS 정보를 관리하고, DNS 쿼리를 처리한다. 도메인의 NS 레코드는 해당 도메인에 대한 모든 DNS 쿼리를 처리할 네임서버를 지정한다.

4. SOA 레코드 (Start of Authority Record)
역할: SOA 레코드는 도메인의 DNS 영역(zone)에 대한 주요 정보를 포함한다. 이는 해당 DNS 영역의 시작을 나타내며, 영역에 대한 기본 정보와 관리 정보를 제공한다. SOA 레코드는 도메인의 네임서버, 관리자 이메일, 시리얼 번호, 갱신 주기 등을 포함한다.

 

 

레코드 생성을 클릭해준다.

먼저 A레코드를 생성할 것이다.

 

 

 

다른 것들은 건들이지 않고 값에 본인의 서버인 EC2의 퍼블릭 IP 를 넣어주면 된다.

그 후에 레코드 생성 버튼을 누른다.

 

 

 

 

해당 목록의 NS 유형을 보면 4개의 주소가 나와있다.
저 같은 경우는 가비아에서 도메인을 구매했으니 가비아 홈페이지에 들어가서 해당 도메인에 4개의 주소를 연결해준다. (AWS Route53 에서 도메인을 구입해 호스팅 영역을 등록한 경우는 이 과정을 안해줘도 된다.)

가비아 홈페이지에서 My 가비아 -> 본인이 구매한 도메인의 관리버튼 -> 네임서버 설정 버튼 -> 1차 ~ 4차까지 위의 4개의 주소를 순서대로 넣어주시면 된다. 이때 마지막 루트를 나타내는  .  은 지우고 해줘야 적힌다.

( net.    ,    com. 이 아니라 net  ,   com)

 

 

 

 

 

 

 

AWS Certificate Manager

AWS Certificate Manager 통해 SSL/TLS 인증서를 손쉽게 관리 배포 및 갱신할 수 있다.

AWS 서비스 중 하나인 AWS Certificate Manager를 클릭한다. 

 

 

 

 

 

 

 

 

따로 건들거는 없고 도메인 이름만 잘 적으면 된다. 정규화된 도메인의 이름을 적는데, 자신이 구매하거나 얻은 도메인 명을 적으면 된다. 추후에 도메인 앞에 다른 패스도 적어주기위해 필자는 그냥 도메인명을 적은 것이 아니라

*.도메인명

을 적어주었다.

앞에 *을 붙이므로서 CNAME 으로 만든 서브 도메인도 인증서 통과가 가능해진다.

 

 

 

필자는 지금 상태가 발급됨 으로 되어 있겠지만 처음 한 사람이면 검증 대기 중으로 나오는 것이 맞다.

 

인증서 ID 를 클릭하고 들어가서 또 레코드를 한 번 더 생성해줘야한다. (필자는 이 과정이 제대로 안 돼서 검증 대기중만 몇시간 째 보았다. 누구는 10분 누구는 수분 만에 된다고 하던데, 왜 그런지는 모르겠다. 레코드 생성도 계속 해서 됐다. 왜 한번에 안되는지 이해가 안 간다...)

 

 

 

 

그러면 도메인을 클릭해서 레코드를 생성할 수 있다. 필자는 이미 생성했기 때문에 검증 상태도 성공이고 레코드 생성 버튼도 비활성화 됐지만 새로 하는 사람은 검증 상태가 성공이 아니고 레코드 생성 버튼도 주황색으로 활성화 되어 있을 것이다.

 

레코드가 잘 생성 됐는지 확인해 보자.

 

다시 AWS Route53 서비스로 간다.

 

호스팅 영역에 자신의 도메인에서 레코드에 위의 파랑색 레코드 이름으로 주황색 CNAME 값이 잘 들어 갔는지 확인한다.

 

이 과정이 잘 됐다면 10분 내외로 인증서의 상태가 검증 대기 중에서 발급됨으로 바뀔 것이다.

 

 

 

 

 

이젠 필요한 준비물인 도메인과 SSL 인증서가 끝났다. HTTPS 요청을 받기 위한 다음 단계인 로드밸런서를 설정 해주면 된다.

다음 포스팅을 확인하면 된다.

 

https://programmer-may.tistory.com/177

EC2에 HTTPS 요청 보내기 2편 - 로드 밸런싱( 대상 그룹, 로드 밸런서)