워드프레스를 이용하여 웹사이트를 제작/운영 하다보면 다양한 플러그인과 테마들을 활용하게 됩니다. 이 때 HTTP를 이용하여 일반 텍스트 (Plain Text) 기반으로 웹을 운영하다가 SSL 로 전환하게 될 때 여러가지 문제점을 발생 할 수 있는데, 그 중 빈번하게 발생 할 수 있는 문제가 HTTP와 HTTPs 가 혼합된 페이지가 되어 버리는 것입니다.
SSL 기반의 웹컨텐츠에서 중간에 암호화 되지 않은 HTTP기반의 컨텐츠가 발생 할 경우 브라우저는 HTTP 컨텐츠를 로딩하지 않습니다. 암호화 된 HTTPS 컨텐츠만 안전 하다고 판단하기 때문이겠죠.
아래는 HTTPs 기반의 웹사이트에서 HTTP컨텐츠가 혼용 (Mixed) 되어 있을때 브라우저가 HTTP컨텐츠를 차단하고 보여주는 경고메시지 입니다. 크롬의 경우는 방패 아이콘을 표시해주고, 파이어폭스의 경우는 i 아이콘을 통하여 경고메시지를 표시해 줍니다.
크롬에서의 SSL 경고
파이어폭스에서의 SSL 경고
브라우저에서 “안전하지 않은 스크립트 로드” 를 진행하게 되면 아래와 같이 “안전하지 않음” 상태로 표시되게 됩니다. 모든 컨텐츠가 SSL로 암호화 되지 않음으로써 브라우저에서 안전하게 암호화 되었다고 판단 할 수 없기 때문이겠죠.
SSL로 암호화 되었으나 안전하지 않은 사이트로 표시
크롬의 개발자도구 (자바스크립트 콘솔) 을 이용하여 아래와 같이 어떤 컨텐츠가 https 로 로딩되지 않고 문제를 발생시켰는지 알 수 있습니다. jroh.kr 의 경우는 http://fonts.googleapis.com/earlyaccess/nanumgothic.css?ver=4.8 라는 URL이 문제를 유발하였음을 확인 할 수 있습니다.
문제의 원인은 네이버의 ‘나눔 고딕’ 을 적용하기 위하여 설치한 iamgood (http://www.iamgood.co.kr/) 님의 “한글폰트 나눔고딕 – 구글” 임을 확인 할 수 있었습니다. 이 플러그인에서 font 로딩시 http로 로딩을 하여 HTTP와 HTTPs 컨텐츠가 mixed 된 것이 원인이었던 것이죠.
확인해보니 https://fonts.googleapis.com/earlyaccess/nanumgothic.css?ver=4.8 로도 관련 컨텐츠가 호출되는 것을 확인하였습니다. 간단히 관련 플러그인 소스에서 http로 호출하던 나눔고딕을 https 로 호출되도록 수정하면 될 것으로 보입니다.
public function queue_font_css(){
wp_enqueue_style('ex-hangulfont-'. $this->main->getEng(), 'https://fonts.googleapis.com/earlyaccess/'.strtolower($this->main->getEng()).'.css');
}수정 후, mixed 가 아닌 온전한 HTTPs 웹사이트로 브라우저에 확인되었습니다.
기타 자세한 내용은 https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content?hl=ko 를 참고해 보세요~
