Discover WebRTC: Obtain User IP Addresses in the Browser

Simplify IP Address Retrieval with WebRTC in the Browser

If you need to obtain the current user’s IP in the program, then you usually need to use the server. But now with the power of WebRTC, we can directly obtain the user IP on the browser client.

What is WebRTC

WebRTC is an open-source project that provides web browsers and mobile applications with real-time communication capabilities via simple APIs. WebRTC enables audio, video, and data streaming between browsers, allowing developers to build applications such as video chat, file transfer, and screen sharing without relying on third-party plugins or extensions.

Key Components of WebRTC

WebRTC consists of several key components that work together to provide real-time communication:

• getUserMedia: Allows access to the user’s webcam and microphone.
• RTCPeerConnection: Manages the entire process of setting up and maintaining a connection between peers.
• RTCDataChannel: Enables bidirectional data transfer between peers, allowing for low-latency communication.

WebRTC Protocols

• WebRTC relies on several protocols to establish and maintain connections between peers:
• ICE (Interactive Connectivity Establishment): A framework for connecting peers through NATs (Network Address Translators) and firewalls, ICE uses STUN and TURN servers to discover and relay network information.
• STUN (Session Traversal Utilities for NAT): A protocol that allows clients to discover their public IP addresses and the type of NAT they are behind.
• TURN (Traversal Using Relays around NAT): A protocol that provides a relay server for peers that cannot establish a direct connection due to NAT restrictions or firewalls.

Using WebRTC to Obtain User IP Addresses

It’s important to note that using WebRTC to obtain user IP addresses may raise privacy concerns. It’s essential to inform your users and obtain their consent before collecting any information, including IP addresses.

To obtain a user’s IP address using WebRTC, you can leverage the ICE process, which exchanges network information between peers. During the ICE process, a browser gathers local IP addresses and generates ICE candidates containing this information.

Creating an RTCPeerConnection

To begin the process of obtaining the user’s IP address, create an RTCPeerConnection with ICE servers:

const iceServers = [
  {
    urls: "stun:stun.l.google.com:19302",
  },
];

const peerConnection = new RTCPeerConnection({ iceServers });

This connection object represents a connection between two peers and is responsible for managing the exchange of data.

The “stun:stun.l.google.com:19302” is a public STUN server provided by Google, which is highly reliable and a free, public STUN server. You can choose to use your own STUN server if desired.

Creating a Data Channel

Creating a data channel is necessary for some browsers, like Chrome, to trigger the ICE process. You can create a data channel using the createDataChannel method:

peerConnection.createDataChannel("");

Handling ICE Candidates

Listen for the onicecandidate event to collect the IP addresses when ICE candidates are generated:

peerConnection.onicecandidate = (event) => {
  console.log("RTC Peer Connection Ice Event:", event);
};

Triggering the ICE Process

Call the createOffer and setLocalDescription methods to trigger the ICE process:

peerConnection
  .createOffer()
  .then((offer) => peerConnection.setLocalDescription(offer))
  .catch((error) => console.error("Error creating offer:", error));

Extracting IP Addresses

Once we have gathered ICE candidates, we can extract the user’s IP addresses from them. Each ICE candidate contains information about a potential network path, including the IP address and port.

So in onicecandidate, we can create a regex to extract the IP address, the code is as follows:

const ipv4Regex =
  /\b((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/;

const ipv6Regex = /\b(?:[A-F0-9]{1,4}:){7}[A-F0-9]{1,4}\b/i;

const ipSet = new Set<string>();

const onicecandidate = (ice: RTCPeerConnectionIceEvent) => {
  const candidate = ice?.candidate?.candidate;

  if (candidate) {
    for (const regex of [ipv4Regex, ipv6Regex]) {
      const [ip] = candidate.match(regex) ?? [];
      if (ip) {
        ipSet.add(ip);
      }
    }
  }
};

Completed version

const ipv4Regex =
  /\b((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/;

const ipv6Regex = /\b(?:[A-F0-9]{1,4}:){7}[A-F0-9]{1,4}\b/i;

// prettier-ignore
// @ts-expect-error
globalThis.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection

const publicIPs = (timeout = 1000) => {
  const ipSet = new Set<string>();

  const onicecandidate = (ice: RTCPeerConnectionIceEvent) => {
    const candidate = ice?.candidate?.candidate;

    if (candidate) {
      for (const regex of [ipv4Regex, ipv6Regex]) {
        const [ip] = candidate.match(regex) ?? [];
        if (ip) {
          ipSet.add(ip);
        }
      }
    }
  };

  return new Promise<string[]>((resolve, reject) => {
    const conn = new globalThis.RTCPeerConnection({
      iceServers: [
        {
          urls: 'stun:stun.l.google.com:19302',
        },
      ],
    });
    conn.addEventListener('icecandidate', onicecandidate);
    conn.createDataChannel('');
    conn.createOffer().then((offer) => conn.setLocalDescription(offer), reject);

    setTimeout(() => {
      try {
        conn.removeEventListener('icecandidate', onicecandidate);
        conn.close();
      } catch {
        // ignore
      }

      resolve([...ipSet]);
    }, timeout);
  });
};

publicIPs().then(console.log);

In the full version, I added the global compatibility code for RTCPeerConnection. Then, considering some network factors, you may need to set a timeout, so I set a default timeout of 1s here.

Limitations and Privacy Concerns

While the WebRTC method is effective in obtaining IP addresses, it has certain limitations and raises privacy concerns:

Network Restrictions

Some networks and browsers may restrict WebRTC functionality for privacy and security reasons. In such cases, the method may not work as intended.

Privacy Concerns

Using WebRTC to obtain IP addresses can be considered a privacy issue. Always ensure that you inform your users about your intentions and obtain their consent before collecting IP addresses.

Alternative Methods

In addition to WebRTC, you can use other methods to obtain a user’s IP address. However, these methods may also have limitations and privacy concerns:

HTTP Request

If you have control over a server-side application, you can obtain the user’s IP address from the HTTP request headers. Most web server frameworks provide an easy way to access this information. However, this method may not work correctly if the user is behind a proxy or VPN.

Third-Party APIs

You can use third-party IP address lookup services, such as ipify or ip-api, to obtain a user’s IP address. These services usually provide a simple RESTful API to fetch the user’s IP address in JSON format. Note that relying on third-party services can lead to privacy concerns and potential service disruptions if the provider experiences downtime or rate limiting.

Conclusion

WebRTC is a powerful technology that enables real-time communication between web browsers. It can also be used to obtain user IP addresses, which can be useful in certain scenarios. However, it is crucial to consider the limitations and privacy concerns associated with this method. Please always inform your users about your intentions and obtain their consent before collecting any personal information, including IP addresses.

Thanks for reading. If you like such stories and want to support me, please consider becoming a Medium member. It costs $5 per month and gives unlimited access to Medium content. I’ll get a little commission if you sign up via my link.