Hexo HTTPS 적용하기(Github Pages)

⏱ 2 분

지난 포스트에서는 HTTPS 를 왜 사용하는지, 어떤 원리로 동작하는지에 대해 알아봤습니다. 이번 포스팅에서는 Hexo 블로그에 HTTPS 를 적용해보겠습니다.

Hexo 블로그는 generate 한 후에 나오는 public 폴더만 있으면 어디든 호스팅할 수 있습니다. 그래서 여러가지 서비스와 연동해 사용할 수 있는데, 가장 많이 사용하는 것이 GitHub Pages 입니다. 저도 처음에 접근하기 쉽고 github.io 도메인이 좋아서 github pages 로 시작했습니다. 다른 포스트에서 차차 다른 호스팅 방식도 다뤄보려고 합니다(Netlify, Gitlab pages 등).

HTTPS

HTTPS에 대해서는 이전 포스트에서 자세히 살펴봤습니다. SSL 인증서와 암호화를 통해 클라이언트와 웹 서버 간 안전하게 통신할 수 있는 기술로 누출되면 위험한 정보를 다룰 때 사용합니다.

물론 Hexo 블로그에서는 대부분 중요한 개인정보, 비밀번호, 신용카드 번호 등을 전송할 필요는 없습니다. 하지만 HTTPS로 연결하면 사용자들에게 신뢰를 줄 수 있고 보안을 강화해놓으면 나쁠 건 없겠죠.

적용하기

먼저 Hexo 블로그 소스가 저장된 GitHub 페이지를 들어갑니다. 그 후에 상단의 탭에서 Settings 탭을 눌러 설정 메뉴로 들어갑니다.

Repository settings button

아래 쪽으로 내려오면 Enforce HTTPS 체크박스가 있습니다. 체크하면 바로 HTTP 적용된 것을 확인할 수 있습니다.

Enforce HTTPS checkbox

혼합 콘텐츠 Mixed-content

Hexo 블로그에 적용해본 결과 딱히 문제가 발생하지 않았습니다. 하지만 HTTPS 적용 시 혼합 콘텐츠로 문제가 나타날 수 있습니다.

혼합 콘텐츠는 HTTPS 컨텐츠 내에 HTTP 로 요청하는 하위 리소스가 있는 경우를 말합니다. HTTPS 로 안전한 페이지를 요청하지만, 그 페이지가 내부적으로 가지고 있는 리소스를 다시 로드할 때 HTTP 요청이므로 중간자 공격(man-in-the-middle attack)[1]에 취약하게 됩니다.

HTTP로 이미지, 비디오, 오디오 콘텐츠 등의 리소스를 요청하는 경우 이걸 가로채서 의도하지 않은 콘텐츠로 바꿔치기 할 수 있습니다. 예를 들어 버튼의 이미지를 바꾼다거나, 사진을 부적절한 콘텐츠로 바꾼다거나, 제품의 이미지를 다른 제품으로 대체할 수도 있습니다.[2] 이런 위험이 있는 경우 최신 브라우저에서는 경고로 표시합니다.

https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content

문제는 이런 리소스가 브라우저가 다운로드해서 실행할 수 있는 js, stylesheet, iframe 등의 리소스인 경우입니다. 공격자가 이런 리소스를 가로채는 경우 페이지 또는 웹 사이트 전체를 제어하거나 중요 정보를 훔치는 등 페이지에 대한 모든 것을 변경할 수 있습니다. 대부분의 최신 브라우저는 이런 위험한 요청을 차단합니다.

https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content

Hexo 의 경우 리소스를 전부 가지고 있기 때문에 외부에 따로 HTTP 요청을 하는 작업은 없는 것으로 보입니다. 만약 에러가 난다면 다음과 같이 Github 고객센터 페이지에서 안내하는 가이드를 따라 수정하시면 되겠습니다.

https://help.github.com/articles/securing-your-github-pages-site-with-https/

Custom domain

만약 커스텀 도메인을 사용하는데 HTTPS 적용 시 에러가 난다면, 이 가이드를 참고하세요.

이번 포스트에서는 Github pages 를 이용해서 Hexo 블로그를 배포할 경우 HTTPS 를 적용하는 방법에 대해 알아봤습니다.