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

介绍

HTTPS 是一种安全协议，它通过加密所有传输的数据来保护网站和用户之间的通信。在前端开发中，我们经常需要包括外部的 CSS 和 JS 文件。在网站使用 HTTPS 的情况下，任何未加密的文件（如 HTTP 协议下加载的文件）都可以导致警告或错误信息，从而影响用户体验和 SEO。

本文将介绍如何在需要的时候通过 HTTPS 包括 CSS 和 JS 文件。

方案

1. 使用 HTTPS 协议

确保网站已启用 HTTPS 协议，这意味着所有的资源请求都会被自动重定向到 HTTPS 版本的资源。如果你还没有启用 HTTPS，请参考Let's Encrypt等证书颁发机构获取免费的 SSL/TLS 证书。

2. 相对路径

使用相对路径来引入资源。相对路径是相对于当前 HTML 页面的 URL 路径，因此无论是使用 HTTP 还是 HTTPS，文件始终可以正确加载。

<!-- 加载 CSS -->
<link rel="stylesheet" href="./style.css">

<!-- 加载 JS -->
<script src="./script.js"></script>

3. 协议相对路径

协议相对路径（protocol-relative URLs）是以双斜杠（//）开头的 URL，它们可以自动适应 HTTP 和 HTTPS 协议。当页面使用 HTTPS 时，资源也会自动切换为 HTTPS。

<!-- 加载 CSS -->
<link rel="stylesheet" href="//www.example.com/css/style.css">

<!-- 加载 JS -->
<script src="//www.example.com/js/script.js"></script>

4. 强制 HTTPS

如果你的网站不提供 HTTP 版本，并且希望所有请求都通过 HTTPS 加载，可以将资源的 URL 强制更改为 HTTPS 协议。

<!-- 加载 CSS -->
<link rel="stylesheet" href="https://www.example.com/css/style.css">

<!-- 加载 JS -->
<script src="https://www.example.com/js/script.js"></script>

总结

在前端开发中，确保引入的资源文件通过 HTTPS 加载非常重要。使用相对路径或协议相对路径是一种简单的方法来确保这点。如果你的网站只支持 HTTPS，请考虑强制加载 HTTPS 资源。

记住，始终关注用户体验和 SEO，让你的网站尽可能快地加载并保护你和你的用户的安全。

示例代码

以下是一个示例，演示如何使用协议相对路径加载 CSS 文件。

-- -------------------- ---- -------
--------- -----
----- ----------
------
    ----- ----------------
    ------------ -- --- ----------
    ----- ---------------- --------------------------------------------------------------------------
-------
------
    ---------- -----------
-------
-------

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12287