지난 포스트에서는 HTTPS 를 왜 사용하는지, 어떤 원리로 동작하는지에 대해 알아봤습니다. 이번 포스팅에서는 Hexo 블로그에 HTTPS 를 적용해보겠습니다.
Hexo 블로그는 generate 한 후에 나오는 public 폴더만 있으면 어디든 호스팅할 수 있습니다. 그래서 여러가지 서비스와 연동해 사용할 수 있는데, 가장 많이 사용하는 것이 GitHub Pages 입니다. 저도 처음에 접근하기 쉽고 github.io 도메인이 좋아서 github pages 로 시작했습니다. 다른 포스트에서 차차 다른 호스팅 방식도 다뤄보려고 합니다(Netlify, Gitlab pages 등).
HTTPS
HTTPS에 대해서는 이전 포스트에서 자세히 살펴봤습니다. SSL 인증서와 암호화를 통해 클라이언트와 웹 서버 간 안전하게 통신할 수 있는 기술로 누출되면 위험한 정보를 다룰 때 사용합니다.
물론 Hexo 블로그에서는 대부분 중요한 개인정보, 비밀번호, 신용카드 번호 등을 전송할 필요는 없습니다. 하지만 HTTPS로 연결하면 사용자들에게 신뢰를 줄 수 있고 보안을 강화해놓으면 나쁠 건 없겠죠.
적용하기
먼저 Hexo 블로그 소스가 저장된 GitHub 페이지를 들어갑니다. 그 후에 상단의 탭에서 Settings 탭을 눌러 설정 메뉴로 들어갑니다.
아래 쪽으로 내려오면 Enforce HTTPS 체크박스가 있습니다. 체크하면 바로 HTTP 적용된 것을 확인할 수 있습니다.
혼합 콘텐츠 Mixed-content
Hexo 블로그에 적용해본 결과 딱히 문제가 발생하지 않았습니다. 하지만 HTTPS 적용 시 혼합 콘텐츠로 문제가 나타날 수 있습니다.
혼합 콘텐츠는 HTTPS 컨텐츠 내에 HTTP 로 요청하는 하위 리소스가 있는 경우를 말합니다. HTTPS 로 안전한 페이지를 요청하지만, 그 페이지가 내부적으로 가지고 있는 리소스를 다시 로드할 때 HTTP 요청이므로 중간자 공격(man-in-the-middle attack)[1]에 취약하게 됩니다.
HTTP로 이미지, 비디오, 오디오 콘텐츠 등의 리소스를 요청하는 경우 이걸 가로채서 의도하지 않은 콘텐츠로 바꿔치기 할 수 있습니다. 예를 들어 버튼의 이미지를 바꾼다거나, 사진을 부적절한 콘텐츠로 바꾼다거나, 제품의 이미지를 다른 제품으로 대체할 수도 있습니다.[2] 이런 위험이 있는 경우 최신 브라우저에서는 경고로 표시합니다.
문제는 이런 리소스가 브라우저가 다운로드해서 실행할 수 있는 js, stylesheet, iframe 등의 리소스인 경우입니다. 공격자가 이런 리소스를 가로채는 경우 페이지 또는 웹 사이트 전체를 제어하거나 중요 정보를 훔치는 등 페이지에 대한 모든 것을 변경할 수 있습니다. 대부분의 최신 브라우저는 이런 위험한 요청을 차단합니다.
Hexo 의 경우 리소스를 전부 가지고 있기 때문에 외부에 따로 HTTP 요청을 하는 작업은 없는 것으로 보입니다. 만약 에러가 난다면 다음과 같이 Github 고객센터 페이지에서 안내하는 가이드를 따라 수정하시면 되겠습니다.
Custom domain
만약 커스텀 도메인을 사용하는데 HTTPS 적용 시 에러가 난다면, 이 가이드를 참고하세요.
이번 포스트에서는 Github pages 를 이용해서 Hexo 블로그를 배포할 경우 HTTPS 를 적용하는 방법에 대해 알아봤습니다.
