Forum Academy Marketplace Showcase Pricing Features

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!

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.

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.