HTTPS/HTTP Mixed Content (섞인 동적 콘텐츠 [File] 를 읽어오는 것을 차단했습니다.)
어제 블로그를 https로 변경 후 소소한 문제가 찾아왔습니다. 바로 js, css 등 리소스들의 주소가 https로 강제 치환되고 덕분에 https가 없는 곳에서 불러온 파일들은 로드되지 않아 일부 기능이 동작하지 않았었죠.
물론 크게 지장있는 부분은 아니라 천천히 수정하겠지만..어떤것이 문제였고 어떻게 해결해야할지 작성해봅니다.
Problem #
서론에서 이야기드렸듯이 https 강제 치환된 부분은이런 구문입니다.
<script src='http://vaha.hahwul.com/js/highlight.pack.js'/>
<link href='http://vaha.hahwul.com/js/styles/railscasts.css' rel='stylesheet'/>
실제로 로드되는 페이지를 보면 이렇게 변합니다.
<script src='//vaha.hahwul.com/js/highlight.pack.js'/>
<link href='//vaha.hahwul.com/js/styles/railscasts.css' rel='stylesheet'/>
// 은 Protocol-Relative URL로 현재 쓰고있는 프로토콜을 명시합니다. 현재 접속한 페이지는 https 이니 https://와 동일해집니다.
그래서.. Javascript로 head 태그 밑에 script, link 태그를 집어넣어 해결하려 했습니다.
var hhscript = document.createElement('script');
hhscript.id = 'highlight.js';
hhscript.src = 'http://vaha.hahwul.com/js/highlight.pack.js';
document.head.appendChild(hhscript);
var hhcss = document.createElement('link');
hhcss.id = 'highlight.css';
hhcss.src = 'http://vaha.hahwul.com/js/styles/railscasts.css';
hhcss.rel = 'stylesheet';
document.head.appendChild(hhcss);
물론 결과는 실패지만, 방법 자체는 맞았습니다. http://로 요청하게 되었는데, 브라우저단에서 에러가 발생합니다.
섞인 동적 콘텐츠 "http://vaha.hahwul.com/js/highlight.pack.js"를 읽어오는 것을 차단했습니다.[더 알아보기]
bypass-xss-protection-event-handler.html:20:4
“http://vaha.hahwul.com/js/highlight.pack.js” 소스의 <script> 로딩을 실패하였습니다.
bypass-xss-protection-event-handler.html:1
“https://vaha.hahwul.com/js/highlight.pack.js” 소스의 <script> 로딩을 실패하였습니다.
더 알아보기로 확인해보니.. Mixed Content 문제라고 합니다. https://developer.mozilla.org/ko/docs/Security/MixedContent
Mixed Content #
https 웹 페이지에 포함된 http 콘텐츠들을 Mixed Content라고 부릅니다. 이런 콘텐츠들은 보안을 위해 사용한 https에 큰 허점이 됩니다. 예를들면.. 일부 http 페이지를 통해서 SSL로 보호받던 사용자 쿠키나 세션 데이터가 노출될 수도 있고, 중요한 페이지가 http로 통신하는 경우 스니핑 환경에서 공격자가 데이터를 가져가거나, 변조하고, 또 다른 취약점에도 사용할 수 있게 됩니다. 그래서 https 도메인에 http 파일들이 있으면 차단하게 됩니다.
물론 모든것을 차단하는건 아닙니다. Mixed Active Content라고 불리는 것들, 즉 HTML, Javascript와 관련된 파일들만 차단합니다. 왜냐하면.. 때에 따라 이미지나 영상은 http 통신을 사용해야하기 떄문이죠. (느려서라곤 하나, 개인적인 견해로는 느린거 잘 모르겠습니다.)
#Mixed Passive/Display Content 이미지, 영상 등 사용자에게 스크립트, DOM 단에서 직접적으로 영향을 끼치지 않는 부분들입니다.
<audio> src
<img> src
<video> src
<object> subresources
#Mixed Active Content HTML, Javascript 등 DOM 구간에서 동작할 수 있는 컨텐츠이고 보안적으로도 문제삼는 부분이죠.
<script> src
<link> href
XMLHttpRequest: object requests
<iframe> src
CSS: @font-face, cursor, background-image 등 모두..
<object> data
Conclusion #
결국은 Mixed Content를 방지하기 위해서 자동적으로 http를 https로 치환하는 작업을 Blogger 측에서 하고있는건데, 다른 도메인의 css니 js 등을 떙겨올 때 강제로 https로 변환됩니다. 서버에 올라가있는 파일들을 git쪽 cdn 서비스들을 쓰거나 google drive로 cdn 처럼 만들어서 사용해야겠네요.