Skip to content
Related Articles

Related Articles

Improve Article

How to get client IP address using JavaScript ?

  • Difficulty Level : Easy
  • Last Updated : 21 Jul, 2021

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:




<!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>

Output:



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

Program:




<!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>

Output:

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

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.




My Personal Notes arrow_drop_up
Recommended Articles
Page :