本地安排上HTTPS的最佳途径~

Posted 2021-09-12 XOSG

抛弃http的API们

这年头没有https都没法开发软件了，web标准上近几年的api们清一色地要求https，否则就罢工！它们包括但不限于：

• Notification：系统通知

• Geolocation：地理信息

• Storage：存储/缓存

• PWA：渐进式Web应用

• Payment Request：支付

• Clipboard：剪贴板

• ServiceWorker：守护线程

• MediaDevices：媒体设备

• Crypto：密码学工具

• Generic Sensor：传感器

• Bluetooth：蓝牙接口

• Authentication：认证

• WebXR：虚拟现实

• Presentation：屏幕共享

这些api都不能在http下正常使用，尤其以chrome的要求最为严格，必须保证入口文档和异步资源都是https时才能使用以上的API，否则会出现下面的提示。

可是开发时，本地部署https并没有那么容易，想让浏览器承认网站的安全性没有想象中那么简单，尤其是访问本地服务器的时候，chrome总是出现红色的感叹号，多年来尝试过以下的方法都失败了：

• 用假证书自然不行

• 给localhost或ip地址颁发自签名证书被系统拒绝了

• 修改hosts文件并安装证书，浏览器不认（chromium有自带的证书管理器）

• 调chrome的首选项（chrome://flags/）倒是可以但非常麻烦

有没有既简单又稳当，符合一般人思维习惯的办法呢，网上总是没有明确的答案，直到前几天玩VisualSVN Server的时候终于发现了标准的做法。

---

本地服务器的4种地址

	IP地址	域名
本地	127.0.0.1	localhost
网络	网卡IP	主机名

通过以上4种地址都可以访问本地服务器，有的机器还可以通过0.0.0.0来访问，这种地址不被广泛接受，更多的是作为匹配所有ip的保留地址。每台电脑自带的dns服务都会把localhost解析到127.0.0.1，然后指向本机，就是说，127.0.0.1对应的域名是localhost。

如果电脑联网的话，还可以通过网卡ip来访问本地，比如192.168.0.1，那它对应的域名是什么呢？不用查dns缓存，只要打开你的电脑名片就能看到了，比如Windows电脑在【控制面板/系统和安全/系统】中可以查看名片：

（我不是来秀内存的）

其中的计算机名就是你的主机域名，能够解析成你的网卡ip，以我的电脑为例，随便开一个http服务，浏览器中可以直接访问 http://desktop-oakgfsr/ 了。

如何上https呢？自然不能用假证书了，但也没必要花钱去找CA颁发真证书。等等，既不用真证书也不用假证书？？？误会了，我们用真证书，只不过是用openssl自签名的证书，方便起见，我们不用openssl做实验了，在网上随便找一个在线ssl证书生成器就好了。

按照要求输入域名以后，生成器很快就帮你制作好证书和私钥：

• desktop-oakgfsr.cert：自签名证书

• desktop-oakgfsr.key：证书的私钥

---

安装自签名证书

如果你对https的原理不是很明白的话，推荐看这篇文章：《HTTPS与P=NP问题卍解》，里面把https原理嚼碎了送到你嘴里。接下来要让操作系统或浏览器信任这个证书：双击打开证书，点击安装。

证书导入位置选择【受信任的根证书颁发机构】即可。

打开【管理用户证书】就能看到刚安装的证书了：

当然也可以选择在这里导入证书，效果是一样的。最后我们用这个证书和刚刚的私钥开一个本地web服务器，监听443端口，浏览器访问 https://desktop-oakgfsr/ ，就成功了。

如果发现在chrome上没有立刻生效，可能需要重启浏览器，甚至重新登录Google账号才行。自此，一众Web最新API都能使用啦。

<完>