브라우저 이미지 엑박 문제 - 혼합 콘텐츠(Mixed Content) 정책

Images Blocked by a Browser - Mixed Content Policy

최근 들어 호스팅 서비스 문의가 많아진 것 중 하나가 웹 브라우저에서 이미지가 뜨지 않는다는 문의입니다. 웹을 통해 보는 모든 서비스가 해당되며 특히 이미지를 많이 사용하는 쇼핑몰 사이트, 광고나 뉴스레터 및 공고문을 많이 보내는 웹메일 서비스에서 많이 발생합니다. 안 뜨는 이유는 여러 가지가 있지만 결론을 바로 말씀드리자면 최근 브라우저를 제공하는 기관들이 HTTPS와 HTTP 혼합 콘텐츠 사용 정책 변경으로 인해 기본적으로 보이지 않게 처리하여 발생하는 문제가 가장 많습니다.

 

혼합 콘텐츠[Mixed Content]란?

간단하게 말씀드리면 "HTTPS(443)://도메인 주소", SSL 보안 인증서가 적용된 사이트 본문에

HTML 태그 <img src="HTTP(80)://도메인/이미지 주소"> 같은 정보를 불러오는 경우를 말하며 이미지뿐만 아니라 HTTP:// 통해 불러오는 오디오, 비디오, 스트리밍, 첨부파일 등을 불러오는 모든 혼합 콘텐츠 포함합니다.

※ 구글 크롬(Chrome) 예시

□ 혼합 콘텐츠를 HTTPS/HTTP 사용했을 경우

 

□ 모든 콘텐츠가 HTTPS:// 사용할 경우

 

□ 혼합 콘텐츠를 HTTPS/HTTP 사용했을 경우 이미지 보는 방법

※ 개인 PC마다 설정해야 하며, 인터넷 사용 기록이 삭제되면 재 설정해야 할 수 있습니다.

①자물쇠 모양 클릭 ▷ ②사이트 설정 ▷ ③개인정보 및 보안 ▷ ④안전하지 않은 콘텐츠 [허용]으로 변경

※ 크롬 브라우저 설정 : chrome://settings/content/insecureContent

①오른쪽 상단[점 3개] ▷ ②설정 ▷ ③개인정보 및 보안 ▷ ④사이트 설정 ▷ ⑤맨 하단(추가 콘텐츠 설정 클릭) 펼치기

▷ ⑥안전하지 않은 콘텐츠

※ 접속한 웹 사이트가 혼합 콘텐츠를 사용하는 경우 일일이 등록해야 합니다. [전체 적용 불가능]

 

---

그럼 다른 브라우저는 어떻게 반응하는지 알아보도록 하겠습니다.

◎ 마이크로소프트 - 엣지(Edge)  ※크로미움(Chromium) 기반

※ 이미지의 경우는 아직 차단하지는 않고 PDF 문서나 미디어 자동 실행에 대한 콘텐츠 제한은 있습니다.

※ 설정 : edge://settings/content

 

◎ 네이버 - 웨일(Whale)  ※크로미움(Chromium) 기반

※ 네이버의 경우도 마찬가지로 아직은 바로 차단하지 않으며 별도 [안전하지 않은 콘텐츠] 컨트롤 제공

※ 설정 : whale://settings/content/insecureContent

 

◎ 모질라(Mozilla) - 파이어폭스(Firefox)  ※게코(Gecko) 기반

※ 이하 동문, 별도로 설정하는 부분은 보이지 않으며 자동으로 컨트롤하는 것으로 보입니다.

※ 설정 : about:preferences

 

◎ 애플 - 사파리(Safari)  ※웹킷(Webkit) 기반

※ 테스트 환경이 MAC OS 10.15 (Safari 13 버전)으로 최신 14 버전 한 단계 하위 버전으로 현재와 다를 수 있습니다.

※ 애플답게 맥 OS에서는 크로미움 기반보다 사파리가 더 빠른 퍼포먼스가 나오는 독립적 구조

※ 사파리의 경우는 이미지를 차단하지 않고 따로 경고 메시지도 발생하지 않습니다. 

※ 탭이 아닌 별도의 창구 조로 이루어져 있다 보니 상단 [Safari] ▷ [환경설정] ▷ [웹 사이트] ▷ [콘텐츠 차단기]

로 별도 컨트롤은 가능합니다.

 

그 외에 오페라(Opera), 브레이브(brave)도 있지만 우리나라에서는 너무 마이너 한 웹 브라우저로 제외하였습니다.

국내 스윙 브라우저(Swing Browser)는 서비스 종료로 제외, 마지막으로 오랫동안 함께해왔던 마이크로소프트 익스플로러(Internet Explorer 11)를 확인해보겠습니다.

 

◎ 마이크로소프트 - 익스플로러(Internet Explorer 11)

마이크로소프트에서 현재는 공식적으로는 보안 업데이트 지원 중단했다고 발표했습니다. 다만, 보안 업데이트만 안될 뿐이지 아직 우리나라에서는 대다수 공공기관이 아직 액티브(Aative X)를 사용하기 때문에 웹 브라우저 사용은 가능합니다. Windows 10 설치 시에도 기본적으로 내장 설치되어 있기 때문에 아직까지는 완전히 없애지는 못하는 것으로 보입니다.

 

마치며

이문제가 아닐 수도 있습니다만, 최근에는 크로미움(Chromium) 오픈소스 기반으로 웹 브라우저 개발하다 보니 구글 크롬(Chrome) 정책을 자연스럽게 따라갑니다. 점점 보안을 명목으로 따라갈 수밖에 없는 환경으로 만들어지는 게 조금 불안해지는군요. 사용자의 보안이 높아지는 건 당연히 좋겠지만, 클라이언트 사용자나 개발자들은 정책이 하나 변경하는 것만으로도 이렇게 많은 불편사항이 발생하게 됩니다. 다른 한쪽으로는 그 덕분에 인증서 업체들은 유입이 많아지겠군요. 하여튼 현재는 대부분 선택적 제한으로 보이지만 추 후 완전히 차단될 상황이 발생할 수 있으니 미리 인증서를 적용하여 HTTPS 적용하는 것을 권고합니다.