문제점 및 증상

잘 접속이 되던 웹 서비스가 https를 적용한 이후, 갑작스럽게 접속에 문제가 발생하기 시작하였습니다.

특정 리소스들이 모두 불러와지지 않고 화면이 깨지는 현상이 발생하였습니다.

원인분석

브라우저의 개발자 도구를 통하여 웹 서비스에 접속하여 보니, 다음과 같은 오류들이 콘솔창에 표시되었습니다.

"Mixed Content" 관련 내용을 확인하여 다음과 같은 해결 방법들을 찾았습니다.

사용자가 브라우저에서 임시 해결하기

최종 사용자 입장에서 웹 서비스에서 바로 수정이 어려운 경우, 브라우저에서 URL 주소 옆의 자물쇠 버튼을 눌러 "사이트설정"을 선택하고, 그 사이트 설정에서 "안전하지 않은 콘텐츠"가 기본적으로 "차단"으로 설정되어 있는 것을 "허용"으로 변경하면 http 컨텐츠를 불러올 수 있습니다.

웹 서비스 수정 방법

웹 서비스에서 소스에 적용하는 방법으로는 다음과 같은 META 태그를 헤더에 추가하여, http 콘텐츠를 자동으로 https로 변환하여 로딩하도록 하는 방법이 있습니다.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

위 META 태그를 적용한 경우에 있어서, 웹 서비스가 이루어지는 호스와 다른 서버에서 불러오는 리소스에 대해서는 주의해야할 점이 있습니다.
리소스가 저장된 별도 서버에서 https가 반드시 지원이 되어야만 문제가 없습니다. 만약 별도 리소스를 위한 서버에서 https가 지원이 되지 않는다면 근본적으로 보안상 서비스가 불가합니다.

이를 해결하기 위해서는 다음과 같은 방법들을 적용해 볼 수 있습니다.

https가 지원되는 다른 서버의 동일한 리소스를 활용하는 방법
필요한 리소스들을 직접 다운로드하여 웹 서비스와 동일한 호스트에서 직접 서비스 하는 방법
해당 리소스를 제외하고 서비스를 구성하는 방법

하지만, 꼭 필요하고 다른 곳에 적용할 수 없다면, 해당 리소스 서버에서 https가 지원되도록 SSL 인증서를 적용하여야만 합니다.
이 부분도 불가능하다면, https가 아닌 http로 서비스를 구성할 수 밖에 없습니다. (보안 취약 ㅠ.ㅠ)

참고자료

https://wellsw.tistory.com/34
https://stackoverflow.com/questions/35178135
https://web.dev/fixing-mixed-content/

저작자표시