HSTS 阻止使用主机和使用自签名证书访问映射到本地主机的子域
HSTS preventing access to a subdomain mapped to localhost using hosts and using self-signed certificate
我正在使用 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 接受它?我认为自签名仍然会有问题,但如果可能的话,也许会显示关于自签名证书的警告页面,而不是用户将能够接受证书并继续?
要在本地 "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 证书或用于信任证书的任何东西中)
我正在使用 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 接受它?我认为自签名仍然会有问题,但如果可能的话,也许会显示关于自签名证书的警告页面,而不是用户将能够接受证书并继续?
要在本地 "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 证书或用于信任证书的任何东西中)