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

78

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

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

— 内森·H
source

124

使用协议相对路径。

因此不

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

那么它将使用父页面的协议。

— BalusC
source

4

那是特定于浏览器的问题。除了使用相关视图技术的功能完全在服务器端完成此功能之外，没有其他方法可以解决此问题。

— BalusC

1

另外要注意的是，如果您注意响应头中的正确缓存项，那么浏览器将不会在后续请求（包括IE）到期之前将其下载。

— BalusC

我想说的是，只要有https://资源就总是使用资源。他们将加载就好在你的页面，无论方案

— 菲尔

@Phil：如果目标环境不支持HTTPS，则通常在本地主机开发期间不这样做。

— BalusC

@BalusC “ ...……可用时……”

— Phil

7

当评论后面的答案时，nute和James Westgate是正确的。

如果我们看一下杂乱无章的工业级外部javascript包含，成功的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（）路径（如果有的话），否则您可能仍会收到“混合的安全和不安全”警告...。

— 阿兰·贝克
source

这只是在决定使用哪种技术时必须考虑的事情。如果您无法在服务器端执行此操作，并且需要遍历主机，则别无选择。

— Geoff 2010年

1

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

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

— 詹姆斯·韦斯特盖特
source

我们正在跨领域。会使用javascript编写include作品吗？如果document.location.protocol则...

— Nathan H，2010年

尝试通过将标记插入HEAD标记（也许是一个简单的document.write脚本标记内）来使用js。。<HEAD> <SCRIPT> document.write（'<SCRIPT src ='+ document.location.protocol ...

— James Westgate

1

这是Google Analytics（分析）代码采用的方法，它只是使用包含页面的协议来执行document.write。

— 杰夫

“您将需要使用服务器端脚本”-为什么？缓存？XSS有问题吗？浏览器？

— mlhDev 2012年

当我回答这个问题时，这似乎意味着协议相对路径，但我不能确定。我知道IE8及以下版本存在与协议相对路径有关的缓存问题，应检查该问题。如果您热衷于性能，我不会使用脚本来写出每个资源，它会触发各种异步和阻塞问题。

— 詹姆斯·韦斯特盖特

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>

但是相对于协议的路径将是必经之路。

— Gkempkens
source