[HTTP/HTTPS] Mixed content blocking issue

 

 

혼합 콘텐츠(Mixed content)

쉽게 말해 HTTPS 도메인을 사용하는(SSL 인증서가 적용된) 사이트에서 HTTP 도메인을 사용하는(SSL 인증서가 적용되지 않은) 사이트의 자료(이미지, CSS 등)를 불러오는 경우를 말한다.

 

A라는 웹 어플리케이션에서 B라는 웹 서버에 있는 자원을 가져올 때 A에는 인증서가 붙어있는 상황이고 B에는 인증서가 안붙어있다고 가정하면 제목에서 언급한 Mixed content blocking이 발생한다. 이것은 최신 브라우저들에서 나타나는 현상이며 브라우저 마다 조금씩 다를 수 있다.

 

Chrome browser mixed content blocking console message

 

Chrome browser mixed content blocking image

 

보통은 이미지가 안뜨는 현상을 많이 발견할 수 있다. 비교적 최근에 업데이트 된 사항으로 업데이트가 되면서 기존에 문제 없이 이미지가 불러오던 사이트에서 이미지가 나오지 않는 현상이 발견되기 때문에 많이들 정리가 되어 있는 것 같다.

 

※ 반대의 경우 그러니깐 A에는 인증서가 없고 B에 인증서가 있는 경우에는 A에서 B의 자원을 가져오는것은 문제가 되지 않는다.

A서버(리소스 요청) 인증서 여부	B서버(리소스 제공) 인증서 여부	Mixed content 여부
있음(HTTPS)	있음(HTTPS)	X
있음(HTTPS)	없음(HTTP)	O
없음(HTTP)	있음(HTTPS)	X
없음(HTTP)	없음(HTTP)	X

 

 

개발자 입장 해결방법

이를 해결하기 위해서는 두 개의 서버에 모두 인증서를 붙여야 한다. 안그러면 이미지같은 경우에는 불러오지 못할 때 나오는 아이콘을 볼 수 있다. (아니면 둘다 인증서를 해제하던지..)

 

 

사용자 입장 해결방법

사용자인 경우에 사이트에서 mixed content blocking 처리되어 보고싶은 이미지를 못보는 경우지만 브라우저 설정을 통해서 볼 수 있다.

 

 

HTTPS를 사용하는 사이트(SSL 인증서가 적용된 사이트)의 URL 맨 앞에 자물쇠 아이콘을 클릭해서 사이트 설정 메뉴에 들어간다.

 

 

브라우저 설정 페이지에서 좌측 개인정보 및 보안 탭을 선택하고 우측 영역에서 아래로 스크롤하다보면 안전하지 않은 콘텐츠가 차단으로 되어있는 것을 허용으로 변경하면 된다.