'2013/05/28'에 해당되는 글 1건

  1. 2013.05.28 외부 정적 리소스 Include 시 유용한 팁!

외부 정적 리소스 Include 시 유용한 팁!




만약 JQuery와 같이 외부에서 공개된 오픈 소스 라이브러리들을 사용하고자 할때 보통 우리는 아래와 같은 방법으로 해당 정적 리소스들을 Include 시킨다.



< script type="text/javascript" defer="defer" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">



하지만 만약 어플리케이션의 도메인이 HTTPS(보안 통신 프로토콜(SSL 적용))를 사용하는 경우라면, 위 코드와 같이 삽입할 경우 아래와 같은 문제가 발생한다.






- 아래 그림에서 보시다시피 크롬 개발자 도구네트웍 탭 상에 Include 시킨 리소스(jquery.min.js)가 없는 것을 확인할 수 있다.





- 또한, 콘솔 탭을 살펴보면 아래와 같은 오류(안전하지 않은 컨텐츠이기 때문에 가져올 수 없다?)를 확인할 수 있다.


위와 같은 문제를 간단히 해결하기 위한 방법으로 아래 코드와 같이 Include 블럭 속성 값(url)을 넣어준다


- 이와 같이 정의할 경우 해당 어플리케이션의 HTTP 프로토콜에 따라 속성 값의 Protocol이 자동 변환되기 때문이다.



즉, 어플리케이션 상의 프로토콜이 HTTP라면 "http"로 HTTPS라면 "https"로 자동 변환되는 것이다.(P.S: IE6 ~ IE10 or 표준 브라우저 호환)





< script type="text/javascript" defer="defer" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">





- 아래 그림은 위 코드 블럭을 적용한 결과이다.








만약 리소스들을 Include 하는 파일(html)이 로컬 웹 서버를 거치치 않는 방식(직접 파일 열기)일 경우 위와 같은 선언 방식(//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js) 으로는 해당 리소스들이 열리지 않는다.


즉, 간단한 테스트를 위해 생성한 html 파일을 위와 같은 방법으로 리소스들을 인클루드 시킬 경우 에러가 발생하니 사용 시 주의해야할 필요가 있다.



PS: 또한, 개발자 도구를 통해 살펴본 리소스들의 주소는 아래와 같다는 것을 알수 있다.

file://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js



- 출처: @insanehong님






참고사이트:


https://developers.google.com/speed/libraries/devguide


http://hoons.net/Blog/View/111726



prev 1 next