HSTS 阻止访问使用主机和使用自签名证书映射到本地主机的子域答案

【问题标题】：HSTS preventing access to a subdomain mapped to localhost using hosts and using self-signed certificateHSTS 阻止访问使用主机和使用自签名证书映射到本地主机的子域
【发布时间】：2020-03-21 16:21:54
【问题描述】：

我正在使用 CRA（创建 React 应用程序）并使用以下 .env 文件将其绑定到 local.example.com:443：

HOST=local.example.com
PORT=443
HTTPS=true

这确保当我运行 CRA 脚手架时，它会尝试绑定到 local.example.com:443 并颁发自签名证书。我可以在浏览器中接受自签名并拥有一个支持 HTTPS 的本地站点。 HTTPS 是某些东西的必需品，例如Secure cookie 等，所以我需要它来进行本地开发以及远程部署。此外，proxy 可以设置为 example.com，以便本地前端在测试中使用远程后端，这是此设置的另一个动机。

这在主机名 (example.com) 没有 HSTS 时有效，但当它有时，CRA 创建的未接受的自签名证书被拒绝。为localhost 创建了证书，这是第一个问题，因为example.com 的HSTS 需要为example.com 颁发的证书才有效。火狐：

Firefox 不信任此站点，因为它使用的证书对 local.example.com 无效。该证书仅对以下名称有效：localhost、localhost.localdomain、lvh.me、*.lvh.me、[::1]、127.0.0.1、fe80::1

但最重要的是，由于它是自签名证书，除非用户首先接受它，否则浏览器将拒绝它，这可以在没有 HSTS 的情况下完成，因为关于自签名证书的警告页面允许这样做，但是使用 HSTS，会显示一个不同的警告页面（显示上面引用的错误的那个），它说 HSTS 不允许导航通过，你就完了。

在 Chrome 中，可以通过在 HSTS 警告页面上键入 letmein 来忽略 HSTS，这可行，但它在 Firefox 中不是解决方案，我想知道是否有更好的方法。

CRA 是否可以颁发证书，使其看起来好像是为 example.com 颁发的，以便 example.com 的 HSTS 接受它？我认为它仍然存在自签名的问题，但如果这是可能的，也许会显示关于自签名证书的警告页面，而不是用户将能够接受证书并继续？

【问题讨论】：

标签： https create-react-app hsts

【解决方案1】：

要在本地“绕过”HSTS，您必须为您的本地域生成有效的证书。
最小设置是生成具有正确 CN 和 SAN 的自签名证书。

即使对于您不拥有的网站，您也可以做到这一点。我发现的第一个使用 includeSubDomains 指令的 HSTS 网站是 www.amazon.com。

所以我测试了一个在 local.www.amazon.com 上运行的 CRA。
为此，我使用以下命令生成了一个私钥和证书：

openssl req \
    -x509 \
    -newkey rsa:4096 \
    -sha256 \
    -days 90 \
    -nodes \
    -keyout noca.local.www.amazon.com.key \
    -out noca.local.www.amazon.com.crt \
    -subj '/CN=local.www.amazon.com' \
    -extensions san \
    -config <( \
    echo '[req]'; \
    echo 'distinguished_name=req'; \
    echo '[san]'; \
    echo 'subjectAltName=DNS:local.www.amazon.com')

我的 .env 文件如下所示：

HOST=local.www.amazon.com
PORT=5000 
HTTPS=true
SSL_CRT_FILE=noca.local.www.amazon.com.crt
SSL_KEY_FILE=noca.local.www.amazon.com.key

我使用钥匙串打开 crt 文件（我在 Mac 上）并信任它。您可以在其他平台上以不同的方式执行此操作。

您还必须编辑主机文件（对我来说是/etc/hosts）并添加以下行：

127.0.0.1 local.www.amazon.com

结果如下：

编辑1：

如果您必须为多个网站执行此操作，您可能需要创建一个本地 CA 并进行自签名。
然后您将使用该 CA 生成所有证书。
好处是您只需信任 CA 证书一次（在钥匙串或 Chrome CA 证书或任何用于信任证书的东西中）

【讨论】：