필요한 경우 HTTPS를 통해 CSS 및 JS 파일을 포함하는 방법은 무엇입니까?


78

머리글과 바닥 글에 외부 CSS 파일과 외부 JS 파일을 추가하고 있습니다. HTTPS 페이지를로드 할 때 일부 브라우저는 보안되지 않은 콘텐츠를로드한다고 불평합니다.

페이지 자체가 HTTPS 일 때 브라우저가 HTTPS를 통해 외부 콘텐츠를로드하도록하는 쉬운 방법이 있습니까?

답변:


125

프로토콜 기준 경로를 사용하십시오.

따라서

<link rel="stylesheet" href="http://example.com/style.css">
<script src="http://example.com/script.js"></script>

하지만 그래서

<link rel="stylesheet" href="//example.com/style.css">
<script src="//example.com/script.js"></script>

그런 다음 상위 페이지의 프로토콜을 사용합니다.


4
그것은 브라우저 고유의 문제입니다. 문제의 뷰 기술의 기능을 사용하여 서버 측에서 전적으로이 작업을 수행하는 것보다 강력한 방법으로이를 해결하는 다른 방법은 없습니다.
BalusC

1
추가 로, 응답 헤더 의 올바른 캐싱 항목 에 주의를 기울 이면 브라우저는 IE를 포함하여 만료에 도달 할 때까지 후속 요청에서 해당 항목 을 다운로드하지 않습니다.
BalusC

https://가능한 경우 항상 리소스를 사용하십시오. 구성표에 관계없이 페이지에
Phil

@Phil : 대상 환경이 HTTPS를 지원하지 않는 경우에는 일반적으로 로컬 호스트에서 개발하는 동안에는 그렇지 않습니다.
BalusC

@BalusC "... 사용 가능한 경우 ..."
Phil

7

nute & James Westgate는 나중 답변에 대해 언급 할 때 옳습니다.

기타 산업 등급의 외부 자바 스크립트 포함을 살펴보면 성공적인 것은 document.location.protocol 스니핑과 스크립트 요소 삽입을 모두 사용하여 적절한 프로토콜을 사용합니다.

따라서 다음과 같이 사용할 수 있습니다.

<script type="text/javascript">
  var protocol = (
      ("https:" == document.location.protocol) 
      ? "https" 
      : "http"
  );
  document.write(
      unescape(
          "%3Cscript"
              + " src='"
                  + protocol 
                  + "://"
                  + "your.domain.tld"
                  + "/your/script.js"
              + "'"
              + " type='text/javascript'
          + "%3E"
          + "%3C/script%3E"
      ) // this HAS to be escaped, otherwise it would 
        // close the actual (not injected) <script> element
  );
</script>

외부 CSS 포함에 대해서도 동일하게 수행 할 수 있습니다.

그나저나 : CSS에서 상대 url () 경로 만 사용하도록주의하세요. 그렇지 않으면 여전히 "보안 및 비보안 혼합"경고가 표시 될 수 있습니다 ....


이것은 사용할 기술을 결정할 때 고려해야 할 사항입니다. 서버 측에서이 작업을 수행 할 수없고 호스트를 거쳐야하는 경우 다른 옵션이 없습니다.
Geoff

1

상대 경로를 사용하는 경우 (콘텐츠가 동일한 도메인에 있음) 콘텐츠는 페이지가 요청 된 프로토콜을 사용해야합니다.

그러나 도메인을 통해 CDN 또는 리소스 사이트로 이동하거나 절대 경로를 사용해야하는 경우에는 서버 측 스크립트를 사용하여 링크를 변경하거나 항상 https : //를 사용해야합니다.


우리는 도메인을 가로 질러 가고 있습니다. 포함 작업을 작성하기 위해 자바 스크립트를 사용 하시겠습니까? document.location.protocol이면 ...
Nathan H

HEAD 태그에 마크 업을 삽입하여 js를 사용하려고합니다. 스크립트 태그 안에 간단한 document.write .. <HEAD> <SCRIPT> document.write ( '<SCRIPT src ='+ document.location.protocol ...
James Westgate

1
이것은 Google Analytics 코드에서 취한 접근 방식이며 단순히 포함하는 페이지의 프로토콜로 document.write를 수행합니다.
Geoff

"서버 측 스크립트를 사용해야합니다"-이유가 무엇입니까? 캐싱? XSS 문제? 브라우저?
mlhDev

이것은 내가 질문에 대답했을 때 프로토콜 상대 경로를 의미하는 것처럼 보이지만 확신 할 수는 없습니다. IE8 이하에서는 확인해야하는 프로토콜 상대 경로에 캐싱 문제가 있음을 알고 있습니다. 성능에 관심이 있다면 스크립트를 사용하여 각 리소스를 작성하지 않고 모든 종류의 비동기 및 차단 문제를 트리거 할 수 있습니다.
James Westgate 2012 년

0

이스케이프 된 응답 (또한 작동 함)과는 반대로 해당 부분을 건너 뛰고 올바른 방법을 사용하여 dom 트리에 노드를 추가 할 수 있습니다.

<script type="text/javascript" language="javascript">
    var fileref=document.createElement('script');
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", document.location.protocol + '//www.mydomain.com/script.js');
    document.getElementsByTagName("head")[0].appendChild(fileref);
</script>

그러나 프로토콜 기준 경로가 갈 길입니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.