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

Question

我正在使用 CRA（Create React App）并使用以下 .env 文件将其绑定到 local.example.com:443：

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

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

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

Firefox does not trust this site because it uses a certificate that is not valid for local.example.com. The certificate is only valid for the following names: 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 接受它？我认为自签名仍然会有问题，但如果可能的话，也许会显示关于自签名证书的警告页面，而不是用户将能够接受证书并继续？

Answer 1

要在本地 "bypass" HSTS，您必须为本地域生成有效证书。
最低限度的设置是生成具有正确 CN 和 SAN 的自签名证书。

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

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

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

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

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

127.0.0.1 local.www.amazon.com

结果如下：

编辑 1：

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

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

HSTS preventing access to a subdomain mapped to localhost using hosts and using self-signed certificate

https

create-react-app

hsts