BG:最近搞了一个前后端分离项目,前端使用的是vue。有一个需求是前端js需要获取本机ip并展示,使用的js通过RTCPeerConnection获取本机ip,结果在多台电脑的chrome浏览器(版本为v78)上均正常。当换成chrome v90展示的ip为形如xxx.local的样子。据说Google webrtc 的ip地址之前是暴露的,然后有了mDNS功能,把ip地址隐藏了,要获取ip的话,要把mDNS关闭,但是这个插件开关只在85版本及以前可以找到,86开始就找不到了,更别提关闭。chrome或FireFox删除隐藏IP,详见获取本机ip失败,webrtc candidate xxx.local mDNS ip地址问题 或 JS获取本地IP&显示隐藏IP
针对谷歌浏览器的设置,才能显示出 IP:(Chrome 90 版本之后,取消了该配置,其中edge 95版本及开发者Chrome 97 版本有#enable-webrtc-hide-local-ips-with-mdns 配置。该说不说,结合背景描述从来没看到谷歌在某件事情上这么纠结反复无常过。)
在 chrome 浏览器地址栏中输入:chrome://flags/
在 edge浏览器地址栏中输入:edge://flags/
搜索 #enable-webrtc-hide-local-ips-with-mdns 该配置 并将属性改为 disabled
点击页面下方的 relaunch ,重启浏览器即可查看到本机的内网 IP 地址。
1) 针对这么反复无常的操作,现另外提供两种解决JS通过RTCPeerConnection获取本机IP地址显示空白或有异常的解决方法。
配置说明
1.下载 Chrome 官方的组策略文件 chrome.adm
policy_templates\windows\adm\zh-CN\chrome.adm
2. 搜索本地计算机的组策略配置,并打开。
打开运行窗口,输入gpedit.msc,如下图
3. 在 管理模板 中,右键选择 “添加 / 删除模板”,选择并导入步骤 1 的模板 chrome.adm
选择管理模板:
添加模板:
添加完成后,会出现如上图所示的 经典管理模板(ADM)
4. 选择 配置项:
在 WebRTC ICE 候选路径中显示本地 IP 的网址,位置如下所示:
5. 启用显示
双击打开,选择 已启用并选择 显示:
可以看到 帮助描述中,此配置是替换原先的 chrome://flags/#enable-webrtc-hide-local-ips-with-mdns 配置。
6. 在显示配置中,添加白名单域名 *baidu.com*,注意,域名前后需要加 【*】号。
如下图所示:
7. 重启 Chrome 浏览器,就可以获取到内网 IP 的显示!
2)给chrome安装WebRTC Control插件(也有人安装WebRTC Network Limiter插件,我亲自试过,不如WebRTC Control 插件好用,安装WebRTC Network Limiter插件,不推荐),并设置
WebRTC Control插件地址 https://chrome.google.com/webstore/detail/webrtc-control/fjkmabmdepjfammlpliljpnbhleegehm?hl=zh-CN
按照下图设置,把上天第一项A勾选去掉,把C中下拉框中的第二项选中。
然后重新刷新页面即可。