JavaScript内核与高级编程之：`JavaScript`的`HSTS`：其在强制使用 `HTTPS` 中的作用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，晚上好！今天咱们来聊点刺激的，不是让你血压飙升的bug，而是能让你的网站更安全、更靠谱的HSTS！

HSTS：HTTPS 的忠实守护者

想象一下，你的网站披着 HTTPS 的安全外衣，但总有刁民想通过 HTTP 访问它，窃取你的用户数据，或者在中间搞点事情。HSTS，也就是 HTTP Strict Transport Security，就像一个严厉的保安，直接告诉浏览器：“以后谁敢用 HTTP 访问我，直接拉黑！必须给我用 HTTPS！”

HSTS 的工作原理：一句话概括

浏览器收到服务器发来的 HSTS 策略后，会在一段时间内记住这个策略。在这段时间内，无论用户输入的是 http://yourdomain.com，还是点击了 HTTP 链接，浏览器都会自动将其升级为 https://yourdomain.com。

HSTS 的优势：不仅仅是安全

防止 SSL Stripping 攻击： 中间人无法通过 HTTP 拦截用户的请求，再用 HTTPS 与服务器通信，从而窃取数据。
提升性能： 浏览器直接使用 HTTPS，减少了 HTTP 重定向带来的延迟。
提高用户体验： 用户无需手动输入 https://，浏览器自动跳转，更加方便。

如何配置 HSTS：手把手教学

配置 HSTS 主要通过设置 HTTP 响应头来实现。咱们以最常见的 Nginx 和 Apache 为例，分别讲解：

1. Nginx 配置：

在 Nginx 的 server 块中，找到监听 443 端口的配置，添加如下代码：

server {
    listen 443 ssl;
    server_name yourdomain.com;

    # HSTS 配置
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";

    # 其他配置...
}

参数解释：

max-age=31536000;：设置 HSTS 策略的有效期，单位是秒。31536000 秒等于一年。
includeSubDomains;：表示该 HSTS 策略也适用于所有子域名，例如 www.yourdomain.com、blog.yourdomain.com 等。
preload;：表示将你的域名加入 HSTS 预加载列表，让浏览器在第一次访问你的网站时就启用 HSTS。这个选项需要谨慎使用，后面会详细讲解。

完整示例：

server {
    listen 443 ssl;
    server_name yourdomain.com;

    ssl_certificate /path/to/your/certificate.pem;
    ssl_certificate_key /path/to/your/private.key;

    # HSTS 配置
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";

    location / {
        root /var/www/yourdomain.com;
        index index.html index.htm;
    }
}

2. Apache 配置：

在 Apache 的 VirtualHost 配置中，找到监听 443 端口的配置，添加如下代码：

<VirtualHost *:443>
    ServerName yourdomain.com

    SSLEngine on
    SSLCertificateFile /path/to/your/certificate.crt
    SSLCertificateKeyFile /path/to/your/private.key

    # HSTS 配置
    Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"

    # 其他配置...
</VirtualHost>

参数解释： 同 Nginx。

完整示例：

<VirtualHost *:443>
    ServerName yourdomain.com

    DocumentRoot /var/www/yourdomain.com

    SSLEngine on
    SSLCertificateFile /path/to/your/certificate.crt
    SSLCertificateKeyFile /path/to/your/private.key

    # HSTS 配置
    Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"

    <Directory /var/www/yourdomain.com>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

3. JavaScript 配置 (不推荐，仅作了解)：

虽然不推荐，但理论上可以通过 JavaScript 设置 HSTS 头，但这非常不安全，因为首先需要通过 HTTP 传输 JavaScript 代码，这本身就违背了 HSTS 的初衷。这里仅作了解。

// 永远不要在生产环境中使用！
if (window.location.protocol !== 'https:') {
    window.location.replace('https://' + window.location.hostname + window.location.pathname + window.location.search);
}

这段代码只是简单地检查当前页面是否使用 HTTPS，如果不是，则重定向到 HTTPS 版本。这并不能实现 HSTS 的功能，因为浏览器不会记住这个策略。

HSTS 预加载：一步到位，全球生效

HSTS 预加载列表是一个由浏览器厂商维护的列表，包含了已经启用 HSTS 的域名。如果你的域名在这个列表中，那么浏览器在第一次访问你的网站时，就会强制使用 HTTPS，无需等待服务器发送 HSTS 头。

如何加入 HSTS 预加载列表：

确保你的网站满足以下条件：
- 必须使用有效的 HTTPS 证书。
- 必须将所有 HTTP 流量重定向到 HTTPS。
- 必须设置 HSTS 头，包含 max-age、includeSubDomains 和 preload 指令。
- 必须为所有子域名提供 HTTPS 支持（如果使用了 includeSubDomains）。
访问 HSTS 预加载列表提交网站： 例如 hstspreload.org。
按照网站的指示，提交你的域名。

注意事项：

加入预加载列表是不可逆的，一旦加入，你的域名将永久被标记为 HSTS。
如果你的网站未来不再支持 HTTPS，可能会导致用户无法访问。
在提交之前，请务必仔细测试你的网站，确保一切正常。

HSTS 的最佳实践：稳中求胜

从小到大： 刚开始可以设置较短的 max-age 值，例如一个月，观察运行情况，没有问题再逐渐增加。
谨慎使用 includeSubDomains： 确保所有子域名都支持 HTTPS，否则可能会导致子域名无法访问。
做好 HTTPS 迁移： 在启用 HSTS 之前，确保你的网站已经完全迁移到 HTTPS，并且所有资源都通过 HTTPS 加载。
定期检查： 定期检查 HSTS 配置是否正确，证书是否有效。

HSTS 的潜在问题：防患于未然

证书过期： 如果你的 HTTPS 证书过期，浏览器会阻止用户访问你的网站，即使你启用了 HSTS。
HTTPS 配置错误： 如果你的 HTTPS 配置不正确，例如使用了自签名证书，或者证书链不完整，浏览器也会阻止用户访问你的网站。
子域名问题： 如果你的 HSTS 策略包含了 includeSubDomains，但某个子域名不支持 HTTPS，用户将无法访问该子域名。

如何排查 HSTS 问题：

浏览器开发者工具： 在浏览器的开发者工具中，可以查看 HTTP 响应头，确认 HSTS 头是否正确设置。
在线 HSTS 检测工具： 有很多在线工具可以检测你的网站是否正确配置了 HSTS，例如 securityheaders.com。
浏览器 HSTS 设置： 在浏览器的设置中，可以查看和清除 HSTS 策略。

代码示例：使用 Node.js 设置 HSTS 头

const express = require('express');
const app = express();

app.use((req, res, next) => {
    res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains; preload');
    next();
});

app.get('/', (req, res) => {
    res.send('Hello, HSTS!');
});

app.listen(3000, () => {
    console.log('Server listening on port 3000');
});

代码示例：使用 PHP 设置 HSTS 头

<?php
header('Strict-Transport-Security: max-age=31536000; includeSubDomains; preload');
?>
<!DOCTYPE html>
<html>
<head>
    <title>HSTS Example</title>
</head>
<body>
    <h1>Hello, HSTS!</h1>
</body>
</html>

表格总结：HSTS 相关参数

参数	含义	示例
`max-age`	指定 HSTS 策略的有效期，单位是秒。浏览器在这个有效期内会记住该策略。	`max-age=31536000` (一年)
`includeSubDomains`	可选参数，表示该 HSTS 策略也适用于所有子域名。如果设置了这个参数，必须确保所有子域名都支持 HTTPS，否则可能会导致子域名无法访问。	`includeSubDomains`
`preload`	可选参数，表示将你的域名加入 HSTS 预加载列表。如果你的域名在这个列表中，浏览器在第一次访问你的网站时就会强制使用 HTTPS。这个选项需要谨慎使用，因为一旦加入预加载列表，就很难撤销。	`preload`
响应头	`Strict-Transport-Security`	`Strict-Transport-Security: max-age=31536000; includeSubDomains; preload`
未设置时	浏览器正常访问 HTTP 链接，不强制升级到 HTTPS，存在安全风险。	用户可以通过 HTTP 访问你的网站，可能遭受中间人攻击。
设置错误时	可能会导致用户无法访问你的网站，或者子域名无法访问。例如，如果你的 HTTPS 配置不正确，或者某个子域名不支持 HTTPS。	浏览器可能会显示安全警告，或者直接阻止用户访问。

高级应用：HSTS 与 CSP 的结合

HSTS 和 CSP (Content Security Policy) 都是重要的安全策略，它们可以一起使用，进一步提升网站的安全性。HSTS 负责强制使用 HTTPS，CSP 负责限制浏览器可以加载的资源，防止 XSS 攻击。

示例：同时设置 HSTS 和 CSP 头

add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
add_header Content-Security-Policy "default-src https:; script-src https: 'unsafe-inline' 'unsafe-eval'; style-src https: 'unsafe-inline'; img-src https: data:; font-src https: data:;";

总结：HSTS，安全路上的好伙伴

HSTS 是一个简单而强大的安全机制，可以有效地防止 SSL Stripping 攻击，提升网站的安全性。虽然配置 HSTS 并不复杂，但需要谨慎操作，避免出现问题。希望今天的讲解能够帮助你更好地理解和使用 HSTS，让你的网站更加安全可靠！

今天的分享就到这里，各位靓仔靓女，下课！别忘了点赞收藏哦！

发表回复 取消回复

发表回复取消回复