Ngrok实现内网穿透---实现https安全访问

背景:

HTTP(Hypertext Transfer Protocol)超文本传输协议是用来在Internet上传送超文本的传送协议,它可以使浏览器更加高效,使网络传输减少。但HTTP协议采用明文传输信息,存在信息窃听、信息篡改和信息劫持的风险。

HTTPS(Secure Hypertext Transfer Protocol) 安全超文本传输协议是一个安全的通信通道,它基于HTTP开发,用于在客户计算机和服务器之间交换信息。HTTPS使用安全套接字层(SSL)进行信息交换,简单来说HTTPS是HTTP的安全版,是使用TLS/SSL加密的HTTP协议。

什么是SSL数字证书(SSL证书)?

数字证书的一种,类似于驾驶证、护照和营业执照的电子副本。因为配置在服务器上,也称为SSL服务器证书。SSL 证书就是遵守 SSL协议,由受信任的数字证书颁发机构CA(如GlobalSign,wosign),在验证服务器身份后颁发,具有服务器身份验证和数据传输加密功能。

CA:

即证书授权中心(CA, Certificate Authority)。CA是负责签发证书、认证证书、管理已颁发证书的机关。用户向CA提出申请后,CA负责审核用户信息,然后对关键信息利用私钥进行”签名”,并公开对应的公钥。客户端可以利用公钥验证签名。

CSR:

CSR(Certificate Signing Request)即证书请求文件,也就是证书申请者在申请数字证书时由CSP(加密服务提供者)在生成私钥的同时也生成证书请求文件,证书申请者只要把CSR文件提交给证书颁发机构后,证书颁发机构使用其根证书私钥签名就生成了证书公钥文件,也就是颁发给用户的证书。

使用ssl证书优势?

谷歌从 2017 年1月1日起,Chrome 浏览器将会对未进行HTTPS加密的网站标记为「不安全」网站;

同时苹果App Store的所有iOS应用将强制采用ATS标准,也就是强制使用 HTTPS;

在国内热火朝天的小程序也要求必须使用 HTTPS 请求。

  1. 防流量劫持
    全站Https是根治运营商、中间人流量劫持的解决方案,不仅可以杜绝网页中被插入的小广告,更可以保护用户隐私安全。
  2. 提升搜索排名
    采用Https可以帮忙搜索排名的提升,提高站点的可信度和品牌形象。
  3. 杜绝钓鱼网站
    Https地址栏绿色图标可以帮助用户识别出钓鱼网站,保障用户和企业的利益不受损害,增强用户信任。

过程:

昨天在学习小程序模仿知乎日报的时候发现小程序居然不支持http://的请求,虽然可以在本地电脑环境用体验版小程序进行测试,但是手机上不能预览我是绝对不能忍受的!而且https是未来的趋势,学会配置个https访问的网站,也算是个技能吧(我是很绝对的 滑稽…)

在网上稍微浏览了下如何实现https访问
我这里选择了阿里云的免费证书,下面是我申请证书的步骤:

1.首先,你需要有一台阿里云的服务器,一个备案过的域名

2.开始申请证书:
选择控制台===>安全(云盾)

点击选择并购买证书

支付完成后,到我的证书,补全信息

使用主域名即可

3.申请完成后等待签发.并下载证书

选择apache

下载到本地的文件列表

什么嘛?申请个免费DV证书就行了?apache服务器里配置就好了?
不存在的,不然我而不会昨天晚上熬到2点了,这里给自己点个赞!
我现在服务器使用的ngrok内网穿透,也就是说我自己的电脑就是服务器,具体了解请参考我的另一篇文章:Centos搭建Ngrok实现内网穿透

误区:

一开始我的思路就错了,我以为我的代理给本机做了转发,那么我只要将本地的apache配置证书就可以了(我类比成如果我的服务器是windows的,那的确是这个方法,但是我的服务器是在centos上用ngrok转发的)。后来想想也太蠢了,ssl证书在本地配置,浏览器怎么识别你是安全的网站呢?

转换思路:

应该是将ngrok中的证书替换,建立一条安全隧道,通过这条隧道访问的网站即是安全的,可以通过https验证
然后我哦开始着手找这方面的资料,百度上几乎没有这个词条,最后还是简书的一个兄dei的文章里看到了我想要的,但是说的比较笼统,还好他贴了原文,是GitHub上外国友人写的帖子

我英语也不好,直接用了google翻译,首先将下载下来的两个文件

将第一个重命名为1.key,第二个重命名为2.crt,传到ngrok的目录下,
启动ngrok

sudo ./bin/ngrokd -domain="abc.com" -tlsKey="1.key" -tlsCrt="/usr/local/src/ngrok/2.crt" &

ngrok 默认隧道端口:4443;http端口:80;https端口:443
本机的apache不用做任何修改只需要开放443端口就可以

访问测试:

大功告成!!!
啦啦啦啦~~~~
欢迎大家交流~!

原文地址:http://tencent.yundashi168.com/712.html

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当你无法通过ngrok进行内网穿透访问时,可能有几种可能的原因。首先,你输入的访问web网站的外网地址可能不存在,或者你的ngrok断开了。确保你的ngrok一直开着,这样才能保证你访问的那个网站存在。如果ngrok断开了,那个网站就无法被访问到了。 另外,可能是你遇到了报错ERR_NGROK_3022。这个报错意味着你输入的访问web网站的外网地址不存在或者ngrok断开了。你需要确保输入的地址正确,并且ngrok一直保持连接状态。 如果你遇到了报错ERR_NGROK_3022,可能你一开始并没有意识到这个报错的意思,以为这是正常的。但是当你无法通过这个路径访问内网的网站时,你才意识到有问题。 为了解决ngrok内网穿透访问不了的问题,你可以参考以下步骤: 1. 首先,确保你已经购买了ngrok服务器并且获得了相关配置信息,特别是隧道id。 2. 下载并安装适合你电脑系统的ngrok客户端。 3. 解压并启动ngrok客户端,双击打开Sunny-Ngrok启动工具.bat。 4. 输入之前服务器的隧道id,并成功启动ngrok服务器。 5. 注意,左边的地址是外网地址,右边是内网地址,以及项目对应的端口号。 6. 如果在本地通过设置域名访问vue项目时出现Invalid Host header错误,你可以按照以下方法解决: - 对于使用vue-cli2创建的项目,在webpack.dev.conf.js中的devServer对象中添加disableHostCheck: true。 - 对于使用vue-cli3创建的项目,在项目根目录下创建vue.config.js文件,并添加module.exports = { devServer: { disableHostCheck: true } }。 7. 确认你的外网访问成功,以后只要项目在运行,你可以在任何地方通过外网地址随时访问项目。 希望以上信息对你有帮助,如果还有其他问题,请随时提问。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [norok内网穿透如何解决ERR_NGROK_6022,ERR_NGROK_3200的报错](https://blog.csdn.net/qq_62129885/article/details/126894332)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Ngork内网穿透,远程访问项目并解决Invalid Host问题](https://blog.csdn.net/weixin_43857576/article/details/114498105)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值