2

I'm building a react app and want to allow/deny access to some components based (mainly filter IP||MAC) on where the client is.

Any way to restrict routing to deny access to a presentation when the client is connecting from the internet allowing the access when it connects via LAN?

  • I think I found an alternative approach, I will maintain the question open looking for alternatives.
  • I read that the client should not be able to see its ip address (browser security), and that should be done on the server side (thats a direct approach as mentioned in the above post) (can anyone confirm that).
  • The solution is to find the gateway address of the client (normally using NAT) and compare with my gateway address, if equal they are inside LAN.
  • I am having a situation that on the computer I am able to see the ip address, on mobile/cellphone I can't, need to investigate.
    import React from 'react';

    export default () => {
      const [addrObj, setAddrObj] = React.useState({});
      const fetchAddrData = async () => 
          await fetch('http://jsonip.com')
            .then(res => res.json())
            .then(setAddrObj);

      React.useEffect(() => {fetchAddrData()},[])

      return (
        <>
         <h3>Sample Page</h3>    
         <h4>addr: {addrObj.ip}</h4>
        </>
      )
    }
mvcorrea
  • 101
  • 1
  • 8
  • [Does this help?](https://stackoverflow.com/questions/391979/how-to-get-clients-ip-address-using-javascript) – TKoL Nov 26 '19 at 17:28
  • tried to use https://www.npmjs.com/package/react-public-ip but only shows the public IP. If they connect via my Access Point I should see a private 192.168.* 172.16.* or 10.* right? or from a NATed address? The application is locally stored! – mvcorrea Nov 26 '19 at 17:38
  • What about an alternative approach of checking the URL that they're using? If they're connecting on the same network, the IP should be the local ip and if they're connecting remotely it should be different. Is that a good alternative? – TKoL Nov 26 '19 at 17:40
  • EG if someone connects to my node server while on my network, the ip might be `192.168.1.11` but if they connect externally it will be `81.100.266.155` – TKoL Nov 26 '19 at 17:41
  • The situation is that the app is running on the client, in this case It must be implemented on the server side, at least I think :). And yes thats what I wan to achieve(to get the public/private ip), but on the client. – mvcorrea Nov 26 '19 at 17:49
  • Do you know what the local IP address of your server is, when someone is on the same LAN as you? Is it static? – TKoL Nov 26 '19 at 17:58
  • If it is, then you could have a part of your app make a test request to the local IP, and if the request fails you know you're not on LAN. – TKoL Nov 26 '19 at 17:59
  • JS is easily changed by a user. You're better off doing this from withing the server using PHP for example. Is this possible in your case? Even then, people can use VPNs – JMRC Nov 26 '19 at 18:02
  • Yah I understand, but security is not a concern here I just to want to show more/less resource heavy content, then I go authenticating the user to restrict sensitive content. – mvcorrea Nov 26 '19 at 18:09
  • That could be a approach, trying to fetch a resource that is only available from LAN. I will make some tests. – mvcorrea Nov 26 '19 at 18:12

1 Answers1

1

From what I've just read, JS alone can't retrieve the IP address. You might want to store it to a JS variable in the <head> with PHP, like

<?php echo '<script>var ip = '.$_SERVER['REMOTE_ADDR'].'</script>' ?>

This way the IP address is available to your JS.

And this post can help you track the location, even though you might want to use PHP for that as well.

How to get client's IP address using JavaScript?

And if you really don't want to use PHP, than this article uses jQuery. It does a request though. I'm not sure how important performance is to you.

https://www.geeksforgeeks.org/how-to-get-client-ip-address-using-javascript/

How to get client's IP address using JavaScript?

JMRC
  • 1,473
  • 1
  • 17
  • 36