[Tistory] 티스토리 블로그 HTTPS 적용 차단된 콘텐츠 및 안전하지 않은 컨텐츠 차단 해결 방법

참고글

[Tistory] 티스토리 블로그 HTTPS 적용하기. HTTPS가 무엇이길래? 

티스토리 블로그 HTTPS 적용 차단된 콘텐츠 및 안전하지 않은 컨텐츠 차단 해결 방법

올해 티스토리에서 블로그에 HTTPS를 지원하게 되면서 저또한 블로그를 HTTPS로 설정을 변경하게 되었습니다. 그런데 다음과 같이 익스플로러에서는 차단된 콘텐츠 허용 이라면서 스크립트 또는 ActiveX 컨트롤를 실행하겠냐는 경고가 나타납니다.

또한 크롬에서는 주소표시줄의 우측 상단에 방패모양 아이콘에 x표시가 되면서 '안전하지 않은 콘텐츠가 차단됨' 이라고 나타나며 안전하지 않은 스크립트를 로드 할것이냐 묻습니다.

문제 원인

일단 큰 틀 안에서의 원인은 다음과 같습니다. HTTPS로 통신하는 도메인은 그안에서의 다른 통신들도 HTTPS로 통신이 이루어져야 합니다. 무슨 말이냐 하면 www.dololak.com 에 접속할때 https로 접근했다면 www.dololak.com에서 사용하는 여러 링크또한 https로 이루어져 있어야 한다는 것입니다.

예를 들어보겠습니다. 저의 경우에는 스킨이 조금은 옛날 무료스킨이라서 css 또한 옛날 방식인 http로 요청을 하고 있습니다. 전공지식이 없는 블로거분들을 위해 간단히 설명드리자면 css는 웹사이트를 예쁘게 꾸미기 위한 코드들이라고 생각하시면 됩니다. 

위의 화면은 제 Tistory 관리자 화면의 스킨편집에서 CSS 부분인데 URL이 http://로 되어있는것을 보실 수 있습니다. 스킨에 따라서는 CSS뿐만 아니라 스킨에서 기본적으로 사용하는 이미지 등에도 HTTP를 사용할 수 있습니다. 즉 크롬이나 익스플로러 입장에서는 "너의 블로그를 접속하는것까지는 HTTPS라서 좋았는데 접속 이후에 화면을 꾸미거나 애드센스 연동 등.. 을 위해 구글과 통신할때는 HTTP를 사용하고 있어. 그러니깐 넌 무늬만 HTTPS고 그 안에서의 여러 통신들은 안전한 컨텐츠가 아니야!" 라고 하는것입니다.

 

 

문제 해결 방법

문제의 원인을 알았으니 해결 방법은 간단합니다. 자신의 블로그 내부에서 사용하는 여러 URL들을 HTTPS로 변경하는 것입니다.

자신의 티스토리 관리자 페이지로 이동한 후 스킨편집 메뉴에서 HTML 탭으로 접근합니다. 이후 Ctrl + F 단축키를 통해 http를 검색 후 나타나는 부분에 대해 https로 변경하고 저장합니다. HTML과 마찬가지로 CSS 탭에서도 URL을 사용하는곳이 있다면 HTTPS로 변경해줍니다. (혹시 모르니 src 또는 href 으로 검색해보시기 바랍니다.)

그래도 해결이 되지 않을때는?

사실 웹에 대한 지식이 없는 블로거분들 께서는 HTTPS 적용에 한계가 있을 수 있습니다. 보여지는곳은 URL을 HTTPS로 변경했다고 하더라도 보이지 않는 HTTP 요청이 있을 수 있습니다. 원인이 워낙 다양하기 때문에 그때마다의 해결법이 다양하지만 대표적인 해결법을 알아보도록 하겠습니다. 

먼저 크롬 브라우저를 설치하고 블로그에 접속합니다. 이후 키보드에서 F12 버튼을 눌러 개발자 도구창을 실행합니다. 개발자 도구는 웹개발자들을 위한 도구인데, 이곳에서 어떤 부분이 적용되지 않은것인지 대략적으로 추적할 수 있습니다.

보통의 경우는 개발자도구가 흰색 화면이실텐데 저의 경우 개발자 도구를 자주 사용하기에 눈의 피로를 위해 설정을 바꾼것이니 신경쓰시지 않아도 됩니다.

여하튼 크롬이 알려주는 경고를 보기 위해 Console 탭에 접근하여 로그레벨에 모두 체크합니다.

이후 블로그 화면이 보이는 크롬의 주소표시줄의 경고 아이콘을 누르고 안전하지 않은 스크립트 로드를 클릭합니다.

그러면 아래와 같이 어떤 부분이 문제인지 로그가 출력됩니다.

여러가지 경고가 나타났는데 그 중 하나를 보자면 블로그에서 사용하는 폰트를 다운받으려는데 http를 사용한다고 하네요.

폰트는 보통 css와 관련되어 있습니다. 자신의 블로그 스킨편집 메뉴에서 CSS부분을 다시한번 확인합니다. 만약 그래도 해결이 되지 않으면 더욱 세밀한 작업이 필요합니다.

개발자도구의 Network 메뉴로 이동합니다. 이곳은 제 블로그에서 어떤 HTTP통신이 일어나는지 보여지는 곳입니다. 만약 목록에 아무것도 나타나지 않는다면 F5버튼으로 새로고침을 실행합니다.

새로고침을 수행하면 수많은 통신 기록들이 나타납니다. 목록을 하나하나 클릭하여 보다보니 위에서 봤던 경고와 관련된 CSS 파일이 발견되었습니다. kopubdotum.css 파일이네요. 이것을 클릭하면 오른쪽에 상세화면이 나타나는데 Response 탭을 클릭합니다. 자세히 보니 이 파일에서 HTTP요청을 하는것같습니다.

즉 문제원인은 다음과 같습니다. 블로그 접속 > 블로그 화면을 예쁘게 꾸미기 위해 블로그 스킨이 kopubdotum.css 파일을 사용 > kopubdotum.css 파일은 kopubdotum이라는 글꼴을 사용하기 위해 HTTP로 글꼴을 요청

아무래도 스킨 내부에서 사용하는 파일이므로 해당 CSS파일을 직접 수정할수는 없으니 제가 직접 수정해야 할 것 같습니다. 자신의 블로그에 문제가 된것으로 보이는 파일의 Response탭에 있던 내용을 모두 복사합니다.

@font-face {

  font-family: 'KoPub Dotum';

  font-style: normal;

  font-weight: 300;

  src: url(http://cdn.jsdelivr.net/font-kopub/1.0/KoPubDotum-Light.eot);

  src: url(http://cdn.jsdelivr.net/font-kopub/1.0/KoPubDotum-Light.eot?#iefix) format('embedded-opentype'),

       url(http://cdn.jsdelivr.net/font-kopub/1.0/KoPubDotum-Light.woff) format('woff'),

       url(http://cdn.jsdelivr.net/font-kopub/1.0/KoPubDotum-Light.ttf) format('truetype');

}

이후 스킨편집의 CSS 탭으로 이동합니다. 역시 블로그에서 해당 CSS 파일을 호출하는 부분이 있네요.

이제 해당 파일을 호출하지 않고 직접 작성한 CSS를 사용하도록 해줘야 합니다. 저와 같이 앞과 뒷부분에 /* */를 넣어줍니다. 이렇게 하면 해당 css파일은 호출하지 않고 무시하게 됩니다.

그러나 존에 사용하고 있던 css파일을 무시하게 되면 화면이 이상하게 바뀔 수 있습니다. 따라서 아까 복사했던 내용을 붙여넣기합니다. 이렇게 하면 css파일의 내용을 그대로 가져온것이기 때문에 결과적으로는 같게 됩니다. 이제 URL을 http로 된것을 https로 변경합니다.

설정을 적용하고 다시 테스트합니다. 이런식으로 개발자모드의 경고 로그와 HTTP 통신을 분석하여 어떤 부분이 적용되지 않았는지 파악하고 수정하면 완벽하게 블로그 HTTPS 설정을 해결할 수 있습니다.

나머지는 응용이지만 스킨에 따라 경우의 수가 다양하기 때문에 모두 포스팅하지는 못했습니다. 그러나 결국 원인은 블로그 내부적으로 아직 HTTPS가 아닌 HTTP를 사용하므로써 발생하는 오류라는 점은 동일합니다. 이후에는 포스팅 상단의 참고글 링크를 보고 따라해주시면 되겠습니다.