AI기반 전자기기 중고거래 플랫폼 프로젝트를 진행하면서, 프론트엔드에서 기기 이미지를 별도의 AI서버에 업로드하면, 해당 사진 판독 결과와 결과값을 받아오는 기능이 있었습니다.
로컬에서 해당 기능이 정상작동하는 걸 확인 후, https가 적용되있는 서버에 배포를 진행했습니다.
왜 갑자기 에러?
배포 후, Test를 진행했는데 갑자기 아래와 같은 에러가 뜨고 Api와의 연동이 되지 못했습니다.
Mixed Content: The page at 'https://{웹 url}' was loaded over HTTPS,
but requested an insecure XMLHttpRequest endpoint 'http://{ai 서버 url}:port/api'.
This request has been blocked; the content must be served over HTTPS.HTTPS 페이지에서 HTTP로 요청을 보냈기 때문에 요청이 차단되었던 것입니다.
왜 Block을 하는 걸까?
🔒 HTTPS는 암호화된 채널이지만, HTTP는 평문 전송이기 때문에
중간자 공격(MITM)이나 데이터 변조가 발생할 수 있습니다.
현대의 브라우저는 HTTPS 페이지에서 HTTP 리소스를 요청하는 경우에,
이를 보안 위협으로 간주하고 요청을 차단합니다.
결과적으로 HTTPS → HTTP 요청은 기본적으로 허용 ❌
해결방법
테스트만 하기 위한 임시 방편
바로, 프론트엔드에서 직접 HTTP 서버로 요청
-> Nginx 서버를 Proxy로 사용해서 내부적으로 Http 요청으로 변경하는 것입니다!
해당 로직이 왜 Https -> Http에서 발생하는 에러를 방지하냐면,
1. 프론트에서는 https://url/ai/api와 같이 HTTPS API로 요청
2. Nginx 설정에서 해당 요청을 내부적으로 http://{ai 서버 url}/api로 proxy_pass를 진행
이렇게 함으로써 브라우저는 HTTPS → HTTPS 요청만 진행하고,
Nginx가 내부적으로 HTTP 요청을 처리해 Mixed Content 오류가 발생하지 않도록 우회할 수 있었습니다.
다만, 결국에는 Https -> Http 요청으로, 데이터 보안이 보장 ❌
-> 테스트 or 로컬에서만 사용해야 합니다.
문제 해결하기 위한 해결책
실제 운영 환경에서는 AI 서버에도 Let's Encrypt 등의 무료 인증서를 적용하여 Https <-> Https 통신이 되도록 해야합니다.
느낀 점
이번에 인프라를 팀원들과 함께 구축하면서 개념으로만 알고 있던, Https와 Http의 차이를 제대로 파악할 수 있었고 보안을 위해서 무조건 Https를 적용해야 안정성을 제공할 수 있다는 걸 알 수 있었습니다.
