Open In App

How to get client IP address using JavaScript?

Last Updated : 21 Jun, 2025
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

Knowing a client's IP address can be useful for various purposes like personalizing content, tracking user activity, or offering location-based services. However, JavaScript running in the browser doesn’t have direct access to this information due to security reasons.

Using External APIs to Get the Client's IP Address

To overcome the limitation of JavaScript not being able to directly access the client's IP address, we use external APIs. These APIs handle the request and return the IP address to the client.

Some popular APIs include ipify and IPinfo:

1. Using ipify to Get the Client's IP Address

We can easily retrieve the client's IP address by using the ipify API. The getJSON() method of jQuery allows you to fetch the user's IP address for websites served over HTTPS (SSL-secured).

HTML 
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Getting Client's IP</title>
    <style>
        p, h1 {
            color: green;
        }
    </style>
</head>
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h3>Public IP Address of user is:</h3>
        <p id="ip-address"></p>
    </center>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            fetch("https://api.ipify.org?format=json")
                .then(response => response.json())
                .then(data => {
                    document.getElementById("ip-address").textContent = data.ip;
                })
                .catch(error => {
                    console.error("Error fetching IP address:", error);
                });
        });
    </script>
</body>

</html>

Output:

Getting the user's Public IP address

In this example

  • The page sends a request to the ipify API to get the user’s public IP address.
  • The IP address is displayed in the paragraph (<p>) when the page loads.
  • If there’s an error, it logs the error in the console.

2. Using IPinfo to Get the Client's IP Address

Similarly, we can use the IPinfo API to get the client's IP address. Using jQuery's get() method, you can pass a callback function to handle the response.

HTML 
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Getting Client's IP</title>
    <style>
        div {
            text-align: center;
        }

        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <div>
        <h1>GeeksforGeeks</h1>
        <h3>Getting Client IP Address</h3>
        <p id="ip-address"></p>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            fetch("https://ipinfo.io/json") 
                .then(response => response.json())
                .then(data => {
					document.getElementById("ip-address").textContent = 
                      	`IP Address: ${data.ip}`;
                })
				.catch(error => {
					console.error("Error fetching IP address:", error);
					document.getElementById("ip-address").textContent = 
                      	"Unable to retrieve IP address.";
                });
        });
    </script>
</body>

</html>

Output:

In this example

  • The HTML page has a heading and a paragraph to display the IP address.
  • JavaScript sends a request to IPinfo API to get the client’s IP address.
  • If successful, the IP address is shown in the paragraph.
  • If there’s an error, an error message is displayed instead.
  • The content is updated once the page is fully loaded.

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

Why Can’t JavaScript Access the Client’s IP Address Directly?

Here is the some reasons :

  • JavaScript runs in a sandbox with limited access.
  • It protects against security vulnerabilities.
  • Prevents unauthorized data collection.
  • Safeguards user anonymity and privacy.

Security and Privacy Concerns

  • Privacy Risks: Exposing a user’s IP address can compromise their privacy, as it can be used to track or profile them across different websites.
  • Misuse Potential: Without proper controls, IP addresses can be misused for activities like targeted advertising or malicious attacks.
  • Legal Requirements: Regulations like GDPR and CCPA require websites to obtain explicit consent from users before collecting personal information like their IP address.
  • Use of VPNs/Proxies: Many users mask their real IP address using VPNs or proxies, which can make the IP address unreliable for accurate tracking or location identification.

Conclusion

JavaScript can't directly access the client's IP address due to privacy and security reasons. To get this information, developers use third-party APIs like ipify and IPinfo, which securely provide the client's IP. While these APIs are simple to use, it’s important to respect privacy regulations and ensure data protection when handling IP addresses.


Next Article
How to get client IP address using JavaScript?

A
abhishek7
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox