Protocol-relative URL - HTML/Javascript/CSS에서 주소 표시에 사용되는 double slash(//)는 무엇인가?

웹 코드에서 주소를 사용할 때 double slash(//)를 많이 사용하시나요? 요즘은 대체로 double slash를 많이 사용하는 것 같습니다.

아무생각 없이 사용하면서 정작 http:// . https:// 와 같이 프로토콜 명시된 경우와 단순하게 double slash로 구성된 주소의 차이에 대한 궁금증을 가지지 않았었네요.

방금전에 메일 문의온 것 보다보니.. 혼자 궁금해서 찾아봤고, 관련 내용 정리해둡니다.

(아 이 무지함을... 궁금해하지도 않았다니 =_=)

What is double slash?

우선 앞서 이야기드린 내용으론 HTML, JS, CSS 에서 웹 주소를 불러올 떄 사용됩니다. 프로토콜을 명시한 경우와 동일하죠.

간단하게 예시를 보도록 하겠습니다. 단순한 이미지 태그인데..

<h1>프로토콜 명시</h1>
<img src="http://lh6.googleusercontent.com/-2BmU-uwgPgk/AAAAAAAAAAI/AAAAAAAABFI/8UYOxJjA1JU/s512-c/photo.jpg">

<h1>Double slash</h1>
<img src="//lh6.googleusercontent.com/-2BmU-uwgPgk/AAAAAAAAAAI/AAAAAAAABFI/8UYOxJjA1JU/s512-c/photo.jpg">

웹 사이트에 해당 코드로 올려놓고 보면 둘 다 정상적으로 이미지가 로드됩니다. 그러나 파일을 하나 만들고 직접 브라우저에서 불러오면(파일 드래그 온 드뢉!) 아래와 같이 나타납니다.

헛 file:// ?!

잘 보면 위에 이미지는 정상적으로 불러와지고 아래는 file:// 프로토콜로 호출해서 불러와지지 않습니다.

이는 Double slash가 현재 사용하고 있는 프로토콜을 기준으로 전송하기에 발생한 상황입니다. 파일을 직접 끌어올렸기 떄문에 file///12443.html 이 현재 페이지이 url이 되고, double slash를 사용했을 때 현재 페이지의 프로토콜을 찾아가기 때문에 file:// 기준으로 검색을 하게 됩니다.

"요약하자면 현재 페이지의 프로토콜을 기준으로 웹 요청을 발생"

Why?

가장 큰 이유는 https 입니다. 현재는 많은 사이트들이 https를 사용하지만 불과 몇년 전만해도 그렇지 않았습니다. 일부 적용을 하는 과정에서 https 서비스에 하드코딩된 http 주소를 모두 변경하는건 어렵기 때문에 유지하게 됩니다.

이런 경우 서비스 내 이미지 요청은 http로 전송되고 보안적인 관점에서는 이미지를 통해 발생하는 요청이 암호화되지 않기 때문에 스니핑 환경에서 공격자가 쿠키, 세션값을 볼 수 있어 위험해집니다. 이외에도 개발적인 이슈들이 분명히 있었을거구요.

e.g 80 중단하고 싶은데, 이미지들로 인해 불가능함 등..
(아무리 cdn으로 이미지를 옮긴다 한들, 간혹... 사용하는 페이지가 있을 수 있죠)

아무튼 이러한 이유로 인해 double slash 사용이 시작된 것으로 생각됩니다.