Github pages에 웹페이지를 배포했는데 이런 에러가 발생하면서 로컬에서 잘 되던 API 요청이 되지 않았다.
Mixed Content: The page at 'https://~' was loaded over HTTPS, but requested an insecure resource 'http://~'. This request has been blocked; the content must be served over HTTPS.혼합 콘텐츠 (Mixed Content)
개념
웹페이지가 HTTPS를 통해 로드되었지만, 일부 리소스(이미지, 동영상, 스타일시트, 스크립트 등)를 HTTP를 통해 요청할 때 발생하는 문제를 혼합 콘텐츠(Mixed Content)라고 한다. 즉, 하나의 페이지에서 HTTPS와 HTTP가 섞여 있는 상태를 말한다.
보안에 미치는 영향
웹 페이지에서 HTTP 프로토콜을 사용하는 하위 리소스 요청은 보안이 취약해지며, 다음과 같은 위험이 있다.
중간자 공격(Man-in-the-Middle, MITM)
공격자가 네트워크를 가로채어 웹 페이지와 서버 간의 데이터를 엿보거나 변경할 수 있다.
사용자 추적 및 콘텐츠 변조
공격자가 사용자의 활동을 추적하고, 웹사이트의 콘텐츠를 마음대로 바꿀 수 있다.
웹 페이지 탈취
"활성 혼합 콘텐츠(Active Mixed Content)가 포함된 경우, 공격자가 웹 페이지 전체를 제어할 수도 있다.
대부분의 최신 웹 브라우저(Chrome, Firefox, Edge 등)는 보안 강화를 위해 기본적으로 혼합 콘텐츠를 차단한다. 따라서, HTTP로 된 리소스를 요청하면 브라우저가 이를 차단하고 페이지가 정상적으로 로드되지 않을 수 있다.
종류
혼합 콘텐츠는 passive와 active 2가지로 나누어진다.
수동 혼합 콘텐츠(Passive Mixed Content)
- 이미지, 동영상, 오디오 파일 등이 해당된다.
- 이러한 콘텐츠는 웹 페이지의 동작에 영향을 주지는 않지만, 공격자가 사용자를 추적하거나 콘텐츠를 변조할 위험이 있다.
- 브라우저에서는 오류(Warning)로 표시된다.
활성 혼합 콘텐츠(Active Mixed Content)
- 스크립트, 스타일시트, iframe 등 실행 가능한 코드를 포함하는 경우
- 공격자가 악성 코드 실행을 통해 웹 페이지를 완전히 제어할 수도 있으므로 매우 위험하다.
- 대부분의 브라우저는 활성 혼합 콘텐츠를 완전히 차단한다.
- 브라우저에서는 에러(Error)로 표시된다.
해결
HTTPS 사용
가장 좋은 해결 방법은 기존의 HTTP 리소스를 HTTPS로 변경해서 사용하는 것이다.
해당 코드는 Vanillia JS일 때 사용할 수 있는 방법인데, html의 안에 이 코드를 삽입하면 된다. 그러면 HTTP 요청을 자동으로 HTTPS로 변환해준다.
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">프록시 서버 사용
그러나 서버에서 HTTPS를 지원하지 않는 경우에는 위의 방법을 사용할 수 없다. (내가 이런 경우다.) Mixed Contents 오류 또는 에러는 사라지겠지만 결국 리소스를 받아오지 못해 해당 코드에서 에러가 발생한다.
이런 경우에는 CORS 프록시 서버를 사용하거나 백엔드 서버를 통해 데이터를 받아오는 방법이 있다.
https://cors-anywhere.herokuapp.com/http://{HTTP_URL}참고
