首页 > 编程语言 >How to get the client IP address with Javascript only

How to get the client IP address with Javascript only

时间:2024-03-26 10:37:48浏览次数:21  
标签:function 检索 candidate get IP Javascript ip 客户端

Learn how to get the client IP address (local and private) using only javascript.

articleocw-57dfeb2a430a6

Javascript无法获取(也无法存储)客户端IP,但是Javascript能够创建Http请求,并且服务器端语言能够检索用户的公共IP,因此您可以利用这一优势。换句话说,如果你想检索用户的公共IP,你将依赖于对任何服务器的请求来检索IP。您可以很容易地从Best Node.js Hosting获得VPS,部署一个简单的js脚本,并将其作为Node.js和Express js的服务发布,这样您就可以请求该服务,获得客户端的IP。

然而,随着WebRTC的引入,您将能够使用RTCPeerConnection来检索用户的私有IP。

在本文中,您将学习如何通过几个技巧轻松检索用户IP(使用纯javascript的私有IP和使用第三方服务的公共IP)。

使用webRTC(获取专用IP)

RTCPeerConnection接口允许您在您的计算机和远程对等体之间创建一个WebRTC连接。然而,我们将创建它的“中断”版本,以便仅使用javascript检索客户端的IP。

createOffer方法启动会话描述协议(SDP)的创建,该协议提供有关附加到WebRTC会话、会话、代码和ICE代理(包含我们的目标IP)已经收集的任何候选内容的任何MediaStreamTracks的信息。

在旧版本中,此方法使用回调。但是,现在返回一个基于Promise的值,该值在完成时返回我们需要的信息:

注意:纯javascript实现将返回客户端的私有IP,而不是公共IP。保存此代码片段。

/**
 * Get the user IP throught the webkitRTCPeerConnection
 * @param onNewIP {Function} listener function to expose the IP locally
 * @return undefined
 */
function getUserIP(onNewIP) { //  onNewIp - your listener function for new IPs
    //compatibility for firefox and chrome
    var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
    var pc = new myPeerConnection({
        iceServers: []
    }),
    noop = function() {},
    localIPs = {},
    ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
    key;

    function iterateIP(ip) {
        if (!localIPs[ip]) onNewIP(ip);
        localIPs[ip] = true;
    }

     //create a bogus data channel
    pc.createDataChannel("");

    // create offer and set local description
    pc.createOffer().then(function(sdp) {
        sdp.sdp.split('\n').forEach(function(line) {
            if (line.indexOf('candidate') < 0) return;
            line.match(ipRegex).forEach(iterateIP);
        });
      
        pc.setLocalDescription(sdp, noop, noop);
    }).catch(function(reason) {
        // An error occurred, so handle the failure to connect
    });

    //listen for candidate events
    pc.onicecandidate = function(ice) {
        if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
        ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
    };
}

// Usage

getUserIP(function(ip){
    alert("Got IP! :" + ip);
});

getUserIP方法期望作为第一个参数的函数将在客户端的IP可用时被调用。回调函数接收一个字符串(ip)作为第一个(也是唯一的)参数。

使用第三方服务(获取公共IP)

如果你需要提供跨浏览器支持,你将无法使用RTCPeerConnection来检索你的客户端私有IP,因此你拥有的唯一资源是依赖于外部服务(对服务器的请求,第三方服务或你自己服务器上的自动实现服务)。

不安全连接HTTP

要从没有SSL证书的网站获取用户的IP,您可以依赖ipinfo.io。这个服务提供了一个API,通过一个简单的ajax调用来获取客户端IP:

$.getJSON('http://ipinfo.io', function(data){
    console.log(data);
});

检索数据对象包含本地化信息,如:国家,城市等。ipinfo的服务器使用基于延迟的DNS路由来尽可能快地处理请求。在官方网站阅读更多关于ipinfo的信息。

安全连接HTTPS(推荐)

即使在使用SSL的安全网站中,也可以从网站获取用户的IP,您可以使用ipify服务,该服务提供了友好的API,可以轻松获取用户IP。此服务没有请求限制。

您可以在向API请求的项目中使用它(如果需要,可以使用format参数),然后就可以开始了。

API URI Response Type Sample Output (IPv4) Sample Output (IPv6)
https://api.ipify.org text 11.111.111.111 ?
https://api.ipify.org?format=json json {"ip":"11.111.111.111"} ?
https://api.ipify.org?format=jsonp jsonp callback({"ip":"11.111.111.111"}); ?
https://api.ipify.org?format=jsonp&callback=getip jsonp getip({"ip":"11.111.111.111"}); ?

你可以使用它与JSONP:

<script type="application/javascript">
  function getIP(json) {
    document.write("My public IP address is: ", json.ip);
  }
</script>

<script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP"></script>

或者使用jQuery检索一个json请求对象:

$.getJSON('https://api.ipify.org?format=json', function(data){
    console.log(data.ip);
});

此外,如果你有自己的服务器,你可以创建自己的私有服务,用PHP,ASP等服务器语言返回用户的IP。

标签:function,检索,candidate,get,IP,Javascript,ip,客户端
From: https://www.cnblogs.com/shenhuanjie/p/18096007/how-to-get-the-client-ip-address-with-javas

相关文章

  • 前端学习-TypeScript-001-了解、安装TypeScript
    菜鸟教程链接TypeScript简介TypeScript是JavaScript的超集,扩展了JavaScript的语法,因此现有的JavaScript代码可与TypeScript一起工作无需任何修改,TypeScript通过类型注解提供编译时的静态类型检查。TypeScript可处理已有的JavaScript代码,并只对其中的TypeScript......
  • How to get the client IP address with Javascript only
    LearnhowtogettheclientIPaddress(localandprivate)usingonlyjavascript.​​Javascriptisunabletoget(norstoressomewhere)theclientIP,howeverjavascriptisabletocreateHttprequests,andserversidelanguagesareabletoretrievetheu......
  • 如何使用 JavaScript 导入和导出 Excel
    前言在现代的Web应用开发中,与Excel文件的导入和导出成为了一项常见而重要的任务。无论是数据交换、报告生成还是数据分析,与Excel文件的交互都扮演着至关重要的角色。本文小编将为大家介绍如何在熟悉的电子表格UI中轻松导入Excel文件,并以编程方式修改表格或允许用户进行编辑,最......
  • 54文章解读与程序——论文可在知网下载-含sop配电网重构+故障6-7+yalmip+二阶锥---已
    ......
  • nestJs中 Guards ,Interceptors ,Pipes ,Controller ,Filters的执行顺序
    执行顺序:Guards(守卫):Guards是最先执行的中间件,用于确定是否允许请求继续处理。Guards在请求被路由到控制器之前执行,通常用于身份验证、角色检查或权限验证。如果Guards返回一个布尔值 false 或者抛出一个异常,请求处理流程将终止,不会执行后续的Pipes、Interceptors或控......
  • C语言——getchar()
     //这里的代码适当修改是可以用来清理缓冲区的intmain(){ intch=0; while((ch=getchar())!=EOF) { putchar(ch); }return0;}intmain(){ //举一个例子 //假设密码是一个字符串 charpassword[20]={0}; printf("请输入密码:>"); scanf("%s......
  • TypeScript学习笔记之泛型
    介绍软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据......
  • P1525 [NOIP2010 提高组] 关押罪犯
    带权并查集中,dist[]数组可以理解为一个向量,这样子比按照距离来理解更透彻:优秀学习资料:AcWing240.食物链(带权并查集)-AcWing即d[a]表示向量a->fa[a]这道题的并查集解法:#include<iostream>#include<stdio.h>#include<algorithm>#include<string>#include<cmath>......
  • QtableWidget 表头增加复选框简单实现方法
    1.最近再开发一个批量查询上传的小工具,要增加一个批量选择的复选框,全选或者全不选;QCheckBox*checkBox=newQCheckBox(ui.tableWidget);checkBox->resize(40,24);ui.tableWidget->setCellWidget(0,0,checkBox);checkBox->setStyleSheet("margi......
  • Flink: Function And Rich Function , 对比 Function ,Rich functions还提供了这些方法:o
    Flink:FunctionAndRichFunction,对比Function,Richfunctions还提供了这些方法:open、close、getRuntimeContext和setRuntimeContext序言    了解了Flink提供的算子,那我们就可以自定义算子了.自定义算子的目的是为了更加灵活的处理我们的业务数据,并将满足条件......