A better way to get a users IP Address?

Every plugin I have tried such as “IP & Address Lookup by Zeroqode” or “Ipiphy by bubble” can be easily blocked by adblockers and browsers such as Brave because they are seen as cross-site trackers. Users using adblockers usually do not need to do anything for this to work, as most adblockers and indeed Brave block these plugins by default as cross-site trackers. I attempted to use “https://api.myip.com/” however that prompted a CORS issue from bubble which read as a 403 error. Since more and more people are using adblockers, is there anything more reliable I can do? I had planned to add VPN / Tor detection to my website, but there is not much point in this if IP’s can be so easily hidden by downloading almost any adblocker. Just looking for a better way to capture a users address. Thanks in advance!

3 Likes

Bump!

simple answer, no.

if a user wants to block you from seeing their ip, there is nothing you can do.

How is that even possible? The user is connecting to my server. Certainly the server must know what their IP address is.

I use a workaround now. When the IP comes up as empty I just display a popup that blocks them from accessing the site. Usually it’s only people using the browser “brave” so i just ask them to turn off their shield to continue.

Found a workaround! I set up a backend workflow, and set it to capture headers. I set it to return the requester’s IP address. Then I put a “when page loads” workflow on my pages and put a “run javascript” action in there that does a fetch to the backend workflow.

That gets you the user’s IP address, and doesn’t get hung up with CORS. It’s not perfect - sometimes it’ll return the IPv6 address, and I’m not exactly sure how to prevent that. But it works. Not sure if that’s clear enough. Let me know if not and I’ll elaborate.

4 Likes

Hello,

could you post a snippet of your solution & JS code?

Your JS on page load will look something like this

var xhr = new XMLHttpRequest();
xhr.open("POST", "the link to your bubble api workflow");
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onreadystatechange = function () {
   if (xhr.readyState === 4) {
  console.log(xhr.status);
  console.log(xhr.responseText);
   }};

var data = `{
  "Item1": 78322912,
  "Item2": "Example",
  "Item3": 5,
  "Item4": 70.00
}`;

xhr.send(data);

Then in your backend workflow “Parameter Definition” is set to “Detect request data” then in that same workflow you can save the information.

1 Like

@Drahgoone how did this script get the IP address? DO I need to make a call api.myip.com inside that?

If you selected “include headers in the detected data” it will be returned in the backend API’s call. You can then just call it like you would any other API, and use the action “return data from API” to give the IP as its response. Though you will need to use JS to have the client call it otherwise you will just get the servers IP which you dont want.

Screenshot_1

@Drahgoone how can I access the “return data from API” value?

Personally I use the plugin “‘Env’ Environment Variables (bdk)”

This will let you capture javascript variables, so in the javascript box where I do my POST request I also capture the headers, like below:

xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
var data=xhr.responseText;
var jsonResponse = JSON.parse(data);
window.setEnv("Response",jsonResponse.response.ip);
}};

The interesting thing is-

When i am testing on pc, it sends me the correct IP address but when I am trying over mobile and using mobile data, it is sending me “2401:4900:1687:6b47:1:1:f041:2e0” this IP address instead of regular one.

@Drahgoone

That is still an address, it’s just IPv6 instead of IPv4 which is probably what you are expecting. Should still work fine with any API’s like ProxyCheck

1 Like

@Drahgoone thanks a lot. Finally, solve it.

1 Like

Hey @Drahgoone thank you for your help

I’m just having a little trouble following this. so far I’m on this step but I can’t get beyond it. Also the code i added doesn’t trigger the workflow!?

And do i add the second code!? I can’t trigger the workflow like other workflow because the parameter is set to detect request data!?

hmmm i hopeful i can get more help from you

thank you

Hey @caseyfueller and @Drahgoone - your help will be much appreciated here.

Can you please share your back end work flow - which reads the IP address. Also how do I send the data back to the page after it is stored in the database.

Can you please share a video or a detailed break down of your workflow. Would be a lot of help.

So frustrating that there is no easy way to simply request an IP without throwing an error!

The solution described by @Drahgoone is appreciated but probably is beyond my abilities. I wish someone would build a proper plugin to get IP without throwing error