페이지에 안전하지 않은 다른 리소스가 있다는 경고가 표시되는 경우

이 블로그에 SSL을 적용하고 모든 http를 https로 리디렉션하고 설정도 바꾸었지만 구글 크롬과 파이어폭스에 느낌표가 표시되고 아이콘을 눌러보면 "Mixed Content" - The site includes HTTP resources."라는 메시지가 표시되었습니다.

제 컴에서는 구글 크롬의 UI가 영어로 표시되네요. 아마 "혼합된 콘텐츠" - 이 사이트에는 HTTP 리소스가 포함되어 있습니다. 정도로 번역될 것 같습니다. (구글에서 어떻게 표시되는지는 정확히 모르겠습니다. 혹시 확인 가능한 분이 계시다면 아래에 댓글 부탁드립니다^^)

이 오류 메시지에 대해 "브라우저 보안 및 혼합 컨텐츠" 글을 참고하면 도움이 될 것 같습니다.

저는 이와 관련하여 경로가 http://로 시작되는 이미지 등을 https://로 수정해주니 문제가 해결되었습니다. (그래도 잘 안 되면 워드프레스에서 캐시 플러그인을 설치하는 경우 캐시를 삭제한 후에 테스트해보도록 합니다.)

잘 해결이 안 되면 Really Simple SSL 플러그인을 설치하여 문제 해결을 시도해보고, 자동으로 Mixed Content 오류가 해결되지 않으면 프로 버전(Really Simple SSL pro)을 사용하거나 여기에서 문제 해결을 의뢰(유료)하실 수 있습니다.

블로그에 SSL을 적용하려는 경우 유료로 SSL 인증서를 구입하거나 무료 SSL 인증서를 제공하는 블루호스트 등 해외호스팅을 이용할 수 있습니다.

※ 2018_0516 추가: 이 글을 발행한 후에 많은 변화가 있었습니다. https로 로드되는 사이트가 작년에 60%를 넘어섰다고 합니다. 이 블로그에는 Bluehost에서 제공하는 무료 SSL 인증서가 설치되어 있습니다. Bluehost, Siteground 등 해외 호스팅에서는 무료로 SSL 보안서버 인증서를 제공하지만 우리나라에서는 아직 유료로 구매해야 하는 경우가 많습니다. 사이트그라운드에서는 특히 와일드카드 SSL 인증서를 무료로 제공합니다.

• 무료 보안서버(SSL) 인증서를 적용했습니다

Bluehost에서 공유 호스팅을 이용하는 경우에는 cpanel에 접속한 다음 Security > SSL/TLS Manager에서 Private Key를 설정하고 CSR을 생성하여 인증서를 발급받아서 업로드할 수 있습니다. 그런 다음 라이브 채팅을 통해 인증서를 설치해줄 것을 요청하면 됩니다.

VPS나 전용 호스팅을 이용하는 경우에는 WHM에 접속하여 직접 설치할 수 있습니다. 설치 후에 5~15분 정도 있으면 적용되고 SSL Checker 사이트에서 SSL이 정상적으로 적용되었는지 확인할 수 있습니다.

SSL 적용 후에는 http로 시작되는 URL을 https로 시작되도록 리디렉션시켜 주어야 합니다. .htaccess를 통해서도 가능합니다만, 간단히 WP Force SSL라는 플러그인을 사용할 수 있습니다. (블루호스트 담당자가 이 플러그인을 추천하네요.)

저는 플러그인 대신 블루호스트에서 지원하는 기능을 사용하여 SSL 리디렉션 설정을 했습니다. Bluehost에서 WHM을 지원하는 경우 플랜을 사용하는 경우 WHM에서 강제로 https로 리디렉션하도록 설정할 수 있습니다.

• WHM에 로그인합니다.
• 왼쪽 패널에서 Tweak Settings을 검색하여 Tweak Settings가 표시되면 클릭합니다.
• Redirection 탭을 클릭합니다.
• Always redirect to SSL을 ON으로 설정합니다. 그러면 Enabled and SSL redirect destination이 Default 값으로 설정됩니다.

무슨 바람이 불었는지 갑자기 블로그에 SSL을 적용하게 되었습니다. 하지만 SSL을 적용한 후에 사이트 로딩 속도가 느려졌습니다. 이 경우 OCSP Stapling을 구성하면 속도가 빨라진다고 하네요. StartSSL의 경우 설치한 후 24시간이 지난 후에 OCSP Stapling을 활성화해야 한다고 어떤 글에 나와 있네요.

설날을 전후에서 시간이 될 때 OCSP Stapling을 적용해볼 생각입니다. 아래 두 링크에서 자세히 설명하고 있어서 적용하는 데 있어 그리 문제는 없을 것 같습니다.

• Apache - Enable OCSP Stapling(OCSP Stapling 활성화)
• Enable OCSP Stapling on Apache(Apache에서 OCSP Stapling 활성화)

참고로 몇 년 전에 카페24에서 무료 StartSSL 인증서를 발급받아 SSL을 적용하려다가 포기한 적이 있습니다. 카페24에서는 표준 포트인 443 포트를 지원하지 않습니다. 이와 관련하여 워드프레스 관련 카페(네이버)에 올라온 글이 하나 있었습니다. 북마크를 해 두었는데 찾아보려고 하니 찾을 수가 없네요. 결론은 개발자가 아니면 웹호스팅을 바꾸는 것이 정신 건강상 좋다는 것입니다. 블루호스트의 경우 별 어려움 없이 SSL 적용이 가능하네요. (유료 SSL을 사용하면 더 쉽게 적용이 가능할 것 같습니다. 유료 SSL을 사용하면 로딩 속도도 아마 크게 영향을 안 받을지도 모르겠습니다.)

업데이트: 블루호스트(VPS 기준)에서는 위의 링크와 나와 있는 방법으로는 안 되는 것 같고 대신 SSH에 root로 로그인하여 httpd.conf 파일을 수정해야 한다고 하네요. 블루호스트 담당자가 다음 링크를 제공하면서 참고하라고 하네요.

• http://httpd.apache.org/docs/trunk/mod/mod_ssl.html#sslusestapling

그리고 httpd.conf에 어떻게 접속하냐고 하니까 less /etc/httpd/conf/httpd.conf 명령어를 실행하라고 알려주네요. 무엇을 수정해야 할지 확신이 서지 않고 또 계속 블루호스트 직원에게 물어보는 것이 미안해서 그냥 SSH 인증서를 제거했습니다.

참고:

• 해외 웹호스팅 서비스 – 블루호스트(Bluehost) 소개