在浏览器中使用WebRTC获取用户IP地址

如果需要在程序中获取当前用户的IP，通常手段都是需要使用服务器。但现在借助WebRTC的强大功能，我们可以直接在浏览器客户端获取用户IP。

本文翻译自 Discover WebRTC: Obtain User IP Addresses in the Browser，作者：Zack，略有删改。
来源：南城大前端
原文：https://mp.weixin.qq.com/s/QI3YLDt5UYRIelUnUX_ouQ

什么是WebRTC

WebRTC是一个开源项目，通过简单的API为Web浏览器和移动的应用程序提供实时通信功能。WebRTC支持浏览器之间的音频、视频和数据流，允许开发人员构建视频聊天、文件传输和屏幕共享等应用程序，而无需依赖第三方插件或扩展。

WebRTC的关键组件

WebRTC由几个关键组件组成，这些组件共同提供实时通信：

getUserMedia：允许访问用户的网络摄像头和麦克风。
RTCPeerConnection：管理建立和维护对等点之间连接的整个过程。
RTCDataChannel：支持对等点之间的双向数据传输，允许低延迟通信。

WebRTC协议

WebRTC依赖于几种协议来建立和维护对等体之间的连接：
ICE（Interactive Connectivity Establishment）：通过NAT（Network Address Translators）和防火墙连接对等体的框架，ICE使用STUN和TURN服务器来发现和中继网络信息。
STUN（Session Traffic Utilities for NAT）：一种允许客户端发现其公有IP地址和所处NAT类型的协议。
TURN（使用NAT周围的中继进行传输）：为由于NAT限制或防火墙而无法建立直接连接的对等体提供中继服务器的协议。

使用WebRTC获取用户IP地址

需要注意的是，使用WebRTC获取用户IP地址可能会引发隐私问题。在收集任何信息（包括IP地址）之前，必须通知您的用户并征得他们的同意。

要使用WebRTC获取用户的IP地址，您可以利用ICE流程，该流程在对等点之间交换网络信息。在ICE过程中，浏览器收集本地IP地址并生成包含此信息的ICE候选。

创建RTCPeerConnection

开始获取用户IP地址的过程，请使用ICE服务器创建一个RTCPeerConnection：

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

const peerConnection = new RTCPeerConnection({ iceServers });

这个连接对象表示两个对等体之间的连接，负责管理数据交换。

“stun：stun.l.google.com：19302”是由Google提供的公共STUN服务器，它是一个高度可靠的免费公共STUN服务器。如果需要，您可以选择使用自己的STUN服务器。

创建数据通道

对于某些浏览器（如Chrome），创建数据通道是触发ICE进程所必需的。您可以使用createDataChannel方法创建数据通道：

peerConnection.createDataChannel("");

处理 ICE 候选项

监听onicecandidate事件以在生成ICE候选时收集IP地址：

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

触发ICE

调用createOffer和setLocalDescription方法触发ICE进程：

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

提取IP地址

一旦我们收集了ICE候选项，我们就可以从中提取用户的IP地址。每个ICE候选包含关于潜在网络路径的信息，包括IP地址和端口。

所以在onicecandidate中，我们可以创建一个正则表达式来提取IP地址，代码如下：

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();

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);
      }
    }
  }
};

完整代码

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();

  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((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);