어제 블로그를 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 처럼 만들어서 사용해야겠네요.