프로토콜에 상대적인 URL 지정하기

8월말부터 티스토리에 SSL이 적용된다고 하네요. 블로그 주소가 https://offbyone.tistory.com 으로 바뀔 경우 대비해야할 내용으로 외부리소스(javascript, image, css)의 주소가 http://로 시작하는 주소로 하드코딩되어 있는경우 변경이 필요하다는 내용이 공지 되어 있었습니다.

만약 외부 리소스가 http:// 로 시작하는 URL로 되어 있다면 어떻게 될까요? IE 라면 다음과 같은 오류가 뜨게 됩니다.

"보안컨텐츠만 표시합니다." 라는 메세지를 내고 http://로 시작하는 자원은 표시를 하지 않게 됩니다. "모든 컨텐츠 표시"를 클릭하면 그때 모든 자원을 표시하게 됩니다.

외부자원을 사용하는 것이 있을때 먼저 확인해야 할것은 이 외부자원이 https 를 지원하는지 확인해야 겠습니다. 이 상황에서 세 가지 경우의 수가 있을 수 있습니다.

1. 동일 URL로 제공하는 경우

http://code.jquery.com/jquery-3.2.1.min.js와 https://code.jquery.com/jquery-3.2.1.min.js 처럼 프로토콜만 바꿔주면 되는 경우입니다. 이런 자원에 사용할 수 있는 것이 프로토콜에 상대적인 URL 지정하는 방법입니다.

<javascript src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>

이처럼 "//" 로 시작하면 앞의 프로토콜은 요청 프로토콜로 자동으로 치환되어 호출되어 집니다.

2. http자원과 https 자원의 URL이 다른 경우

다음 지도로 약도를 만들 경우 http 와 https에서의 스크립트 주소가 다르게 제공됩니다. 이런 경우가 되겠습니다. 미리 https:// URL로 바꿔둬도 문제가 없을 것 같습니다. 요즘은 대부분의 외부 자원이 https 지원이 됩니다. 티스토리가 https 지원이 늦은 것이죠.

3. https 자원을 제공하지 않는 경우

이 경우가 문제가 되겠습니다. 오류 메세지를 보면서 그냥 쓰기는 좀 힘들것 같습니다. https 를 지원하는 다른 자원으로 대체가 가능한지 찾아보고, 아니면 대대적인 수선에 들어가야 할지도...

※ 참고

자바에서 현재 요청이 http인지 https 인지 확인하는 방법입니다.

boolean secure= request.isSecure();

https 이면 true를 반환하고, http이면 false 를 반환합니다.