Exploring the different methods to obtain your public IP address on the web with JavaScript is a process that may surprise you with its simplicity and power. Below, I will guide you through several techniques that will allow you to recover this crucial data for different web applications.
What is a public IP address and what is it for?
The public IP address is like the identification number of your Internet connection. Each device connected to the global network has a unique IP address, which makes it distinguishable and traceable in the vast digital ocean. It is essential for communication between servers and clients, and is used in a multitude of processes, from location tracking to implementing geolocation-based restrictions. But how can you get it using JavaScript? Let's see.
Using WebRTC API to get local IP address
WebRTC (Web Real-Time Communication) is a technology that facilitates real-time communication through web browsers. With it, you can acquire the local IP address of a user, but be careful not to confuse it with the public IP; The latter is the one that will be visible on the Internet.
To obtain the IP with WebRTC, you would use code like the following:
const getLocalIP = () => { window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection; if (window.RTCPeerConnection) { const pc = new RTCPeerConnection(); pc.createDataChannel(''); pc.createOffer().then(pc.setLocalDescription.bind(pc)); pc.onicecandidate = (ice) => { if (!ice || !ice.candidate || !ice.candidate.candidate) return; const myIP = /([0-9]{1,3}(.[0-9]{1,3}){3})/.exec(ice.candidate.candidate)[1]; console.log('Your local IP address is:', myIP); pc.onicecandidate = () => {}; }; } }; getLocalIP();External APIs to discover your public IP
A simpler way to get the public IP is through external services that provide APIs for this purpose. Some popular examples include ipify y ip-api. These services offer a fast and accurate response through a simple HTTP GET request that you can execute with fetch in JavaScript:
fetch('https://api.ipify.org?format=json') .then(response => response.json()) .then(data => console.log('Your public IP address is:' ;, data.ip)) .catch(error => console.error('There was an error getting the IP:', error));It is key to mention that when using external services you must be aware of the privacy of your users, and also of the limitations of the service, such as the number of requests allowed per hour or day.
Using the Location API to add context
If you need more than just a public IP address and are looking to obtain geolocation data for that IP, you can combine the IP API information with a geolocation API:
fetch('https://api.ipify.org?format=json') .then(response => response.json()) .then(data => { const ip = data.ip; return fetch(`https ://ip-api.com/json/${ip}`); }).then(response => response.json()) .then(locationData => console.log('Location data:' , locationData)) .catch(error => console.error('There was an error getting the location:', error));By doing this, you could obtain both the public IP address and the city, country, and even the user's Internet service provider. Be careful when handling this information due to data protection legislation such as GDPR or CCPA.
Creating your own backend server to obtain the IP
If you prefer not to rely on third-party services, you can configure your own backend server to capture and send the client's public IP address. This is possible because when a user makes a request to your server, their public IP address is included in the HTTP request header.
A simple backend in Node.js using Express might look like this:
const express = require('express'); const app = express(); app.get('/getMyIP', (req, res) => { const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress; res.send({ ip: ip }); const PORT = process.env.PORT || 3000; app.listen(PORT, () => { console.log(`Server running on port ${PORT}`); });With this service configured, you could make a request from the frontend similar to those mentioned above to obtain the IP through the endpoint you have exposed.
Precautions and best practices
It is crucial to remember that when handling IP addresses and potentially personal data, you must adhere to data protection laws and respect the privacy of your users. Informing users about the collection of their data and obtaining their consent is mandatory in many jurisdictions.
Conclusion
Obtaining a public IP address with JavaScript is a relatively simple operation using the methods described here. From using external services to creating your own backend, the options are varied and depend on your needs and privacy considerations.
Remember to visit NelkoDev for other useful tips and tutorials, and feel free to contact me via this link if you have questions or need help with your web development projects. Keeping up to date with best practices and development ethics is essential in this field, and it's always a pleasure to help along that path.
English 
Spanish