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 连接。

把梦想放在心中

755 声望
2.4k 粉丝
0 条评论
推荐阅读
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

把梦想放在心中

755 声望
2.4k 粉丝
宣传栏