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

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

사실 나는 별로 납득가지 않는데, 일반적으로 암호화 대상이 되는 데이터는 HTML에 거의 다 들어있고, 혹은 폼을 통해 전송하는 데이터에 들어있지 화면을 꾸미는 이미지, CSS, ... 등(이하 리소스 resource)에 들어있는게 아니기 때문이다. 따라서 경고를 안 내는게 맞는 것 같다.
PS> 2015년 4월, 다시 읽다보니 이 얘기는 잘못된 것이다. HTTPS 에서는 그 대상 리소스도 모두 HTTPS로 읽어야한다. HTT>S가 아니면 중간에 가로채서 내용을 수정할 가능성이 커지는데, HTTPS 웹페이지에서 HTTP로 요청된 CSS나 JS 파일을 변조하여 악성 코드를 심으면 데이터를 빼가는게 가능해지기 때문이다.

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

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

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

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

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

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

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


덧글

  • 밀리네스 2012/06/29 10:18 #

    이방식이 좋긴한데요, 발생할수 있는 문제점이라면...
    실 운영 사이트에서는 개발서버, 스테이징서버, 운영서버별로 도메인이 다 다를수 있다는점이죠..

    dev.DOMAIN.com, stg.DOMAIN.com, www.DOMAIN.com 이런식으로 엄밀하게 구분해서 운영하는 경우가 꽤나 있는것 때문에 매우 짜증납니다. -_-
  • 권남 2012/06/29 10:35 #

    저희팀도 마찬가지입니다.
    저희팀은 Maven의 Profile기능을 사용해서 각각의 상태(개발,스테이징,운영)에 따라 정적 리소스 도메인을 프라퍼티 파일에 넣고 자동으로 HTML생성시 넣어주게 개발해서 사용하고 있습니다.

    프로필을 통한 설정 분리는 꼭 해줘야하는 작업입니다.
  • 데미노스 2012/06/30 02:29 #

    이런게 있는줄은 전혀 몰랐군요 ㅎㅎ 80/443포트를 사용하지 않는 저희 서비스에는 적용할 수 없겠지만 그래도 좋은 방법 배워갑니다
  • 눈럽 2012/07/02 09:48 # 삭제

    오호....도메인도 저렇게 표현할수가 있었군요..
    뭔가 초기 구상을 잘해야 하지 안그럼 머리 터지겠어요..ㅎㅎ
  • 라이더 2012/08/02 19:20 # 삭제

    흐미.. 정말 감사합니다~

    좋은거 배웠네요 ㅎㅎ
※ 로그인 사용자만 덧글을 남길 수 있습니다.