零配置网络助力httpS的部署

92 阅读4分钟

《本地安排上HTTPS的最佳途径》一文中,我们了解到,现代浏览器的安全策略越来越严格了,很多系统级API只能在https的网页上使用,比如下面这些:\

APIChrome/OperaEdgeSafariFirefox
异步剪贴板 API66不支持不支持63
后台同步(参见SyncManager49不支持不支持不支持
Cache-Control: immutable不支持151149
凭证管理 API51不支持不支持不支持
通用传感器 API67不支持不支持不支持
付款请求 API。611511.1正在开发中(在首选项后面dom.payments.request.enabled)。
推送API4217不支持44
报告API支持的不支持不支持自 Fx 65 起在标志后面
服务工作者401711.144
存储API55不支持不支持51
网页认证API65预览 (17)开发中60
网络蓝牙56不支持不支持不支持
网络MIDI(参见MIDIAccess,例如)43不支持不支持不支持
网络加密API6079不支持75

但是让本地开发的网页上https并不是那么容易,好在可以利用主机名作为local域名来访问,然后给主机名颁发ssl证书就解决了这个前端开发中的老大难问题,这里面涉及到的知识和计算机网络(网络工程)梦幻联动,这里简单介绍一下,计算机网络或者说 IT 行业近10年来逐渐成为主流的,关于网络连通性解决方案是【零配置网络协议】zeroconf.org/,顾名思义,就是一种开…

c52f5347d733281ad808502f80b13d25.png

.local顶级域名就是零配置网络协议的产物之一,local就是local area network,本地局域网,在本地局域网中使用的域名叫做mDNS,多播DNS。关于mDNS的详细内容可以参考《私有IP与mDNS》或者《去中心化的多播DNS》这2篇文章,本文只要求你知道mDNS是一种,能在LAN中通过对方主机名访问对方电脑的协议,无论是微软还是苹果系统,都默认开启了mDNS,现在不需要每次都询问对方的IP地址了,直接呼其名即可ping通,非常方便。上次介绍了Windows下httpS的部署,这次就介绍macOS下的部署方法,原理是一样的。首先需要知道自己电脑的主机名:系统偏好设置-->共享:

213e8c2705c0c3750e0b2c8179fc4930.png

3bf60341d1cd4f4504857a1e9ff094a0.png

可以看到,上面提示说“您的本地网络上的电脑可以通过以下地址访问您的电脑:xosg.local”,在本机做web开发时,这个域名等同于localhost。好,下面我们利用openssl给xosg.local颁发自签名的SSL根证书,先要生成私钥:

openssl genrsa -out xosg.local.key 2048

然后写一个配置文件xosg.local.conf:

[req]
distinguished_name=req
[SAN]
subjectAltName=DNS:xosg.local

最后利用这个私钥和配置文件生成公钥证书:

openssl req -new -x509 -key xosg.local.key -out xosg.local.cert -days 3650 -subj /CN=xosg.local -extensions SAN -config 'xosg.local.conf'

如果觉得麻烦,推荐使用在线的自签名证书生成工具https://www.selfsignedcertificate.com/:

6c02f11d499d3ecff071d36cb5e77d58.png

72a1fcaf18a460b946aaf80fe345f5f5.png

输入域名,就给你自动生成xosg.local.key和xosg.local.cert,非常方便。

58ce24911fb11297aadb34b7a338a198.png

接着,我们要让系统信任这个证书,打开钥匙串访问:\

b4a50fe96b13830140ef1ca6c0624a0a.png

导入xosg.local.cert,在“信任”一栏中选择“始终信任”:\

1cec96e44d1cbb6864b829de03430385.png

最后一步,通知我们的本地http服务器,用这对私钥和证书开启https本地服务器,在浏览器中验证是否成功:

a6c7fb9d43d047ea4b974aceb8b710e9.png

现在就能使用浏览器所有的API了,多谢零配置网络技术的成熟,使得Web前端开发的效率大大提升。