HTTP와 HTTPS를 구분해서 이미지, CSS, Javascript 로딩하기

다른 브라우저에서는 별 문제 없는데 IE에서는 스키마가 https 로 된 홈페이지에서 http로 이미지나 CSS, Javascript등의 리소스를 로딩하면 경고가 발생한다. 그래서 현재 주소에 따라 리소스의 주소를 적을때 https인지 http인지 잘 구분해서 적어줘야 한다.

사실 나는 별로 납득가지 않는데, 일반적으로 암호화 대상이 되는 데이터는 HTML에 거의 다 들어있고, 혹은 폼을 통해 전송하는 데이터에 들어있지 화면을 꾸미는 이미지, CSS, ... 등(이하 리소스 resource)에 들어있는게 아니기 때문이다. 따라서 경고를 안 내는게 맞는 것 같다.

아무튼 이런 상황에서 HTTPS인 페이지와 HTTP인 페이지별로 따로 모든 리소스의 경로를 구분해서 줘야 할까?

당연히 그럴필요 없어서 글 쓴다. 우리가 <img src="/image/something.jpg" /> 이런 형태로 도메인에 상대적인 리소스 주소를 적는 것과 마찬가지로, 스키마(http/https)에 상대적인 주소를 적는것도 가능하기 때문이다.

<img src="//some.domain.com/image/something.jpg" />

이렇게 http: 혹은 https: 같은 스키마를 제외하고 //도메인주소/경로를 적는것이 스키마에 상대적인 주소이다.
이 주소는 현재 웹 페이지의 스키마가 자동으로 붙어서 요청이 날라가게 된다.

이것은 꼼수가 아니라 표준에 명시된 것이다. 모든 브라우저가 지원한다.

조건문으로 어떨때는 http: 어떨때는 https: 붙이는 고생은 그만하고 상대 스키마를 사용해보시길.

조건: 브라우저기반 작동시에만 사용할 것. HTML 이메일에 이 방식을 사용하면 보장 못함!