524 字
3 分钟
握草,用浏览器检测你的NAT类型?!
众所周知,NAT类型的检测并不是什么门槛,但是,如果我说纯浏览器也可以实现检测呢...
4月4日 21:46:01

视频(非教程)#

https://www.bilibili.com/video/BV1H4DuBWEes/

原理#

我们都知道,NAT类型测试非常简单就可以实现,我们可以使用类似如下Python库在客户端本地跑一个脚本测试

MikeWang000000
/
Natter
Waiting for api.github.com...
00K
0K
0K
Waiting...

但如果我说,我们根本就不需要下载一个程序,只需要打开一个浏览器就可以测试你的NAT类型呢?

稍微深入一点,大部分的客户端测试你的NAT类型一般都是

  • 主动请求STUN服务器
  • 分析返回的 公网IP:端口
  • 判断NAT类型

但是,在浏览器中,我们无法发送原生的UDP(STUN)请求,只能使用一个包装过的UDP接口: WebRTC

该功能设计初衷是让浏览器也可以进行P2P连接

但我们也可以将它拿来测试NAT类型,不过我们的后端需要富裕一点:用两个不同的IP来探测

实际上,它的原理简单来说就是:

  • 浏览器请求STUN服务器,将自己的 公网IP:端口 发送给后端A(HTTP/WS)
  • 后端A收到浏览器的 公网IP:端口 后,发送回包,拿取凭证(因为浏览器不允许陌生源直接发包)。此时,后端A已经是可信源了
  • 接下来,后端A将自己的凭证告知后端B,让后端B拿着这个凭证去请求浏览器。如果可以收到浏览器的回包,则是 全锥型
  • 如果收不到,则让后端A换端口请求浏览器。如果可以收到包,则是 IP限制型 ,如果不行,则继续测试
  • 最后,再让后端A用同一个端口请求浏览器。如果可以收到包,并且浏览器源端口与之前一致,则是 端口限制型 ,如果不一致或压根收不到包,则为 对称型

详细的技术文档参见: webrtc_check_nat/nat_detector_explanation.md at main · afoim/webrtc_check_nat

实现#

最终,我们只需要写好后端,再创建一个HTTP端点,即可实现 完整的、全状态、纯浏览器的 NAT类型检测

afoim
/
webrtc_check_nat
Waiting for api.github.com...
00K
0K
0K
Waiting...
2x.nz
Loading...
Waiting for metadata...

这篇文章是否对你有帮助?

发现错误或想要改进这篇文章?

在 GitHub 上编辑此页

文章修订历史 (6 次)

查看变更记录
4月19日 20:24:16 d9df3c8

fix: 添加public前缀

4月19日 20:23:32 2ccf92b

fix: 路径修复

4月19日 17:48:01 85ff6c6

refactor: 批量更新所有文章图片路径为 public 目录引用

4月4日 22:52:13 a694884

feat: 将所有存量文章时间统一减去8小时,修正时区偏移

4月4日 22:10:30 02d325f

docs: 在博客文章中添加NAT检测的额外图片

4月4日 22:09:18 91602a1

posts: 发布文章:《握草,用浏览器检测你的NAT类型?!》,众所周知,NAT类型的检测并不是什么门槛,但是,如果我说纯浏览器也可以实现检测呢...

握草,用浏览器检测你的NAT类型?!
作者
二叉树树
发布于
4月4日 21:46:01
许可协议
CC BY-NC-SA 4.0