在《本地安排上HTTPS的最佳途径》一文中,我们了解到,现代浏览器的安全策略越来越严格了,很多系统级API只能在https的网页上使用,比如下面这些:
API | Chrome/Opera | Edge | Safari | Firefox |
---|---|---|---|---|
异步剪贴板 API | 66 | 不支持 | 不支持 | 63 |
后台同步(参见SyncManager) | 49 | 不支持 | 不支持 | 不支持 |
Cache-Control: immutable | 不支持 | 15 | 11 | 49 |
凭证管理 API | 51 | 不支持 | 不支持 | 不支持 |
通用传感器 API | 67 | 不支持 | 不支持 | 不支持 |
付款请求 API。 | 61 | 15 | 11.1 | 正在开发中(在首选项后面dom.payments.request.enabled)。 |
推送API | 42 | 17 | 不支持 | 44 |
报告API | 支持的 | 不支持 | 不支持 | 自 Fx 65 起在标志后面 |
服务工作者 | 40 | 17 | 11.1 | 44 |
存储API | 55 | 不支持 | 不支持 | 51 |
网页认证API | 65 | 预览 (17) | 开发中 | 60 |
网络蓝牙 | 56 | 不支持 | 不支持 | 不支持 |
网络MIDI(参见MIDIAccess,例如) | 43 | 不支持 | 不支持 | 不支持 |
网络加密API | 60 | 79 | 不支持 | 75 |
但是让本地开发的网页上https并不是那么容易,好在可以利用主机名作为local域名来访问,然后给主机名颁发ssl证书就解决了这个前端开发中的老大难问题,这里面涉及到的知识和计算机网络(网络工程)梦幻联动,这里简单介绍一下,计算机网络或者说 IT 行业近10年来逐渐成为主流的,关于网络连通性解决方案是【零配置网络协议】http://zeroconf.org/,顾名思义,就是一种开箱即用的网络协议。所谓“零配置”实质上是自动配置,就是在不需要任何人工或者各种服务的参与情况下实现主机之间网络通信的自动配置。设计零配置网络就是完成在不需要人工干预的情况下实现网络的互联。零配置网络目前主要应用在不具备人工管理网络的条件下,像家庭、小办公室、嵌入式设备之间以及未经准备的网络之间。
.local顶级域名就是零配置网络协议的产物之一,local就是local area network,本地局域网,在本地局域网中使用的域名叫做mDNS,多播DNS。关于mDNS的详细内容可以参考《私有IP与mDNS》或者《去中心化的多播DNS》这2篇文章,本文只要求你知道mDNS是一种,能在LAN中通过对方主机名访问对方电脑的协议,无论是微软还是苹果系统,都默认开启了mDNS,现在不需要每次都询问对方的IP地址了,直接呼其名即可ping通,非常方便。上次介绍了Windows下httpS的部署,这次就介绍macOS下的部署方法,原理是一样的。首先需要知道自己电脑的主机名:系统偏好设置-->共享:
可以看到,上面提示说“您的本地网络上的电脑可以通过以下地址访问您的电脑:xosg.local”,在本机做web开发时,这个域名等同于localhost。好,下面我们利用openssl给xosg.local颁发自签名的SSL根证书,先要生成私钥:
代码语言:javascript复制openssl genrsa -out xosg.local.key 2048
然后写一个配置文件xosg.local.conf:
代码语言:javascript复制[req]
distinguished_name=req
[SAN]
subjectAltName=DNS:xosg.local
最后利用这个私钥和配置文件生成公钥证书:
代码语言:javascript复制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/:
输入域名,就给你自动生成xosg.local.key和xosg.local.cert,非常方便。
接着,我们要让系统信任这个证书,打开钥匙串访问:
导入xosg.local.cert,在“信任”一栏中选择“始终信任”:
最后一步,通知我们的本地http服务器,用这对私钥和证书开启https本地服务器,在浏览器中验证是否成功:
现在就能使用浏览器所有的API了,多谢零配置网络技术的成熟,使得Web前端开发的效率大大提升。