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 瀏覽器的配置更改此行爲：

1. 在chrome 瀏覽器地址欄中輸入：chrome://flags/
2. 搜索 #enable-webrtc-hide-local-ips-with-mdns 該配置 並將屬性改成 disabled
3. 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};複製代碼