Mixed Content Error - https 사이트에서 http 요청

최근 수행한 프로젝트의 클라이언트를 netlify를 통해 배포하는 과정에서 아래와 같은 에러가 발생했습니다..

 

 

새로고침해보니..

 

 

저희 팀이 구현한 캐싱 코드에서 에러가 발생했습니다.

아무리 봐도 코드 상으로는 문제가 없는데..

그래서 개발자 도구의 로컬 스토리지를 확인하자..!

 

 

undefined..?

로컬 스토리지를 비우고 다시 사이트에 접속해보았습니다.

 

 

역시 똑같은 에러!

이번엔 새로고침하지 않고 읽어보자, https 사이트에서 http를 통해 리소스를 요청하여 일어난 문제임을 알았습니다!!

암호화된 https에서 암호화되지 않은 http에 요청을 보냈기에 Mixed Content 에러가 발생한 것이었습니다.

이는 안전하지 않은 리소스가 누군가로 인한 변경이나 도청 등에 취약하기 때문에 위험하기 때문입니다. 

 

그래서 http를 통해 서버 API를 호출에 실패하여 undefined가 반환되었고, 이것이 JSON.stringfy 메소드로 인해 문자열 'undefined'로 로컬 스토리지에 저장되었기에 JSON.parse 에러가 발생한 것이었습니다.

 

"그럼 요청을 https로 보내면 될려나..?" 하고 API를 요청하는 URI 환경변수를 http에서 https 형식으로 전부 수정하여 다시 build & deploy 해보았습니다.

그러자..!

 

 

ERR_SSL_PROTOCOL_ERROR!!

서버에서 SSL 프로토콜을 지원하지 않는 것이었습니다.

netlify, github pages 등을 통해 클라이언트 배포를 할 시 https를 사이트에 자동 적용해주기 때문에 서버에서 SSL 프로토콜을 통한 https를 지원해주어야 했습니다..

따라서 해당 문제를 해결하여 웹 애플리케이션을 정상적으로 배포하기 위해서는 SSL 인증서를 발급받고, DNS 등록 등을 클라우드 내부에 적용해야 한다고 결정을 했습니다.

(저희 팀의 판단이지, 정답이 아닙니다!!)

서버 측에서 잘 해결되어 무사히 배포할 수 있으면 좋겠네요 🥹 

 

 

 

.

.

.

 

 

해당 문제를 파악하고, 해결하기 위해 4시간 정도 소요한 것 같습니다 😂

불과 며칠전에 HTTP에 대해 학습했는데, 원치 않은 실습도 해보네요..

HTTP 프로토콜에 대한 이해가 얼마나 중요한지 몸소 느낄 수 있었습니다!

 

 

※ 참조

How to fix "insecure content was loaded over HTTPS, but requested an insecure resource"