前端视角看 HTTPS

最近用Docusaurus搭了一个个人网站，部署后看到浏览器地址栏上“不安全”三个字感觉特别辣眼，便不由自主的想起了HTTPS。回忆起自己在日常开发中遇到的一些与HTTPS相关的知识，忍不住想将这些年积累的一些细节和心得体会整理一下。
为什么要使用HTTPS

HTTPS的发展历程是一段颇具趣味的历史，充满了技术创新与安全挑战。作为前端开发者为什么要使用HTTPS，难道HTTP不能用了吗？当然不是，从本质上讲HTTPS还是HTTP，对我们前端开发而言大多数情况下根本就不需要考虑是不是要使用HTTPS，HTTPS主要针对安全有要求的内容。然而，安全问题由来已久，许多前端功能和浏览器的安全策略都依赖 HTTPS 来确保用户的安全和隐私。而我自己对以下内容印象较为深刻：
HTTP2

HTTP2是基于HTTPS实现的，所以要启用HTTP2就必须使用HTTPS。HTTP2给人影响最深刻的一定是多路复用，它允许在同一个连接上并发发送多个请求和响应，不会像 HTTP/1.x 那样每个请求需要建立新的连接，完美解决浏览器并发的限制问题（记得以前处理这个问题的时候还是参考百度，用多个域名固定资源的方法来提升并发数量）。如果说某一天领导说我们的网站要把协议升级到HTTP2，前端的同学一定要淡定，因为这几乎不会涉及到代码的修改，HTTP这个协议是给浏览器和服务器使用的，只要我们的服务端和浏览器都支持HTTP2，那这个功能就完成了。
Service Worker

Service Worker 允许 Web 应用在后台独立工作，我们可以通过它执行耗时计算、缓存资源、处理离线请求等。但由于它涉及到后台操作和缓存用户的数据，浏览器要求它只能在 HTTPS 环境下运行,这是为了避免恶意脚本的注入和保障用户数据的安全。
Web Authentication API（WebAuthn）

这个功能我并没真正的使用过，它是一种基于公钥的身份验证方式，在我们的移动端应用中，如果希望提供快捷的登陆方式比如指纹、面部识别等就可以通过这个API来实现。由于它涉及到敏感的身份信息，WebAuthn 需要在 HTTPS 环境下运行，以确保身份验证过程中的数据不会被窃取或篡改。
Geolocation API

如果需要通过浏览器获取用户的地理位置，浏览器会要求该请求通过 HTTPS 进行。这样可以确保用户的地理位置信息在传输过程中不会被第三方窃取或篡改。
Clipboard

Clipboard API 允许我们在网页中读取或写入剪贴板的内容，实现剪切、复制和粘贴功能。但由于剪贴板中可能包含用户的敏感信息，浏览器要求这个功能只能在 HTTPS 环境下运行。
Notifications API

Notifications API 允许 Web 应用在用户的设备上显示通知。它通常用于提醒用户一些重要的事件、消息或更新，尤其是在用户没有打开应用的情况下。与传统的桌面应用通知相似，Web 应用也可以通过通知向用户传递信息。目前，这已经是一个比较常见的功能，这个功能也只能在 HTTPS 环境下运行。
除以上功能外，还有很多功能也需要在HTTPS环境下运行，比如：摄像头、麦克风、蓝牙等。
日常工作中也偶尔听同事们说起遇到的一些奇葩问题，最后是使用HTTPS解决的。我自己也遇到过一次，我们的项目中使用CORS实现跨域通信，这是一个我们熟悉的解决方案。然而，最终在上线时却遇到了一些意外情况，有个功能在实际使用中频繁出现跨域问题。经过一番排查，我们发现这个功能中有一个接口的URL是以/结尾的，大致长这样：http://api.example.com/d/history/ 。虽然 URL 看起来并不特别引人注意，但实际调用时却出现了异常响应。大约有 20% 的概率可以正常响应，而其余情况下，接口返回的却是一段HTML代码，我们约定的接口返回格式应该是JSON。一位经验丰富的老大哥迅速给出了最佳解决方案：切换到HTTPS。在实际开发过程中使用HTTPS确实可以规避掉一些问题。
证书

使用HTTPS不可避免的要用到安全证书，怎么获得免费证书呢？以前都是在阿里云上直接领一个，但这次找了好久都没找到这个功能的入口。后来果断加了一个Caddy做代理，使用下来感觉基础代理配置方面比Nginx简单很多，并且它默认使用 Let's Encrypt（Let's Encrypt是一个免费的证书颁发机构）提供的证书来为网站启用 HTTPS。Caddy提供了简单、自动化的证书颁发和续期服务。当然，如果你的网站是一个大型的商业网站，那么建议还是购买一个收费的证书，毕竟免费的东西总是有一些限制的。
结语

随着技术的不断发展，越来越多的 API 被引入到浏览器中，其中许多涉及隐私和数据安全的功能都要求在HTTPS环境下运行。对于前端开发者来说，HTTPS不再只是一个协议，更是一种安全意识，它已经成为每个开发者必须掌握的基础知识。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！