사건의 개요
토이 프로젝트(FE 서버, BE 서버) 진행 중에 문제가 발생했다.
프론트 서버 https 배포, 백엔드 서버 http 배포 후
프론트 -> 백엔드 요청 시 Midxed Content 차단됐다.
- 프론트(react) 배포 : AWS CloudFront + S3 사용한 HTTPS 지원
- 백엔드(spring) 배포 : AWS ec2 DNS 사용 X, HTTP 만 지원
사건의 근본 원인
웹브라우저(크롬, 파이퍼폭스 등) 자체에서 Mixed Content 차단하여 HTTP 서버인 백엔드로 부터 API를 받을 수 없었다.
Mixed Content(혼합 콘텐츠)란 보안되지 않은 HTTP 프로토콜을 사용하여 리소스 요청하는 경우 해커(공격자)가 네트워크 연결을 도청 하고 중간자 공격(man-in-the-middle)에 취약하므로 웹브라우저 자체에서 원천에 차단하는 기능을 추가하고 있다.
문제를 즉시 해결하기 위한 조치 항목
- 프론트 html에 특정 meta 태그 추가
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-> 해당 태그는 웹 브라우저에서 백엔드 서버 요청에 "http"를 자동으로 "https"로 변환하여 요청
=> 하지만 백엔드 서버가 https를 지원하지 못함
재발 방지를 위한 조치 항목
백엔드 서버에 인증서, 도메인을 추가하여 HTTPS 를 지원하도록 설정할 수 있다.
하지만 토이 프로젝트로 비용 문제가 발생(인증서, 도메인)했다.(무료 인증서도 있었지만 일단 pass)
결론적으로는 프론트 서버를 https -> http로 변경하였다.(cloudfront -> ec2 nginx)
하지만 HTTP 보안 문제가 있다.
백엔드 서버를 HTTPS를 사용해야한다.
현재 AWS ec2를 사용하고 있기 때문에 백엔드 서버 진입점을 HTTPS를 지원하는 Load Balancer를 두고 LB와 연결된 ec2는 http 통신을 해도 좋겠다는 생각을 했다.
해당 경험에서 얻은 교훈
HTTP의 보안 취약점이 있다.
클라이언트와 연결되는 진입점 백엔드 서버는 반드시 HTTPS를 사용하도록 하자.
⛓ Reference
How to fix "insecure content was loaded over HTTPS, but requested an insecure resource"
댓글