web-dev-qa-db-ja.com

必要なときにHTTPS経由でCSSおよびJSファイルを含める方法

外部CSSファイルと外部JSファイルをヘッダーとフッターに追加しています。 HTTPSページをロードするとき、一部のブラウザーは、保護されていないコンテンツをロードしていると文句を言います。

ページ自体がHTTPSであるときに、ブラウザーにHTTPSを介して外部コンテンツをロードさせる簡単な方法はありますか？

javascripthtmlcsshttps
77
Nathan H

プロトコル相対パスを使用します。

したがってない

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

次に、親ページのプロトコルを使用します。

122
BalusC

nuteとJames Westgateは、後の答えについてコメントするときに正しいです。

さまざまな業界グレードの外部javascriptインクルードを見ると、成功したものはdocument.location.protocolスニッフィングとスクリプト要素インジェクションtuの両方を使用し、適切なプロトコルを使用しています。

したがって、次のようなものを使用できます。

<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（）パスのみを使用するように注意してください。そうしないと、「安全と非安全の混合」警告が表示される可能性があります。

7
Alain BECKER

エスケープされた応答（これも機能します）に反して、その部分をスキップし、正しい方法を使用してノードを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>

しかし、プロトコル相対パスが道です。

0
gkempkens

相対パスを使用する場合（およびコンテンツが同じドメインにある場合）、コンテンツはページが要求されたプロトコルを使用する必要があります。

ただし、ドメインを越えてCDNまたはリソースサイトに移動する場合、または絶対パスを使用する必要がある場合は、サーバー側スクリプトを使用してリンクを変更するか、常にhttps：//を使用する必要があります。

0
James Westgate