google 浏览器本地使用 https 的解决办法
问题描述
本地开发 http://localhost
需要使用 HTTPS
运行,devServer 设置了 https: true
,依然打不开页面,点击高级也没有继续前往的选项。
// webpack.config.js
devServer: {
https: true,
// ....
}
原因
HTTPS 网站是需要证书的,浏览器无法识别当前访问的 https 网站证书或验证有问题,所以要强制用户在键盘输入this-is-unsafe(这是不安全的),再次告知了风险。
解决方法
在当前页,直接在键盘上敲以下内容thisisunsafe
不是在地址栏输入!按下键盘上对应的字母就可以了。
此时打开的 https 是不安全的:
更深一步
在大多数情况下,本地开发 http://localhost
就可以满足需求。在浏览器中,它的行为与 HTTPS 非常类似。因此,部分无法在部署的 HTTP 网站上运行的 API 可以在 http://localhost
上运行。 这意味着开发人员只需要 在特殊情况下 才需要在本地使用 HTTPS,例如自定义主机名或跨浏览器的安全 cookie...
安全访问 https
使用以上方法,可以本地访问 https 页面,但是不安全。若想安全,需要 TLS 证书,但并非任何证书都会被浏览器接受:证书需要由您的浏览器信任的实体签名,这些实体称之为可信证书颁发机构 (CA)。
创建 TLS 证书
推荐使用 mkcert 为本地开发创建 TLS 证书。
工作原理如下:
- 如果使用 HTTPS 在浏览器中打开本地运行的网站,浏览器将检查本地开发服务器的证书。
- 在看到证书已由 mkcert 生成的证书颁发机构签名后,浏览器会检查它是否已注册为受信任的证书颁发机构。
- mkcert 已被列为受信任的颁发机构,所以浏览器会信任该证书并创建 HTTPS 连接。
推荐阅读
JS 事件循环(Event Loop)
理解 JavaScript 的事件循环往往伴随着宏任务和微任务、JavaScript 单线程执行过程及浏览器异步机制等相关问题,而浏览器和 NodeJS 中的事件循环实现也是有很大差别。熟悉事件循环,了解浏览器运行机制将对我们理...
时倾赞 4阅读 496
HTTPS 是这样握手的
HTTP协议默认是明文传输,存在一定的安全隐患,容易被中间人窃听和攻击,在 加密解决HTTP协议带来的安全问题 中提到使用哈希、对称加密、非对称加密等方式对数据加密,能解决数据安全的问题。
一颗冰淇淋阅读 843
热点面试题:常见的http code 及含义?
极度投入,深度沉浸,边界清晰前端小菜鸡一枚,分享的文章纯属个人见解,若有不正确或可待讨论点可随意评论,与各位同学一起学习~欢迎关注 『前端进阶圈』 公众号 ,一起探索学习前端技术......公众号回复 加群 ...
控心crazy阅读 500
Python实现http服务器(http.server模块传参、接收参数)
要实现一个可以接收参数的HTTP服务器,您可以使用Python标准库中的http.server模块。该模块提供了一个简单的HTTP服务器,可以用于开发和测试Web应用程序。
TANKING阅读 337
独立产品灵感周刊 DecoHack #044 - 新的一年如何管理你的时间
本周刊记录有趣好玩的独立产品设计开发相关内容,每周发布,往期内容同样精彩,感兴趣的伙伴可以点击订阅我的周刊。为保证每期都能收到,建议邮件订阅。欢迎通过 Twitter 私信推荐或投稿。
ViggoZ阅读 335
阿里云https免费证书申请
项目牵涉到做一个语音在线实时收集,然后进行asr识别的B/S应用。所以需要浏览器调用“麦克风”来获取用户语音。此时需要在localhost或者https下才能实现这样的功能。类似于google的语音翻译,如下所示:
startshineye阅读 259
nginx一点儿基础配置(一)
1.1 使用 nginx -V产看编译参数中是否含有 --with-http_ssl_module ,如果没有则继续操作,如果有则跳到1.6步。注意:nginx如果已经安装了其他模块,在安装新模块编译时,必须也要带上其他模块的编译参数,不然会...
mahy阅读 228评论 1
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。