Today, we’re going to dive into the details of how to get an IP address, no matter what situation or setup you have. Whether you need the IP in a browser or the IP of your server this post will answer your questions.
We’ll even go one step further to show you how you can enrich your IP data to get additional details about your IP that you may need to build your application features.
By the end of this post, you’ll understand how to get a user’s IP address on a browser, a request IP in a server, or an IP of your a server.
The Three IPs
- The browser: You need the IP address of a user on your front-end application to show country-specific information, local weather, or other details.
- The request: You need the IP address from a given request to your back-end to block (or allow) a certain IP address.
- The server: You need the IP of the actual server the application code is running on for logging or debugging.
Let’s go through each scenario in turn. From there, we’ll find a solution that works for your situation.
1. Retrieving an IP in the Browser
Let’s take the first scenario, in which you need to access a user’s IP in the browser.
How do we go about doing that?
Unfortunately, the short answer is…it’s not simple. But why not? The reason is that a traditional browser request doesn’t return any user IP data, and there’s no foolproof way of retrieve the user’s IP while on a browser.
Now, I know what you’re thinking: “Urgh, really?” But yes, you’re just going to have to trust me on this one. You’ll find some hacks if you scour the internet—but they don’t work consistently. The reality is that we’re going to need some server-side help. Fortunately, we have a few options.
Our two main options are to use an existing web service or to modify our own server. Each approach has its own advantages and trade-offs, so let’s go through those to see which one suits your needs.
Option 1: Use an Existing Service
Some unpaid IP APIs will return you the IP address of the caller (your browser) when you make a request to them. For instance, this is what would happen in the below example, where we’re calling a CloudFlare API in order to retrieve the browser’s own IP. The browser’s IP can be then used for processing.
You can run the above code in your application (by copying it into a file with the extension .html and opening it in your browser). But be warned that this code is not a long-term solution—there are a couple of downsides to consider when using a third-party service like CloudFlare’s API. What do I mean? Let me explain.
Firstly, the API response is not in your control. In CloudFlare’s example, the response is plain text, and CloudFlare maintains no official contract. Not having an official API contract means that CloudFlare’s API is subject to breaking at a moment’s notice.
Secondly, not only could the contract break, but the API service also could start denying your requests. If CloudFlare sees a lot of requests coming from your application, they’re likely to start blocking them to protect their system. Third-party APIs have no obligation to ensure that their API is working for you.
So, if the above example works for you but you need a foolproof solution that’s production ready, you’re going to need to make some server changes yourself. Which brings us to our second option.
Option 2: Modify Your Own Server
The alternative to using a service such as CloudFlare’s API is to use a paid IP service that has an SLA and assurance that the contract won’t change and the API won’t be taken down.
But before you go ahead thinking “Perfect, sign me up!,” there’s one thing to consider: Paid APIs usually grant access via an API key (or some form of similar authentication). You don’t want to expose your API key in the browser, as anyone could then copy the key for their own use.
With that in mind the following snippet will show, for demonstration purposes only, how you can call out to an external web service and receive back a response with an IP address. For the example, we’re using ipdata.co.
To protect your API key, you’ll want to set up a proxy server that calls the paid API from your server on your behalf. Having a proxy ensures that the API key is hidden and that only your application can make requests to the paid service.
That covers the ways that you can get an IP on a browser, but what if you’ve got an application that’s rendered on the server? Or what if you have an API that needs to access an IP? Let’s take a look at that now.
2. Retrieving a Server Request IP
Getting an IP address on the back end is a different ball game from accessing an IP on the back end. Why? Accessing the IP on the back end requires knowledge about how you’ve got your server setup. The below code example caters to the different server setups that you might have. Let’s take a look at the different server setups and how you can get the IP in the different situations.
The most likely place you’ll find the IP on the server is in the x-forwarded-for header, which most load balancers use when forwarding requests to an application server. If the IP address is not in the header, it might be found from the request connection object or from the socket details (if the request originates from a socket). The code above creates a Node.js API, which checks finds the IP from the correct source and returns the found IP as an API response.
Now let’s take a look at the last scenario, in which you need to access the IP of your application server.
3. Retrieving the Application Server IP
Accessing your own server IP is useful for reporting issues related to that specific server such as downtime or failed requests to an instance. And getting your own IP address while on your own server is more straightforward since the IP won’t likely come from multiple places as it did for our user requests.
You can use the snippet above to grab all your network interfaces of the server you’re running on. Depending on which network interfaces you’re using, you’ll find your IP within the response from the network interfaces method.
However, since the IPs given in the network interfaces method are often private network IPs, if you want the public IP you may want to implement a solution as discussed in section 1 that calls out to the public internet.
The specifics of why these network interface values might not be your public IP, and therefore potentially not what you’re after, is too big of a question to answer comprehensively in today’s post. But I’ll give you the short answer: The addresses returned from the network interfaces method are usually private IPs, and privately networked addresses are not on the public internet, so only computers in that network can access them.
Enriching Your IP Data
By running an IP through an external service such as IPData. you can get enriched data about that IP address. You can then use that information to do things like perform re-routing based on country, block malicious IP addresses, and more.
If you want to get started, you can set up an account for free—it takes a couple of minutes to get an API key and then experiment with the API to see what it can do for you.
We have several options. We can format the address either on the back-end after the form has been submitted. Or we can format it on the front end via a separate text field for each character pair, but that is too many fields to handle. A better solution is to use a single field and format the user input at the time of input or upon submit. In those cases, the former is better because the data will already be formatted when the overall form input is being validation after the user clicks the “Submit” button.
We are going to format the user input as it is being provided, thus having proper data when validated upon submit; when the request is being processed on the back-end; and in the resulting support ticket.
Out function is going to perform the following actions:
- Receive the user input as the form field object. I will explain below.
- Change all letters from the object value to upper case.
- If said value string is less than a complete MAC address (17 characters):
- Remove all non-alphanumeric characters. This is going to remove any delimiters the user might use.
- Append a colon (:) after every second character.
- Update the field value with the new string.
Below is one way to implement the MAC address formatting script.
* As of this writing Microsoft announced within the last week that with their upcoming Xbox One update they are going to enable support for Wi-Fi authentication via the Xbox web browser.