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

IT技术 javascript html css https
2021-01-18 08:17:28

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

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

4个回答

使用协议相对路径。

因此不

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

然后它将使用父页面的协议。

我会说只是https://在可用时总是使用资源。无论方案如何,它们都会在您的页面中正常加载
2021-03-15 08:17:28
作为附加说明,如果您注意响应标头中正确缓存条目,浏览器将不会在后续请求中下载它,直到达到到期时间,包括 IE。
2021-03-21 08:17:28
这是浏览器特定的问题。除了完全在服务器端使用所讨论的视图技术的功能来解决这个问题之外,没有其他方法可以以稳健的方式解决这个问题。
2021-03-25 08:17:28
@Phil:如果目标环境不支持 HTTPS,则不会,通常在 localhost 开发期间。
2021-03-25 08:17:28
@BalusC “......可用时......”
2021-04-04 08:17:28

在评论后面的答案时,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() 路径,如果有的话,否则你可能仍然会收到“混合安全和不安全”警告..​​....

这只是您在决定使用哪种技术时必须考虑的事情。如果您无法在服务器端执行此操作,并且需要跨主机执行此操作,那么您别无选择。
2021-03-17 08:17:28

如果您使用相对路径(并且内容在同一个域中),那么内容应该使用请求页面的协议。

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

“您将需要使用服务器端脚本” - 为什么?缓存?XSS 问题?浏览器?
2021-03-20 08:17:28
这是 Google Analytics 代码采用的方法,它只是使用包含页面的协议执行 document.write。
2021-03-28 08:17:28
当我回答这个问题时,这似乎是指协议相对路径,但我不能确定。我知道 IE8 及以下的协议相对路径存在缓存问题,应该检查。如果您热衷于性能,我不会使用脚本写出每个资源,它会触发各种异步和阻塞问题。
2021-04-03 08:17:28
尝试通过在 HEAD 标签中插入标记来使用 js,可能是脚本标签内的一个简单的 document.write .. <HEAD><SCRIPT>document.write('<SCRIPT src=' + document.location.protocol ...
2021-04-06 08:17:28
我们正在跨域。会使用 javascript 编写包含工作吗?如果 document.location.protocol 那么...
2021-04-12 08:17:28

与转义响应(也可以工作)相反,您可以跳过该部分并使用正确的方法将节点添加到您的 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>

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