JS大法 - 纯JS 获取客户端IP地址
背景
项目中的sass 系统有多种用户权限,且同一个帐号可以多个人同时登录,导致有些操作无法直接追溯到对应的责任人,因此需要获取到当前登录用户的IP地址(员工内部人员的内网地址)并收集上报。
如何收集
1. 公网IP
对于收集公网IP, 目前通用的是利用新浪和搜狐 的接口,可兼容多种浏览器。对于一些使用如ActiveX 等IE特有的API不做介绍,要想了解请转:https://www.cnblogs.com/zhangycun/p/7339346.html
搜狐接口:
<scriptsrc="http://pv.sohu.com/cityjson?ie=utf-8"></script> <scripttype="text/javascript">3document.write(returnCitySN["cip"]+','+returnCitySN["cname"])
// 110.87.118.246,福建省厦门市4</script>
新浪接口:
<scripttype="text/javascript"src="http://counter.sina.com.cn/ip/"charset="gb2312"></script> <!--获取接口数据,注意charset -->
<scripttype="text/javascript">
document.writeln("IP地址:"+ILData[0]+"<br />");//输出接口数据中的IP地址 4document.writeln("地址类型:"+ILData[1]+"<br />");//输出接口数据中的IP地址的类型 5document.writeln("地址类型:"+ILData[2]+"<br />");//输出接口数据中的IP地址的省市6document.writeln("地址类型:"+ILData[3]+"<br />");//输出接口数据中的IP地址的7document.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地址,可以查看当前网址: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
relaunch 浏览器即可查看到本机的内网IP地址
获取内网的js 代码: 源码:webrtc-ips
window.RTCPeerConnection=window.RTCPeerConnection||window.mozRTCPeerConnection||window.webkitRTCPeerConnection;//compatibility for Firefox and chrome
var pc=newRTCPeerConnection({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){ 6if(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; }
};