관련글
HTTPS 사용시 혼합 콘텐츠(Mixed Content) 및 안전하지 않은 콘텐츠에 대한 설명
티스토리 블로그를 운영하면서 통신 방식을 HTTP에서 암호화된 HTTPS로 변경하게 되면서 알게된 사실들 중 혼합 콘텐츠(Mixed Content)에 대한 내용을 정리하고자 글을 작성합니다. 글의 원문은 구글 개발자문서에서 가져온 것이므로 글 하단의 참고글 링크를 참고해주세요.
혼합 콘텐츠란(Mixed Content)?
혼합 콘텐츠는 HTTPS를 통해 접속한 사이트에서 HTTP 통신을 통해 스크립트나 CSS, 이미지, 동영상 자원등을 요청하는 것을 말합니다. 즉 HTTPS로 요청한 자원과 HTTP로 요청한 자원이 섞여 있는 것을 의미합니다.
더 쉽게 풀어 설명하자면 사이트에 최초 접속은 HTTPS로 잘 하였으나, 그 이후 중간 중간 HTTP 통신을 하고 있는 것이죠. 따라서 해당 사이트는 반만 HTTPS인 것이고 중간 중간 삽입되어 있는 이미지나, 동영상, CSS 등은 HTTP 통신을 하므로 그로 인한 보안 구멍이 생기는 것입니다.
크롬 브라우저에는 혼합 콘텐츠의 위험성이 있는 사이트에 접속하면 다음와 같이 안전하지 않은 콘텐츠가 차단됨 이라는 아이콘이 나타나게 됩니다.
혼합 콘텐츠의 종류
혼합 콘텐츠는 두 가지로 분류되는데, 수동적 혼합 콘텐츠와, 능동적 혼합 콘텐츠로 분류됩니다.
수동적(Passive) 혼합 콘텐츠 - 이미지(사진, 그림 등)나 비디오 오디오같은 콘텐츠를 HTTP로 요청하는 것으로, 공격자가 중간에서 가로채어 파일을 수정하더라도 사이트 전체에 상호작용이 일어나는 콘텐츠가 아니므로 능동적 혼합 콘텐츠보다 영향이 덜 합니다. 그러나 광고 이미지나 비디오, 음란물로 변경될 수 있는 위험이 있습니다.
능동적(Active) 혼합 콘텐츠 - 브라우저가 실행하게 되는 스크립트, CSS, iframe, 플래시 등의 콘텐츠를 HTTP로 요청하는 것으로 공격자가 중간에 가로채어 코드를 수정하고 이를 실행하게 되면 사이트 전체에 영향이 가해지므로 수동적 혼합 콘텐츠 보다 영향이 큰 혼합 콘텐츠입니다. 스크립트 등을 악의적으로 변경하여 이상한 URL로 리다이렉트 되거나, 사용자 정보를 빼내는 스크립트로 대체될 수 있는 위협이 있습니다.
크롬에서 혼합 콘텐츠 분석하기
크롬의 개발자 모드(F12키로 접근)를 이용하면 혼합 콘텐츠를 분석할 수 있습니다. 즉 HTTP로 수신하는 자원들이죠. 크롬에서는 수동적 혼합 콘텐츠는 노란색으로 능동적 혼합 콘텐츠는 빨간색으로 보여줍니다.
다음은 구글에서 제공하는 혼합콘텐츠를 체험할 수 있는 샘플 사이트 URL입니다. 시간이 지나서 구글의 내부 사정에 의해 샘플 URL이 변경될 수 있습니다.
수동적 혼합 콘텐츠(Passive mixed content) 샘플
능동적 혼합 콘텐츠(Active mixed content) 샘플
1. 먼저 둘 중 하나의 샘플에 접근합니다. 보시면 알겠지만 URL 앞이 https://로 되어있는것을 눈치채셨을것입니다. 즉 HTTPS로 접속하는 것입니다. 저는 수동적 혼합 콘텐츠를 기준으로 설명합니다.
2. F12 키를 눌러 개발자 모드를 띄웁니다. 이후에 Console 메뉴로 이동해 크롬이 출력하는 콘솔 로그를 확인합니다. 노란색으로 Mixed Content라고 출력되어 있는것을 보니 혼합 콘텐츠가 있다는것을 알 수 있습니다.
만약 혼합 콘텐츠 로그가 출력되지 않는 경우 로그레벨을 모두 체크해주시기 바랍니다.
3. 경고 로그의 오른쪽에 혼합 콘텐츠가 요청된 위치가 출력 되는데, 이것을 클릭합니다.
자세히 보니 어떤 콘텐츠인지 콘텐츠의 파일 URL도 알려주는군요. 노란색 밑줄을 보시면 puppy.jpg가 HTTP로 요청된것을 알 수 있습니다.
4. 3번에서 클릭하면 자동으로 개발자 모드의 Sources 탭으로 이동하면서 해당 위치가 표시됩니다. 이미지 파일이 http:// 로 요청된것을 볼 수 있습니다.
이 밖에도 Elements 탭에서 HTML을 직접 확인하거나 Network 탭에서 HTTPS와 HTTP 통신 목록을 확인하는 방법이 있습니다.
Network 탭에 통신 목록이 없다면 F5를 통해 새로고침 해주세요.
puppy.jpg가 http://로 통신했었다는것을 Network 탭을 통해서도 알 수 있다는것을 아래 캡쳐에서 보여줍니다. 404 Not Found인것을 보니 구글 샘플 서버에 이미지 파일이 없었나보네요.
이 밖에도 여러가지 툴과 방법을 통해 혼합 콘텐츠를 확인할 수 있겠지만 이번 글에서는 간단하게 크롬을 통해 확인하는 방법을 알아보았습니다.
참고글 링크
'웹[Web]' 카테고리의 다른 글
| [Web] SPA(SinglePage Application) 에서 크롤링이나 SNS 링크 썸네일은 어떻게 대응되는지 간단 정리 (0) | 2019.04.26 |
|---|---|
| [HTTP] HTTP 헤더 중 Content-Type 헤더와 Accept 헤더의 용도와 차이점 (0) | 2019.03.28 |
| [HTTP] HTTPS란? 비전공자를 위한 HTTPS 개념 알아보기 (3) | 2018.09.12 |
| [HTTP] HTTP 쿠키란(Cookie)? 쿠키 등장 배경 그리고 쿠키와 세션의 차이점. (3) | 2018.09.11 |
| JSON이란? JSON 규칙 (0) | 2018.03.24 |
도로락
IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그