JS大法 - 纯JS 获取客户端IP地址

背景

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

如何收集

1. 公网IP

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

搜狐接口：

1<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>  
2<script type="text/javascript">  
3        document.write(returnCitySN["cip"]+','+returnCitySN["cname"])  // 110.87.118.246,福建省厦门市
4</script>

新浪接口：

1<script type="text/javascript" src="http://counter.sina.com.cn/ip/" charset="gb2312"></script>       <!--获取接口数据，注意charset -->
2<script type="text/javascript"> 
3    document.writeln("IP地址："+ILData[0]+"<br />");             //输出接口数据中的IP地址 
4    document.writeln("地址类型："+ILData[1]+"<br />");         //输出接口数据中的IP地址的类型 
5    document.writeln("地址类型："+ILData[2]+"<br />");         //输出接口数据中的IP地址的省市
6    document.writeln("地址类型："+ILData[3]+"<br />");         //输出接口数据中的IP地址的
7    document.writeln("地址类型："+ILData[4]+"<br />");         //输出接口数据中的IP地址的运营商
8</script>

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

2. 内网IP

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

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

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

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

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

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

在chrome 浏览器地址栏中输入：chrome://flags/
搜索 #enable-webrtc-hide-local-ips-with-mdns 该配置并将属性改为 disabled
relaunch 浏览器即可查看到本机的内网IP地址

附上利用 webRTC 获取内网的精简版js 代码(如果是chrome 浏览器，务必先修改浏览器 plugin 配置，修改方法往上瞅)

github 源码：webrtc-ips

 1 window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; //compatibility for Firefox and chrome
 2 var pc = new RTCPeerConnection({iceServers:[]}), noop = function(){};      
 3 pc.createDataChannel(''); //create a bogus data channel
 4 pc.createOffer(pc.setLocalDescription.bind(pc), noop); // create offer and set local description
 5 pc.onicecandidate = function(ice){
 6     if (ice && ice.candidate && ice.candidate.candidate){
 7        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];
 8        console.log('my IP: ', myIP);   
 9        pc.onicecandidate = noop;
10     }
11};

结论

虽然用上面的方法可以收集到用户公网和内网的IP，但是在chrome 浏览器下需要修改浏览器的配置（自测其他浏览器不需要，chrome 为了保护用户隐私默认关闭了webrtc 获取IP的属性）如果你有更好的方法，欢迎留言共同探讨...