背景

项目中的 sass 系统有多种用户权限，且同一个帐号可以多个人同时登录，导致有些操作无法直接追溯到对应的责任人，因此需要获取到当前登录用户的 IP 地址（员工内部人员的内网地址）并收集上报。

如何收集

1. 公网 IP

对于收集公网 IP， 目前通用的是利用 新浪 和 **搜狐 **的接口，可兼容多种浏览器。对于一些使用如  ActiveX 等 IE 特有的 API 不做介绍，要想了解请转：https://www.cnblogs.com/zhangycun/p/7339346.html

  • 搜狐接口：
1
2
3
4
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript">
		document.write(returnCitySN["cip"]+','+returnCitySN["cname"])  // 110.87.118.246,福建省厦门市
</script>
  • 新浪接口：
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript" src="http://counter.sina.com.cn/ip/" charset="gb2312"></script>       <!--获取接口数据，注意charset -->
<script type="text/javascript">
document.writeln("IP地址："+ILData[0]+"
");             //输出接口数据中的IP地址
document.writeln("地址类型："+ILData[1]+"
");         //输出接口数据中的IP地址的类型
document.writeln("地址类型："+ILData[2]+"
");         //输出接口数据中的IP地址的省市
document.writeln("地址类型："+ILData[3]+"
");         //输出接口数据中的IP地址的
document.writeln("地址类型："+ILData[4]+"
");         //输出接口数据中的IP地址的运营商
</script>

缺点：依赖与搜狐和新浪的服务器稳定性，如果资源所在的服务器挂了，就无法获取到对应的 IP

2. 内网 IP

内网 IP 的获取相对比较复杂，主要是需要依赖 webRTC 这么一个非常用的 API

WebRTC，名称源自网页即时通信（英语：Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的API。它于 2011 年 6 月 1 日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的 W3C 推荐标准。

webRTC 是 HTML 5 的一个扩展，允许去获取当前客户端的 IP 地址，可以查看当前网址：http://net.ipcalf.com/

如果使用 chrome 浏览器打开，此时可能会看到一串类似于：

e87e041d-15e1-4662-adad-7a6601fca9fb.local

的机器码，这是因为 chrome 默认是隐藏掉 内网 IP 地址的，可以通过修改 chrome 浏览器的配置更改此行为：

  • 在 chrome 浏览器地址栏中输入：chrome://flags/
  • 搜索  #enable-webrtc-hide-local-ips-with-mdns **该配置 并将属性改为 disabled**

image.png

  • relaunch 浏览器即可查看到本机的内网 IP 地址
    image.png

获取内网的 js 代码： 源码：webrtc-ips

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.RTCPeerConnection =
  window.RTCPeerConnection ||
  window.mozRTCPeerConnection ||
  window.webkitRTCPeerConnection; //compatibility for Firefox and chrome
var pc = new RTCPeerConnection({ iceServers: [] }),
  noop = function () {};
pc.createDataChannel(""); //create a bogus data channel
pc.createOffer(pc.setLocalDescription.bind(pc), noop); // create offer and set local description
pc.onicecandidate = function (ice) {
  if (ice && ice.candidate && ice.candidate.candidate) {
    var myIP = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/.exec(
      ice.candidate.candidate
    )[1];
    console.log("my IP: ", myIP);
    pc.onicecandidate = noop;
  }
};