blogger - HTTP/HTTPS 데이터 통신

 구글 블로그를 이용하면 무료로 SSL 보안 인증을 이용할 수 있습니다. 문제는 구글 블로그를 이용하다보면 간혹 인증서 오류가 뜰 데가 있습니다. 

예를 들어 https 인 홈페이지에서 보안을 사용하지 않는 홈페이지의 이미지나 css, js 같은 URL을 연결할 때 보안 오류로 엑박이 뜹니다. 증상은 http 에서 https 로는 정상 기능하지만 역으로 https 에서 http 를 불러올 수 없는 문제가 발생합니다. 

http 와 https 가 섞인 것을 혼합 콘텐츠(Mixed Content)라 부릅니다. SSL 에서 보호받던 사용자 세션이나 쿠키가 노출될 위험이 있고, 공격자가 (이미지) 파일을 변조하고 데이터를 훔쳐갈 수 있기 때문에 보호받지 못하는 html, js, css, 이미지 등 DOM 에 관련한 파일을 차단하게 됩니다.

하지만 때에 따라서는 이미지를 http 로 통신해야할 때가 생깁니다. https 인 서버에서는 http 를 강제로 https 로 변환해 버리므로 이럴 때 도메인 끝에 포트를 적어주거나 //같은 상대 주소를 기입해 상대가 http 임을 알려주는 것입니다. 우리가 흔히 사용하는 http 는 :80 포트이고 https 는 :443 포트를 사용합니다.

상대 경로는 <img src=’../../images/img.jpg‘/> 형식의 경로를 한번 쯤 보았을 것이라 생각됩니다. 상대 주소는 http:// 와 https:// 모두 허용한다는 의미이며 //로 해두면 페이지가 안전하게 제공하는 경우에만 이미지를 제공하겠다는 뜻이 됩니다.

이 경우 보안(HTTPS)이 완벽하지 않다는 경고 문구가 뜹니다.

<!--// 예제 #1 //-->
<img src="http://sub.habonyphp.com:80/images/logo.png" />
<link rel="stylesheet" href="http://sub.habonyphp.com:80/css/style.css" />

<!--// 예제 #2 //-->
<img src="//sub.habonyphp.com/images/logo.png" />
<link rel="stylesheet" href="//sub.habonyphp.com/css/style.css" />

파일 다운로드 링크일 경우엔 차단되는 경우가 많은데  이럴때는 다음과 같이 target=_blank 로 새창으로 띄우면 다운로드가 가능하게 됩니다.

<a href="http://example.com/file_download.zip" target="_blank">다운로드</a>