如何在使用BrowserSync、xip.io和Wamp时在Chrome中获得安全的灰色锁图标
首先,在WSL或任何您用于Bash的工具中运行此命令,生成本地主机的.key和.crt文件:
cd /mnt/c/wamp64/certs/
openssl req -x509 -out localhost.crt -keyout localhost.key \
-newkey rsa:2048 -nodes -sha256 \
-subj '/CN=localhost' -extensions EXT -config <( \
printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")
使用PowerShell告诉Chrome信任.crt文件的方法如下:
PS C:\wamp64\certs> certutil -addstore -enterprise -f "Root" .\localhost.crt
点击⋮ > 退出完全退出Chrome(不仅是一些标签页)。
我的BrowserSync选项:
{
proxy: {
target: "https://myapp.192.168.1.113.xip.io" // Proxy an EXISTING vhost. Browsersync will wrap your vhost with a proxy URL to view your site.
},
host: "localhost", //the crt must have been created to match this (probably)
https: { //https://browsersync.io/docs/options/#option-https
key: "C:\\wamp64\\certs\\localhost.key",
cert: "C:\\wamp64\\certs\\localhost.crt"
},
port: 3000
}
现在,https://localhost:3000/ 应该会有一个灰色的锁图标显示在左上角了。