티스토리, SSL 변경 후, Mixed Content 에러 대처

얼마전에 티스토리가 SSL을 모두 변경해주는 작업을 수행 했었습니다. 필자는 SSL로 변경하고 싶었었지만 기존에 제 블로그가 상당수 많이 다른 곳에 링크가 이미 되어 있는 상태였었고(논문 포함) SSL로 변환 하는 순간 그 링크들이 모두 무너지면서 득보다 실이 크겠다라는 생각에 미루고 있는 상태였었습니다.

네이버 웹마스터에 있는 제 블로그 링크 페이지, 이외에도 머신러닝 논문 등에 참조되어 있음

게다가 많은 분들이 SSL로 변경한 이후, 검색엔진에서 못잡는다던지 여러가지 귀찮은 작업들이 존재하고 있었기 때문에 포기한 상태였었습니다.

그런데 어느날 티스토리에서 강제로 SSL을 모두 변경하였고, 제가 고민하고 있던 문제는 리다이렉트(redirect)로 모두 해결을 해주었습니다. 그래서 http로 접속을 하던, https로 접속을 하던 이제 동일하게 제 블로그는 문제가 없이 접속이 됩니다(https로 리다이렉트 시켜주니까요)

그런데 한가지 문제점이 더 있었습니다. 바로 제가 사용하는 스킨이 http를 링크하는 것이 많았다는 것이죠. 아마 티스토리를 쓰는 분들중에 저랑 같은 스킨타입을 쓰는 분들은 모두 동일한 현상이 발생할 것입니다. 사이트는 https 즉 보안 접속을 하고 있는데 내부에 있는 스킨중에 http 링크가 달려 있는 Mixed(http와 https가 혼합)이 되었기 때문에 생기는 문제입니다.

이로 인해서, http로 불러오는 스킨 데이터는 모두 에러가 발생됩니다. 

크롬에서 F12를 눌러서 개발자 모드창을 보게 되면 위와 같이 Mixed Content 에러를 볼 수 있을 것입니다. 그리고 우측 창에 Content를 로드할 것인지를 묻게 되는 것이죠. 일단 막아놓고, 호출하는 것은 수동으로 할 수 있게 조치가 되는 것입니다.

그래서 일단 찾아봤습니다 어떠한 부분들이 문제가 있는지 일단 총 3가지를 발견 했는데요. 아래 리스트와 같습니다.

1. kopubdotum.css에 있는 http://cdn ~~ 부분들(폰트 데이터)

2. 스킨편집 css에 있는 http://fonts.googleapis.com ~~ 부분들 (역시 폰트 데이터)

3. 스킨편집 HTML에 있는 http://maxcdn.bootstrapcdn.com ~ 부분 (역시 폰트 데이터)

3가지 모두 폰트에 관련된 부분입니다. 폰트가 마음에 안들면 지워도 상관 없지만, 일단 조치하는 것도 어렵지 않으니 제가 작업한 부분들을 알려드리겠습니다.

조치 내역

관리기에서 스킨 편집을 들어갑니다.

"html 편집" 버튼을 클릭합니다

해당 화면을 보면 <link rel="stylesheet" href="http://maxcdn.bootstreapcdn.com ~~~~" 이라고 되어 있는 부분을 https로 변경합니다. 그리고 "적용"

CSS 탭으로가서 2번째 줄인, "http://fonts.googleapis.com ~~" 부분을 https로 변경하고 적용을 누릅니다

더이상 http를 찾지 못하였는데 아직 http 링크가 어딘가에 숨겨져 있습니다. 

이 부분은 html 편집에서 수정이 안됩니다.

관리자화면에 있는 스킨다운로드를 받습니다. 

압축을 푼 후, images 폴더에 간후, kopubdotum.css 파일을 엽니다

http로 된 부분들을 모두 https로 변경합니다

파일업로드에 들어가서 수정한 파일을 업로드 합니다.

마지막으로 반영이 잘 되었는지 궁금하시면 URL을 직접 열어서 확인하시면 됩니다.

URL로 보는건 업로드된 파일을 우클릭하여 새창으로 열기를 하시면 됩니다.

반영은 곧장되지 않고 일정 시간 이후에 반영이 되니 안된다고 계속 수정하지 말고 기달리시기 바랍니다. 참고로 저는 약 30분 정도 후에 반영이 되었습니다.