How to get client IP address using JavaScript ?

25 Nov, 2021
In this article, we will know how to get the client’s IP address in Javascript. An IP address is a combination of numbers that uniquely identifies one’s system. It’s like a house that has an address to get mail. Similarly, 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’s public IP address, JavaScript acts as a third-party server-side language. JavaScript can’t 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’s IP address and simply return it in three formats, ie., plain text, JSON, and JSONP format. There are loads of them available on the internet. Here, 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 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" 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:
Getting the user’s Public IP address
Example 2: In this example, we are going to use the ipinfo to get the client’s IP address in an alert box.
HTML
<!DOCTYPE html><html> <head>    <title>Getting Clients IP</title>         <style>    h1 {        color: green;    }    </style>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">    </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:
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.
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
bhaskargeeksforgeeks
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?