[FastBoot 스킨] 티스토리 보안접속(ssl, https) 적용 후에도 계속되는 보안 경고(혼합 콘텐츠, Mixed Content)
[FastBoot 스킨] 티스토리 보안접속(ssl, https) 적용 후에도 계속되는 보안 경고(혼합 콘텐츠, Mixed Content)
티스토리 블로그에 보안 접속을 적용한 후에도 이 사이트의 보안 연결은 은 완벽하지 않습니다라는 보안 경고 아이콘과 메시지가 계속 나오고 있습니다. 아래 이미지는 modern browser라는 '크롬' '파이어폭스' '엣지' 주소줄에 나오는 보안 경고 아이콘입니다. IE11의 경우 별도의 조치는 하지 않고 있군요.
주소줄 보안 경고 아이콘
크 롬
크롬 개발자 도구 콘솔 에러 메시지
콘솔 이미지 첫줄 내용은 Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure image '<URL>'. This content should also be served over HTTPS.입니다. 문제가 Mixed Content(혼합 콘텐츠)인 모양인데 보안 문서에 보안되지 않은 문서를 포함하고 있다는 내용인 것 같습니다. 본 내용은 티스토리에서 보안 접속 안내에도 나오는 내용입니다.
Mixed Content(혼합 콘탠트)
아래의 내용은 모질라의 설명을 인용 발췌한 것입니다.
★ Mixed Content
유저가 HTTPS로 제공되는 웹페이지에 방문하였을때 유저와 웹서버의 연결은 TLS로 암호화되어지며 따라서 스니퍼와 중간공격자에게서 보호받을 수 있다.
HTTPS페이지가 몇몇 일반적인 HTTP를 포함한다면 연결은 단지 부분적으로 암호화된다: 비암호화된 컨텐츠는 스니퍼에서 접근가능하며 중간공격자에 의해 내용이 수정될 수 있다. 그러므로 연결은 더이상 안전하지 않다. 웹페이지가 이런 형태로 제공될때 그 페이지는 mixeed content 페이지라고 불린다.
※ Mixed Content의 종류
▶ Mixed passive/display content
Mixed Passive/Display Content는 HTTPS 웹페이지에 포함되는 HTTP로 제공되는 컨텐츠이다. 예를 들어 공격자는 HTTP로 제공되는 이미지를 변경하여 부적절한 이미지나 메세지로 사용자에게 보낼 수 있다.
Passive content list
<audio> (src attribute)
<img> (src attribute)
<video> (src attribute)
<object> subresources (when an <object> performs HTTP requests)
▶ Mixed active content
Mixed Active Content는 HTTPS 페이지의 DOM이 일부나 혹은 모든 부분에 접근할 수 있는 Content이다. mixed content 타입은 HTTPS페이지의 동작을 바꿀 수 있고 잠재적으로 사용자로부터 민감한 정보를 훔칠 수 있다. 위에서 이야기한 Mixed Display Content의 위험성뿐 아니라 Mxied Active Content는 몇몇 공격방법에 취약하다.
Mixed Active Content의 경우에는 중간공격자가 HTTP 컨텐츠에 대한 요청을 가로챌 수 있다. 공격자는 악의적인 자바스크립트 코드를 포함하여 응답을 변경할 수 있다. 악의적인 Active Content는 사용자의 신원 훔치기, 민감한 사용자 정보 획득, 또는 malware를 사용자의 시스템에 설치할 수 있다.
Active content list
<script> (src attribute)
<link> (href attribute) (this includes CSS stylesheets)
XMLHttpRequest object requests
<iframe> (src attributes)
All cases in CSS where a url value is used (@font-face, cursor, background-image, etc.)
<object> (data attribute)
★ 출처 : 모질라
위의 내용으로 보면
<HEAD>부분에서link등에서 보안화 되지 않은 사이트의 불러오는cssscript등이 될 수 있고- 본문에서 비보안 사이트에서 불러오는
이이지비디오 동영싱등을 들 수 있겠습니다. - Mixed passive content(수동 혼합 콘텐츠)는 warning 에러로 노란 색으로 표시되고
- Mixed active content(활성 혼합 콘텐츠)는 에러로 붉은 색으로 표시되는 것으로 보입니다.
크롬 등 개발자 도구에서 Mixed Content 탐색 및 제거
크롬 개발자 도구를 보면(타 개발자 도구 유사) 개발자 도구 메뉴에 콘솔 탭이 있습니다.
콘솔 탭에서 보면 위에서 언급한 Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure image '<URL>'. This content should also be served over HTTPS.라는 에러 메시지가 있습니다. 문구 좌측에 에러 갯수가 표시돼있고 클릭하면 에러 내용이 있습니다. 에러 메시지가 노란 색일 경우 경고(warning) 에러 메시지이고 붉은 색일 경우 에러 메시지입니다. 메시지가 Mixed Content일 경우 wrning 에러 혹은 에러 공히 보안 연결 적용은 안 되고 보안화 되지 않은 사이트로 간주됩니다.
메시지 중 Mixed Content(혼합 콘텐츠) 를 찾아 제거하고 다른 방안을 강구하면 되니 별로 복잡하지 않게 처리할 수 있을 걸로 사료됩니다.
본 블로그의 스킨은 FastBoot 스킨입니다. 본 내용은 저의 인덱스 페이지(메인 페이지)의 경우이며 포스팅한 글에 따라 비보안 연결로 될 수도 있을 수 있는데 스킨 내용만 정리하고 향후 포스팅을 보안 연결 규칙에 따라 작성할 예정입니다.
최신 글 목록(recent post, writing) 기본 이미지 저장소 변경
본 블로그의 인덱스 페이지에서 크롬 콘솔의 Mixed Content는 6개인데 사이드바의 최신글(recent post)에서 나왔습니다. 저의 경우 최신 글을 6개로 설정했고 Mixed Content는 모두 썸네일 이미지가 없을 때 나오는 기본 이미지입니다. 이미지 주소는 https://t1.daumcdn.net/cfile/tistory/2714794F5303740F17 로 http://시작하는 군요. 본 이미지의 이름을 바꾸고 스킨 image 폴더에 업로드하고 본 이미지 요소를 <img src="https://t1.daumcdn.net/cfile/tistory/2714794F5303740F17" alt="" class="dno">에서 <img src="./image/baseimage.jpg" alt="" class="dno">로 수정했습니다.
어썸 폰트 link cdn 변경
그리고 본 스킨 기본 어썸 폰트 link CDN http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css을 버전을 바꿔서 https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css로 수정하는 것을 권합나다. <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />에서 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />로 수정되겠지요.
보안 연결된 모양
스킨에서 위의 두요소를 수정하면 일단은 아래 그림과 같이 보안 연결으로 접속됩니다. 필요상 비보안(http) 매체를 로드한 페이지가 있다면 해당 페이지는 비보안 연결로 접속 되겠지요.
- 인덱스 페이지
- 포스팅 글 페이지
ps: 귀차니즘으로 카테고리 페이지 수정을 안 했는데 본 FastBoot 스킨 카테고리 요소 대신에 티스토리에서 제공한 방식으로 바꿀 예정입니다.
● 다른글 보기