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

Program / 글쓴이

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

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

답변

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

따라서

<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>

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

답변

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 () 경로 만 사용하도록주의하세요. 그렇지 않으면 여전히 “보안 및 비보안 혼합”경고가 표시 될 수 있습니다 ….

답변

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

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

답변

이스케이프 된 응답 (또한 작동 함)과는 반대로 해당 부분을 건너 뛰고 올바른 방법을 사용하여 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>

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

답변