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

Posted 2023-02-25

【中文标题】如何在需要时通过 HTTPS 包含 CSS 和 JS 文件？

【英文标题】：How to Include CSS and JS files via HTTPS when needed?

【发布时间】：2011-02-13 02:36:15

【问题描述】：

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

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

【参考方案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>

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

【讨论】：

这是一个特定于浏览器的问题。除了使用相关视图技术的功能完全在服务器端执行此操作之外，没有其他方法可以稳健地解决此问题。

另外注意，如果您注意响应标头中的right caching entries，浏览器将不会在后续请求中下载它，直到到期，包括 IE。

我想说，只要有可用的资源，就总是使用https://。无论方案如何，它们都会在您的页面中正常加载

@Phil：如果目标环境不支持 HTTPS，通常是在 localhost 开发期间。

@BalusC "... 可用时..."

【参考方案2】：

nute 和 James Westgate 在评论后面的答案时是对的。

如果我们看一下各种工业级外部 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() 路径（如果有），否则您可能仍会收到“混合安全和不安全”警告..​​....

【讨论】：

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

【参考方案3】：

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

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

【讨论】：

我们正在跨域。会使用 javascript 编写包含工作吗？如果 document.location.protocol 则 ...

通过在 HEAD 标签中插入标记来尝试使用 js，也许是一个简单的 document.write 在脚本标签内。

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

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

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

【参考方案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>

但协议相对路径将是要走的路。