인터넷 사용자들의 보안을 위하여 크롬 브라우저에서 https 사이트에서의 "http URL 리소스"들을 크롬 85버전을 시작으로 점진적으로 차단됩니다.
■ 구글 발표
- 2019년 구글은 Chrome 브라우저의 안전한 웹 환경을 만들기 위해 혼합 콘텐츠(Mixed content)차단에 대해 발표
- 2020년 구글은 혼합 콘텐츠(Mixed content)차단과 연관된 추가 계획 발표
■ 크롬 브라우저 HTTP 다운로드 차단 정책
- 크롬 81 (2020년 3월)
+ 모든 혼합 콘텐츠 다운로드에 대한 콘솔 메시지 경고
- 크롬 84 (2020년 7월)
+ 혼합 콘텐츠 경고 항목 (개발자 도구 consol 출력)
· 실행 파일(.exe)
- 크롬 85 (2020년 8월)
+ 혼합 콘텐츠 차단 항목 (개발자 도구 consol 출력 및 실행 안됨 - block)
· 실행 파일(.exe)
+ 혼합 콘텐츠 경고 항목 (개발자 도구 consol 출력)
· 아카이브(.zip), 디스크 이미지(.iso)
- 크롬 86 (2020년 10월)
+ 혼합 콘텐츠 차단 항목 (개발자 도구 consol 출력 및 실행 안됨 - block)
· 실행파일(.exe), 아카이브(.zip), 디스크 이미지(.iso)
+ 혼합 콘텐츠 경고 항목 (개발자 도구 consol 출력)
· 이미지, 오디오, 비디오 및 텍스트 형식을 제외한 다른 모든 혼합 콘텐츠 다운로드에 대해 경고
- 크롬 87 (2020년 11월)
+ 혼합 콘텐츠 차단 항목 (개발자 도구 consol 출력 및 실행 안됨 - block)
· 이미지, 오디오, 동영상 및 텍스트 형식을 제외한 다른 모든 혼합 콘텐츠 다운로드에 대해 차단
+ 혼합 콘텐츠 경고 항목 (개발자 도구 consol 출력)
· 이미지, 오디오, 동영상 및 텍스트 의 혼합 콘텐츠 다운로드에 대해 경고
- 크롬 88 (2021년 1월)
+ 혼합 콘텐츠 차단 항목 (개발자 도구 consol 출력 및 실행 안됨 - block)
· 모든 혼합 콘텐츠 다운로드 차단
※ Android 및 iOS 사용자에 대한 출시를 한 번 지연시켜 Chrome 85에서 경고를 시작
■ 로드맵
■ 혼합 콘텐츠란 무엇인가요?
혼합 콘텐츠는 HTTPS를 통해 접속한 사이트에서 HTTP 통신을 통해 이미지, JS, CSS, 동영상 등을 요청하는 것을 말합니다.
즉 HTTPS로 요청한 자원과 HTTP로 요청한 자원이 섞여 있는 것을 의미합니다.
HTTPS를 통해 제공되는 웹 페이지에 방문하면 콘텐츠(이미지 등) 없음이나 페이지 렌더링 문제가 발생할 수 있는데 HTTP 리소스를 요청하기 때문입니다.
예를 들어, 브라우저 주소에 https://example.co.kr 입력했는데, 페이지에 <img src="http://example.co.kr/sample.gif"> 처럼 HTTP 형식의 이미지가 있는 경우입니다.
■ 혼합 콘텐츠인지 어떻게 아나요?
HTTPS를 통해 제공되는 웹 페이지에 접속한 후 브라우저의 개발자 모드(F12키로 접근) 실행하면 혼합 콘텐츠를 분석할 수 있습니다.
크롬에서는 수동적 혼합 콘텐츠는 노란색으로 능동적 혼합 콘텐츠는 빨강색으로 표기 됩니다.
- 수동적(Passive) 혼합 콘텐츠 : 이미지(사진, 그림 등)나 비디오 오디오 같은 콘텐츠를 HTTP로 요청하는 것
- 능동적(Active) 혼합 콘텐츠 : 스크립트(JS), CSS, iframe, 플래시 등의 콘텐츠를 HTTP로 요청하는 것
■ 혼합 콘텐츠의 차단 해제하는 방법은?
혼합 콘텐츠를 발견하면 다음 단계에 따라 문제를 해결할 수 있습니다.
1. 내부 콘텐츠를 링크하는 경우
1-1. 도메인 미지정
사이트 내부에 보유하고 있는 이미지 등 콘텐츠를 링크한다면 도메인을 지정하지 않고 아래 예와 같이 하세요.
AS-IS : <img src="http://example.co.kr/sample.gif">
TO-BE : <img src="/sample.gif"> (절대경로)
TO-BE : <img src="../sample.gif"> (상대경로)
1-2. 프로토콜 미지정
사이트 내부에 보유하고 있는 이미지 등 콘텐츠를 링크한다면 HTTP 또는 HTTPS 프로토콜을 지정하지 않고 아래 예와 같이 하세요.
AS-IS : <img src="http://example.co.kr/sample.gif">
TO-BE : <img src="//example.co.kr/sample.gif">
단, 보안서버(SSL) 포트가 기본 포트(443)일 때만 이 방법으로 해결할 수 있으며 특정 포트가 있다면 "도메인 미지정" 방식으로 처리해야 합니다.
X : <img src="//example.co.kr:12345/sample.gif">
O : <img src="/sample.gif">
2. 외부 콘텐츠를 링크하는 경우
2-1. HTTPS 프로토콜 지원여부 확인
사이트 외부에 있는 이미지 등 콘텐츠를 링크하기 위해서는 HTTPS 프로토콜을 지원하는 콘텐츠인지 먼저 확인해야 합니다.
예를 들어,
사용중인 이미지 주소가 <img src="http://example.co.kr/sample.gif"> 라면
브라우저에서 새 탭을 열고 주소 표시줄에 URL을 입력하고 http:// 를 https:// 로 변경하여 HTTPS를 통해 해당 URL을 사용할 수 있는지 확인합니다.
HTTPS를 통해 사용할 수 없는 콘텐츠라면 이용 중인 호스팅 사에 확인해야 합니다.
2-2. 외부 콘텐츠 링크 수정
HTTPS를 통해 사용할 수 있는 콘텐츠라면 아래와 같이 수정하면 됩니다.
(1) HTTPS 프로토콜로 지정
외부 콘텐츠를 링크한다면 아래 예와 같이 http:// 를 https:// 로 변경하세요.
AS-IS : <img src="http://example.co.kr/sample.gif">
TO-BE : <img src="https://example.co.kr/sample.gif">
(2) 프로토콜 미지정
외부 콘텐츠를 링크한다면 HTTP 또는 HTTPS 프로토콜을 지정하지 않고 아래 예와 같이 하세요.
AS-IS : <img src="http://example.co.kr/sample.gif">
TO-BE : <img src="//example.co.kr/sample.gif">
2-3. 혼합 이미지 콘텐츠 HTTPS 자동 로딩
크롬은 리스크를 최소화하기 위해 HTTPS로 로드하지 않을 경우 혼합 이미지 콘텐츠에 대해 http:// 를 https:// 로 자동 로딩 시킵니다.
근본적으로는 HTTPS 로 변경해야 하므로 앞서 안내한 방법을 참고하여 외부 콘텐츠 링크를 수정해야 합니다.
2-4. 고도 이미지 호스팅 이용 중인 경우
일반 이미지 호스팅을 사용하는 고객은 CDN으로 전환해야 HTTPS를 이용할 수 있습니다.
이미지 호스팅 G2는 이미 HTTPS를 제공하고 있습니다.
| 이미지 호스팅 상품 | CDN | HTTP | HTTPS |
|---|
| 일반 이미지 호스팅 | 미적용 | O | X |
| 일반 이미지 호스팅 | 적용 | O | O |
| 이미지 호스팅 G2 | - | O | O |
일반 이미지 호스팅에 대한 처리방법은 고도 공지사항 게시글을 참고하시기 바랍니다.
