HTTP, HTTPs (SSL) 로 혼합컨텐츠 (Mixed Content) 가 되었을 때 HTTPs 동작상태 확인

워드프레스로 웹사이트를 운영하다가 HTTP에서 SSL로 전환할 때 빈번하게 발생 할 수 있는 문제가 HTTP와 HTTPs가 혼합된 페이지가 되어버리는 것입니다. SSL 기반 웹컨텐츠에서 중간에 HTTP 컨텐츠가 발생하면 브라우저는 HTTP 컨텐츠를 로딩하지 않습니다.

크롬의 경우 방패 아이콘을, 파이어폭스의 경우 i 아이콘을 통해 경고메시지를 표시합니다. "안전하지 않은 스크립트 로드"를 진행하면 "안전하지 않음" 상태로 표시됩니다.

크롬의 개발자도구(자바스크립트 콘솔)를 이용하여 어떤 컨텐츠가 https로 로딩되지 않았는지 알 수 있습니다. jroh.kr의 경우는 http://fonts.googleapis.com/earlyaccess/nanumgothic.css?ver=4.8 URL이 문제를 일으켰습니다.

원인은 "한글폰트 나눔고딕" 플러그인이었으며, font 로딩시 http로 로딩하여 mixed된 것이었습니다. 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