티스토리 블로그의 HTTPS 보안 연결 적용 방법. HTTPS 적용 전후 수정, 확인 사항

이 사이트는 보안 연결이 사용되지 않았습니다.

브라우저의 주소창에 눈길을 주는 분이 계실지 모르겠습니다만, 구글 크롬으로 제 블로그에 접속하면 늘 '주의 요함'이라는 경고 표시가 붙어 있었습니다.


제 블로그 뿐 아니라, 모든 티스토리 블로그들은 접속시 '주의 요함'이란 문구와 함께 아이콘이 표시되곤 했습니다.


이 경고 문구는 제 블로그, 혹은 다른 티스토리 블로그에 특별히 문제가 있어서 표시되는 경고 문구가 아니라, HTTP 방식의 사이트 접속시 구글 크롬이 기본적으로 띄우는 경고 문구입니다.

구글 크롬 보안 연결 경고


[주의 요함] 텍스트 옆의 아이콘을 클릭하면 보다 세부적인 경고 메시지를 확인할 수 있습니다.


역시 보안 연결(HTTPS)이 사용되지 않아, 이 사이트에서 비밀번호나 신용카드 번호 등을 입력하는 경우 공격자에 의해 도난당할 수 있다는 경고가 뜹니다.

크롬 HTTPS 경고

'비밀번호', '신용카드 번호' '공격자에 의해 도난' 당할 수 있다는 경고메시지가 꽤 무섭게 느껴지지만, 일단 'HTTPS'가 적용되지 않았기 때문에 그런 일이 일어날 수도 있다는 식의 메시지입니다.


안드로이드 스마트폰에서 외부 키보드앱을 설치 할 때도 비밀번호나 신용카드 번호 등의 정보가 전송될 수 있다는 경고 메시지가 뜨는 것과 마찬가지입니다.

2014/10/07 - 스마트폰 키보드 설정하는 방법. 설치 후 설정 과정이 필요한 안드로이드 자판


그리고 이런 경고 메시지는 스마트폰용 구글 크롬에서도 똑같이 확인할 수 있습니다.

모바일 크롬 보안 연결 미적용 경고


HTTPS 적용은 사이트의 보안 강화에 도움이 된다고 하여, 특히 구글 애널리틱스나 구글 애드센스의 권장 추천 항목으로 빠지지 않고 등장하는 내용입니다.

구글 애드센스 HTTPS 추천

HTTPS를 적용하면 사이트 보안이 강화되며, 구글 검색에서 순위가 높아진다는 얘기도 심심치 않게 보입니다.


다만 티스토리 블로그의 HTTPS 적용은 블로그 운영자가 할 수 있는 것이 아니고, 티스토리 측에서 제공해야 하는 수준의 작업입니다.


때문에 저와 같은 블로그 운영자들은 오랫동안 HTTPS를 적용하라는 권장 사항을 보기만 할 뿐, 직접 할 수 있는게 없었습니다.

구글 어낼리틱스 HTTPS 적용 권고

티스토리 블로그, HTTPS 적용!!

그런데 약 한 달전 부터, 티스토리 블로그에 HTTPS를 적용할 계획이라는 내용의 티스토리 공지사항이 떴습니다.


구글 웹마스터, 애드센스 등의 관리자 모드에서 HTTPS를 적용하라는 얘기를 자주 봐와서 그런지, 티스토리의 HTTPS 적용 소식이 무척 반가웠습니다.


그리고 약속했던 8월 말 티스토리에 HTTPS 적용 옵션이 생겼습니다.


티스토리 관리자모드에서 [관리]-[블로그] 항목에 들어가면 보안접속을 사용합니다/사용하지 않습니다 로 간단히 설정할 수 있도록 되어 있네요.


블로그에 변화가 생기는 만큼, HTTPS를 바로 적용하고 싶은 마음을 꾹 누르고 [미리보기] 버튼을 눌렀습니다.

티스토리 관리자 페이지 보안접속 설정


[미리보기] 버튼을 누르자, 제 블로그 주소로 HTTPS가 적용된 페이지가 떴습니다.

이 페이지를 통해 확인해보니 HTTPS가 적용되긴 했지만, '완벽하지 않습니다'라는 메시지가 떠 있었습니다.

티스토리 블로그 HTTPS 미리보기

이 경고 메시지는 HTTPS가 적용되기는 했지만, 블로그 스킨 등에 적용된 이미지 파일 등을 HTTP로 불러오는 경우 흔히 발생하게 됩니다.

HTTP로 불려진 이미지 찾는 방법

결국 제 블로그 스킨에도 HTTP로 불려지는 이미지가 있다는 얘기입니다.


어떤 이미지가 문제인지 확인하기 위해 구글 크롬의 개발자 도구를 이용했습니다.

구글 크롬으로 미리 보기 페이지가 열린 상태에서 [F12]키를 눌렀고, 상단의 느낌표 아이콘을 클릭했습니다.

구글 크롬 개발자 도구


그러자 구글 크롬 하단에 영문 경고 메시지가 떴습니다.

영문 경고 메시지의 뜻은 HTTPS 프로토콜로 블로그 페이지가 로딩되었지만, 암호화되지 않은 이미지가 요청되었다는 뜻입니다.

크롬 개발자 도구 HTTPS 경고

메시지가 길고 복잡해 보이지만, 중요한 것은 'insecure image' 뒤에 따라 나오는 http:// 로 시작하는 이미지 주소입니다.


저 이미지 주소를 복사하여 브라우저의 주소창에 넣어보면 어떤 이미지인지 확인할 수 있는데, 제 경우 사이드바에 직접 넣어두었던 티스토리 우수 블로그 엠블럼이었습니다.

티스토리 HTTP 이미지 URL 확인

저 엠블럼 이미지는 두 엠블럼 이미지를 하나로 편집해 티스토리에 직접 업로드해 둔 것입니다.

최근에는 파일을 업로드하면 HTTPS로 불려지는데, HTTP로 시작하는 것을 보니 꽤 오래전에 업로드한 것인 듯 싶습니다.


일단 해당 파일의 주소를 확인하기 위해 티스토리 관리자 페이지에서 [스킨편집]-[HTML 편집]-[파일업로드] 버튼을 눌렀습니다.

그리고 이미지 목록에서 해당 엠블럼 이미지를 찾아 마우스 오른쪽 버튼을 클릭해 [링크 주소 복사] 버튼을 눌러 주소를 확인해보니, 여기서는 HTTPS로 불려지는군요.

티스토리 파일업로드 이미지 URL 확인


저는 해당 엠블럼 이미지를 사이드바에 넣어두었기에, 사이드바 편집 모드로 들어와 HTTP://로 입력되어있던 엠블럼 이미지의 URL을 HTTPS://로 시작하는 현재 주소로 교체했습니다.

티스토리 사이드바 URL 수정


그리고 이미지가 아닌 URL 링크가 걸린 것이니 특별히 관계는 없어 보였지만, 사이드바에 함께 걸어 놓은 제 블로그 구독 링크 역시 모두 HTTPS로 교체했습니다.

티스토리 사이드바 링크 HTTPS 적용

제 블로그의 RSS 주소와 네이버 이웃 커넥트 주소는 HTTP://를 HTTPS://로 바꾸는 것만으로 간단하게 해결되었습니다.


이렇게 HTTP://로 불려오던 이미지 주소를 HTTPS://로 교체한 뒤, 다시 미리보기 페이지를 열어보니 이제는 녹색 자물쇠에 [보안 연결]이라고 깔끔하게 표시가 되었습니다.

티스토리 HTTPS 보안 연결 적용


이렇게 미리보기 페이지에서 [보안 연결]이 정상적으로 뜨는 것을 확인한 뒤 보안접속을 [사용합니다]로 바꾸고 [변경사항 저장] 버튼을 클릭했습니다.

티스토리 HTTPS 보안 연결 설정

다행스럽게도 제가 사용 중인 블로그 스킨은 단순히 이미지의 URL만 바꿔 주는 것으로 문제가 해결되었습니다.


하지만 일부 블로그 스킨은 스크립트로 이미지를 뿌리는 등 작업이 진행되면서, 제가 작업한 방식으로는 수정이 불가능하고 블로그 스킨 자체의 수정이 필요한 경우도 있습니다.


때문에 HTTPS로 바꾸기 전, 사용중인 스킨 제작자 페이지에서 HTTPS 적용과 관련된 수정 사항이 있는지 미리 확인하실 것을 권합니다.

티스토리 보안 연결 후 확인할 사항들

HTTPS 설정을 한 뒤에는 다양한 브라우저를 이용해 블로그의 다양한 페이지를 열어보고 녹색 자물쇠가 정상 표시되는지 확인할 필요가 있습니다.


저는 주로 사용하는 구글 크롬이외에 인터넷 익스플로러 등을 이용해 확인했으며, 블로그의 메인 페이지 뿐 아니라 몇 개의 글을 열어보고, 카테고리나 태그 등을 클릭하여 녹색 자물쇠가 그대로 남아있는지 확인해봤습니다.

티스토리 HTTPS 적용 확인


스마트폰에서도 구글 크롬과 Edge 등의 브라우저를 이용해 확인해봤습니다.

HTTPS://를 적용하기 전에 보이던 찜찜한 경고 메시지가 녹색 자물쇠와 함께 HTTPS://로 깔끔하게 표시되고 있습니다.

모바일 크롬 HTTPS 미적용/적용 화면 비교


그리고 네이버 웹마스터도구, 구글 웹마스터 도구 등에 접속해 확인해봤습니다.


네이버 웹마스터 도구에서는 별도의 작업 없이 https://로 이전된 것으로 인식한다는 메시지가 떴고, rss 주소만 https://로 시작하는 주소로 바꿔줬습니다.

2018/07/19 - 네이버에 티스토리 블로그 RSS 등록 방법. 네이버 웹마스터도구로 티스토리 상태 확인

네이버 웹마스터 도구 티스토리 HTTPS 인식


다만 구글 웹마스터 도구에서는 http://comterman.tistory.com과 https://comterman.tistory.com을 별개로 인식하는 듯 싶었고 때문에 https://comterman.tistory.com 주소를 추가로 입력해 주었습니다.

구글 웹마스터 도구 티스토리 HTTPS 인식

아울러 구글 애널리틱스 역시 [관리]-[속성 설정] 페이지에서 기본 URL의 http://를 https://로 바꿨습니다.


마지막으로 몇 개의 포스팅을 열어 혹시 정상적으로 표시되지 않는 페이지가 없는지 확인해 봤습니다.

다음지도 HTTPS 미적용

저는 포스팅에 첨부한 유튜브 동영상 등도 모두 정상적으로 열리는 등 별 문제는 없었지만, 다음지도를 첨부한 포스팅들은 '보안 연결이 완벽하지 않다'는 경고가 떴습니다.


앞서 확인했던 것과 같이 구글 크롬을 이용해 확인해 본 결과 다음 지도가 HTTP:// 방식으로 불려오기 때문에 발생한 문제였는데, 이는 제가 수정할 수 있는 것이 아니고 다음에서 해결해 줄 것으로 기대합니다.


아직 HTTP에서 HTTPS로 바꾼 결과를 모두 확인한 것은 아니고, 검색엔진 등에서는 어떤 변화가 있을지 좀 더 기다려봐야겠지만 어차피 장기적으로는 HTTPS로 바꾸는 것이 유리한터라, 비교적 빨리 바꿨고 그 절차 역시 생각보다 간단하게 끝났습니다.


무엇보다 이런 업데이트를 꾸준히 진행하는 티스토리가 새삼 고맙게 느껴집니다.


이 글을 공유하기

댓글 :: 질문 댓글은 공개글로 달아주세요. 특별한 이유없는 비밀 댓글에는 답변하지 않습니다

Designed by JB FACTORY