웹 코드에서 주소를 사용할 때 double slash(//)를 많이 사용하시나요? 요즘은 대체로 double slash를 많이 사용하는 것 같습니다. 아무런 생각없이 사용하면서 정작 http:// , https:// 와 같이 프로토콜 명시된 경우와 단순하게 double slash로 구성된 주소의 차이에 대한 궁금증을 가지지 않았었네요.

참고로 Protocol-relative URL은 SSRF나 Open Redirect 등 여러가지 우회에 정말 잘 쓰이는 패턴입니다 😄

Protocol-relative URL

이렇게 // 로 시작하는 URL을 Protocol-relative URL라고 부릅니다. 하나 예시를 들어서 보도록 하죠.

HTTP/HTTPS Protocol

<h1>프로토콜 명시</h1>
<img src="https://www.hahwul.com/images/about.jpg">

Relative Path

<h1>프로토콜 명시</h1>
<img src="/images/photo.jpg">

Protocol-relative URL

<h1>Protocol-relative URL</h1>
<img src="//www.hahwul.com/images/about.jpg">

프로토콜이 명시된 경우, 상대경로, Protocol-relative URL 모두 이미지를 불러올 수 있습니다. 다만 차이가 있다면 Protocol-relative URL의 경우 현재 해당 요청이 발생하는 페이지, 즉 브라우저에 로드된 페이지의 Protocol을 따라가게 됩니다. 그래서 https:// 서비스에서 열었다면 https://로 연결하고, http://에서 열었다면 http://로 연결됩니다.

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

Why?

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

이런 경우 서비스 내 이미지 요청은 http로 전송되고 보안적인 관점에서는 전송되는 데이터들이 암호화되지 않기 때문에 세션이나 쿠키 정보가 노출되기도 하고, js나 html response를 변조하여 악의적인 액션이 동작하게 될 수도 있습니다.

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