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

一箫一剑平生意,负尽狂名十五年。这篇文章主要讲述本地安排上HTTPS的最佳途径~相关的知识,希望能为你提供帮助。
抛弃http的API们
这年头没有https都没法开发软件了,web标准上近几年的api们清一色地要求https,否则就罢工!它们包括但不限于:

  • Notification:系统通知
  • Geolocation:地理信息
  • Storage:存储/缓存
  • PWA:渐进式Web应用
  • Payment Request:支付
  • 【本地安排上HTTPS的最佳途径~】Clipboard:剪贴板
  • ServiceWorker:守护线程
  • MediaDevices:媒体设备
  • Crypto:密码学工具
  • Generic Sensor:传感器
  • Bluetooth:蓝牙接口
  • Authentication:认证
  • WebXR:虚拟现实
  • Presentation:屏幕共享
这些api都不能在http下正常使用,尤其以chrome的要求最为严格,必须保证入口文档和异步资源都是https时才能使用以上的API,否则会出现下面的提示。
本地安排上HTTPS的最佳途径~

文章图片

可是开发时,本地部署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电脑在【控制面板/系统和安全/系统】中可以查看名片:
本地安排上HTTPS的最佳途径~

文章图片

(我不是来秀内存的)

其中的计算机名就是你的主机域名,能够解析成你的网卡ip,以我的电脑为例,随便开一个http服务,浏览器中可以直接访问 http://desktop-oakgfsr/ 了。
本地安排上HTTPS的最佳途径~

文章图片

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

文章图片

按照要求输入域名以后,生成器很快就帮你制作好证书和私钥:
  • desktop-oakgfsr.cert:自签名证书
  • desktop-oakgfsr.key:证书的私钥
安装自签名证书
如果你对https的原理不是很明白的话,推荐看这篇文章:《HTTPS与P=NP问题卍解》,里面把https原理嚼碎了送到你嘴里。接下来要让操作系统或浏览器信任这个证书:双击打开证书,点击安装。
本地安排上HTTPS的最佳途径~

文章图片

证书导入位置选择【受信任的根证书颁发机构】即可。
本地安排上HTTPS的最佳途径~

文章图片

打开【管理用户证书】就能看到刚安装的证书了:
本地安排上HTTPS的最佳途径~

文章图片

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

文章图片

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

文章图片

如果发现在chrome上没有立刻生效,可能需要重启浏览器,甚至重新登录Google账号才行。自此,一众Web最新API都能使用啦。
< 完>
本地安排上HTTPS的最佳途径~

文章图片


    推荐阅读