HTML png 엑박 - HTML png egbag

최근 들어 호스팅 서비스 문의가 많아진 것 중 하나가 웹 브라우저에서 이미지가 뜨지 않는다는 문의입니다. 웹을 통해 보는 모든 서비스가 해당되며 특히 이미지를 많이 사용하는 쇼핑몰 사이트, 광고나 뉴스레터 및 공고문을 많이 보내는 웹메일 서비스에서 많이 발생합니다. 안 뜨는 이유는 여러 가지가 있지만 결론을 바로 말씀드리자면 최근 브라우저를 제공하는 기관들이 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 적용하는 것을 권고합니다.

로컬호스트로 들어가면

이미제가 제대로 뜨는데
정말 이상하게 도메인 주소 쳐서 들어가면 엑박으로 뜨는것ㅠㅠ

그것도 어떤 이미지들은 제대로 뜨길래🤔
대체 이유가 뭘까 한참을 고민했는데..

이것저것 바꿔보던 중, 발견한 제대로 뜨는 이미지와 엑박나는 이미지의 차이점!!

이미지 파일 이름을 한글로 해둔 파일은 에러가 뜬다.
제대로 뜨는 파일은 영문으로 저장되어있는 것!!!!!

위의 코드처럼 첫번째 이미지는 우리찾기로고.png라고 저장되어있고, 두번째 잘뜨는 이미지는 mainpageimage라고 영문으로 저장되어있다.

그렇다면.. 모든 이미지 파일 이름을 영문으로 바꾸고 확인해보자.
과연(....두구두구)

된다!!! 제대로 뜬다😭
몇일째 이걸로 머리아팠는데 이렇게 단순한 이유였다니ㅠㅠ
오늘의 소확행은 바로 너야너😭😘