如何在需要时通过 HTTPS 包含 CSS 和 JS 文件？

Question

我正在将外部 CSS 文件和外部 JS 文件添加到页眉和页脚中。 加载 HTTPS 页面时，某些浏览器抱怨我正在加载不安全的内容。

当页面本身是HTTPS时，有没有一种简单的方法可以让浏览器通过HTTPS加载外部内容？

Answer 1

使用协议相对路径。

因此不是

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

它将使用父页面的协议。

Answer 2

努特詹姆斯韦斯特盖特在评论后面的答案时是正确的。

如果我们看一下各种工业级外部 javascript 包含的内容，就会发现成功的使用了 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() 路径（如果有），否则您可能仍会收到“混合安全和不安全”警告..​​....

Answer 3

如果您使用相对路径（并且内容位于同一域中），则内容应使用请求页面的协议。

但是，如果您要跨域访问 CDN 或资源站点，或者需要使用绝对路径，那么您将需要使用服务器端脚本来更改链接，或者始终使用 https://

Answer 4

与转义响应（也可以工作）相矛盾的是，您可以跳过该部分并使用正确的方法将节点添加到您的 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>

但是协议相对路径将是正确的方法。