Open In App

How to get client IP address using JavaScript ?

Last Updated : 03 May, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

Imagine your computer as your apartment. Just like each apartment has a unique address for receiving mail, your computer has an IP address that helps it receive information from the internet. This IP address acts like a label that identifies your specific device on the vast network of computers, ensuring the data you request reaches the right place.

These are the following approaches by using we can get the client IP address using JavaScript:

1. By using the ipify

The ipify link can be used with the getJSON() method of jQuery to get the current IP address of the user.

Example: The below code uses ipify for SSL-contained websites(having HTTPS protocol) to get the client’s IP address.

HTML
<!DOCTYPE html>
<html>

<head>
    <title>
          Getting Clients IP
      </title>
    <style>
        p,
        h1 {
            color: green;
        }
    </style>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>

    <script>
        /* Add "https://api.ipify.org?format=json" to 
        get the IP Address of user*/
        $(document).ready(()=>{
            $.getJSON("https://api.ipify.org?format=json",
            function (data) {

                // Displayin IP address on screen
                $("#gfg").html(data.ip);
            })
        });
    </script>
</head>

<body>
    <center>
        <h1>
              GeeksforGeeks
          </h1>
        <h3>
              Public IP Address of user is:
          </h3>
        <p id="gfg"></p>

    </center>
</body>

</html>

Output:

Getting the user’s Public IP address

2. By using the ipinfo

The ipinfo can also be used to get the IP address in the same way we used the ipify with the get() method by passing a callback function to it.

Example: This code example uses the ipinfo to get the client’s IP address in an alert box.

HTML
<!DOCTYPE html>
<html>

<head>
    <title>
        Getting Clients IP
    </title>

    <style>
        div{
            text-align: center;
        }
        h1 {
            color: green;
        }
    </style>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
</head>

<body>
    <div>
        <h1>
            GeeksforGeeks
        </h1>
        <h3>
            Getting Client IP address
        </h3>
        <p id="result"></p>
    </div>
    <script>
        $(document).ready(()=>{
            // Use "https://ipinfo.io" link to use the
            // ipinfo for getting the ip address
            $.getJSON("https://ipinfo.io",
            function (response) {
                $('#result').html(`IP Address: ${response.ip}`)
            }, "jsonp");
        })  
    </script>
</body>

</html>

Output:

Getting client’s IP address

Note: Sometimes, it will not work on Google Chrome and Internet Explorer for the default setting. It supports Firefox and Microsoft Edge.



Similar Reads

How to get Client IP address and MAC address in Laravel ?
What is a MAC address?MAC is the abbreviation of “Media Access Control” and it is a 48-bit physical address associated with every networking device. It is printed on the NIC (Network Interface Card) and is globally unique for every networking device. MAC address is used by the data-link layer to route a data packet from source to destination. How t
2 min read
How to get the MAC and IP address of a connected client in PHP?
What is a MAC address? MAC is the abbreviation of "Media Access Control" and it is a 48-bit physical address associated with every networking device. It is printed on the NIC(Network Interface Card) and is globally unique for every networking device. MAC address is used by the data-link layer to route a data packet from source to destination. What
3 min read
PHP | Determining Client IP Address
What is an IP Address? The IP address stands for Internet Protocol Address. An IP address is used to provide an identity to a networked device.IP addresses allow the location of different digital devices that are connected to the Internet to be pinpointed and differentiated from other devices. In this post we have discussed two different ways of de
2 min read
How to get the client timezone offset in JavaScript?
The client's timezone offset could be detected by using the Date object's getTimezoneOffset() method. The getTimezoneOffset() method returns the time difference between UTC time and local time, that is the time offset, in minutes. This offset is changed by dividing by 60 and negating the result. Note: The getTimezoneOffset() does not account for Da
1 min read
How to get a component when client does not fetches the data from API ?
When constructing a React application, incorporating data from an API is standard practice for dynamic content display. Yet, there are instances where the data isn't immediately accessible during the initial component rendering. It becomes crucial to adeptly manage situations where data retrieval is pending, ensuring a seamless user experience by p
3 min read
How to detect operating system on the client machine using JavaScript ?
To detect the operating system on the client machine, one can simply use navigator.appVersion or navigator.userAgent property. The Navigator appVersion property is a read-only property and it returns a string that represents the version information of the browser. Syntax navigator.appVersion Example 1: This example uses the navigator.appVersion pro
2 min read
How to Get Local IP Address of System using PHP ?
IP (Internet Protocol) Address is an address of your network hardware. It helps in connecting your computer to other devices on your network and all over the world. An IP Address is made up of numbers or characters combined by '.' symbol. Example: It is an example of IP address. 506.457.14.512 All devices that are connected to an internet connectio
3 min read
How to get Geolocation using PHP-cURL from IP Address ?
Geolocation refers to the identification of the geographical location of a user or computer device. In this article, we will create a web page where the user can enter the IP Address of any device, and then the server will provide Geolocation of the IP address fetching the following details using the IP Geolocation API. Continent NameCountry NameCo
2 min read
How to send response from server to client using Node.js and Express.js ?
The following approach covers how to send responses from servers using node and express. Also, we are going to see different ways to send responses from the server to the client. Prerequisite: Node js: It is an open-source JavaScript Back-End technology.Express.js: It is a node.js server framework. Required Module: Install the express module using
2 min read
How to send data from client side to Node.js server using Ajax without page reloading ?
In this article, we are learning about how can we send data to a node server using Ajax without reloading the page from the client-side. Approach: We are creating a button in HTML document on the client-side when the button is pressed a request is made on our node server and the object is received at our server without reloading the page. This can
2 min read