ISSUE
Mixed Content: The page at ... was loaded over HTTPS, but requested an insecure script 'http://..'
https 웹사이트에서 http request를 시도하면 위와 같은 에러 구문이 발생한다.
해당 에러는 https 환경에서만 발생하는 에러라서 dev 환경에서는 문제없이 잘 동작하지만, 배포 직후 에러가 발생해 당황스러울 수 있다.
위 에러는 git-pages로 정적 파일을 호스팅했을 때 발생한 에러이다.
dev 환경에서는 http에서 http를 호출하기 때문에 에러가 발생하지 않지만, git-pages로 배포를 하면 호스팅 주소가 자신의 git repogitory 주소가 되기 때문에 자동으로 https로 배포가 되므로 Mixed Content 에러가 발생하게 된다.
Mixed Content(혼합 콘텐츠)?
보안 HTTPS 연결로 로드된 HTML에서 다른 리소스(ex. 이미지, 비디오, 스타일시트, 스크립트)를 비보안 HTTP 연결을 통해 로드할 때 발생한다.
안전하지 않은 HTTP 프로토콜을 사용해 하위 리소스를 요청하면 HTTPS로 로드했더라도 전체 페이지의 보안이 약화된다. 따라서 크롬, 파이어폭스와 같은 브라우저는 혼합 콘텐츠를 차단한다.
패시브 혼합 콘텐츠
페이지의 나머지 부분과 상호 작용하지 않는 콘텐츠
메시지 가로채기 공격은 해당 콘텐츠를 가로채거나 변경할 경우 수행할 수 있는 작업으로 제한된다.
(ex. 이미지, 비디오, 오디오 등)
경고로 표시되며, https URL에서 콘텐츠가 발견되면 브라우저가 이를 자동으로 업그레이드한 다음 메시지를 표시한다.
액티브 혼합 콘텐츠
페이지 전체와 상호 작용하는 콘텐츠
공격자가 페이지에서 거의 모든 작업을 수행할 수 있다.
브라우저에서 다운로드하고 실행할 수 있는 콘텐츠(ex. script, stylesheet, iframe 등)
액티브 혼합 콘텐츠는 차단되며, 에러가 표시된다.
API request의 경우 액티브 혼합 콘텐츠에 해당하기 때문에 첫 번째 이미지와 같이 에러를 뿜어내고 있었던 것이었다.
해결방법
다음과 같이 <head>에 meta 태그를 추가하여, 네트워크 요청을 하기전에 http 콘텐츠를 https로 변환하여 로딩하도록 하는 방법이 있다.
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">이 방법은 리소스가 저장된 별도 서버에서 https가 지원되어야 한다.
만약 별도 리소스를 위한 서버에서 https가 지원이 되지 않는다면 근본적으로 보안상 서비스가 불가하다.
이를 해결하기 위해서는 다음과 같은 방법들을 적용해 볼 수 있다.
- https가 지원되는 다른 서버의 동일한 리소스를 활용하는 방법
- 법적으로 허용된 경우 사이트에서 콘텐츠를 직접 다운로드 후 호스팅하는 방법
- http 리소스를 제외하고 서비스를 구성하는 방법
Reference
Mixed content 문제 해결 방법
문제점 및 증상 잘 접속이 되던 웹 서비스가 https를 적용한 이후, 갑작스럽게 접속에 문제가 발생하기 시작하였습니다. 특정 리소스들이 모두 불러와지지 않고 화면이 깨지는 현상이 발생하였습
hbesthee.tistory.com
혼합 콘텐츠란 무엇입니까?
보안 HTTPS 연결을 통해 초기 HTML이 로드될 때 혼합 콘텐츠가 발생합니다. 그러나 다른 리소스는 안전하지 않은 HTTP 연결을 통해 로드됩니다.
web.dev
혼합 콘텐츠 수정
사용자를 보호하고 모든 콘텐츠가 로드되도록 하기 위해 웹사이트에서 혼합 콘텐츠 오류를 수정하는 방법을 알아봅니다.
web.dev
'FrontEnd > React.js' 카테고리의 다른 글
| [React.js] Warning: Expected server HTML to contain a matching <div> in <div>. (0) | 2022.07.16 |
|---|---|
| [React.js] Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers (0) | 2022.06.20 |
| [React.js] 성능 향상을 위한 코드 분할(React.lazy, Suspense) (0) | 2022.05.19 |
| [React.js] React 18의 새로운 기능 (0) | 2022.05.18 |
| [React.js] Yarn berry 적용하며 발생한 에러 정리 (2) | 2022.04.13 |
댓글