How to get client IP address using JavaScript ?

In simple language, an IP address is a combination of numbers that uniquely identifies one’s system. It’s like a house has an address to get an mail, just like that your computer has an address to receive the data from the web. The word protocol refers to some set guidelines which need to be followed while browsing for global connectivity. The networking part of the Internet is defined by exact specifications (guidelines) for connecting on the Internet.

To get the client public IP address, JavaScript acts as a third party server-side language. JavaScript cannot do it alone so jQuery is added to do this. JavaScript works with third-party applications to fetch the IP addresses. These are the application services that fetch the user IP address and simply return it in three formats, plain text, JSON and JSONP format. There are loads of them available on the internet. Here, in this article we will be using ipify and ipinfo, two of the most popular tools for finding IP addresses.

Example 1: In this example, we are going to use the ipify for SSL contained websites (having https protocol) to get the clients IP address.

Program:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Getting Clients IP</title>
    <style>
        p, h1 {
            color: green;
        }
    </style>
    <script src=
    </script>
  
    <script>
        /* Add "https://api.ipify.org?format=json" statement
           this will communicate with the ipify servers in
           order to retrieve the IP address $.getJSON will
           load JSON-encoded data from the server using a
           GET HTTP request */
  
        $.getJSON("https://api.ipify.org?format=json",
                                          function(data) {
  
            // Setting text of element P with id gfg
            $("#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>

chevron_right


Output:



Example 2: In this example, we are going to use the ipinfo to get the clients IP address in a alert box.

Program:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Getting Clients IP</title>
    <style>
        h1 {
            color: green;
        }
    </style>
    <script src=
    </script>
  
    <script>
        // Add "https://ipinfo.io" statement
        // this will communicate with the ipify servers 
        // in order to retrieve the IP address
  
        $.get("https://ipinfo.io", function(response) {
            alert(response.ip);
        }, "json")
  
        // "json" shows that data will be fetched in json format
    </script>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
  
        <h3>Getting Client IP address</h3>
    </center>
  
</body>
  
</html>

chevron_right


Output:

Note: Sometimes it will not work on Google Chrome and Internet Explorer for the default setting. Supported by Firefox and Edge.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.