Web-Tracing项目中前端IP获取的实践与思考-优快云博客

Web-Tracing项目中前端IP获取的实践与思考

【免费下载链接】web-tracing 为前端项目提供【埋点、行为、性能、异常、请求、资源、路由、曝光、录屏】监控手段项目地址: https://gitcode.com/gh_mirrors/we/web-tracing

前言：为什么前端需要获取用户IP？

在前端监控领域，获取用户真实IP地址是一个看似简单却充满挑战的技术问题。传统的后端IP获取方式在前端场景下往往失效，特别是在复杂的网络环境和隐私保护政策下。Web-Tracing项目作为一款全面的前端监控解决方案，其IP获取机制的设计思路值得深入探讨。

Web-Tracing的IP获取技术方案

WebRTC STUN协议技术原理

Web-Tracing采用了基于WebRTC（Web Real-Time Communication）的STUN（Session Traversal Utilities for NAT）协议技术来获取用户公网IP。这是一种相对可靠的前端IP获取方案：

mermaid

核心实现代码解析

Web-Tracing项目在packages/core/src/utils/getIps.ts中实现了完整的IP获取逻辑：

// WebRTC连接创建函数
function peer(callback: (candidate: string) => void) {
  const RTCPeerConnection = 
    window.RTCPeerConnection ||
    window.mozRTCPeerConnection || 
    window.webkitRTCPeerConnection;
  
  let connection: RTCPeerConnection;

  function createConnection() {
    connection = new RTCPeerConnection({
      iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
    });
    
    connection.onicecandidate = (event) => {
      if (event.candidate) {
        callback(event.candidate.candidate);
      }
    };
    
    connection.createDataChannel('fake_data_channel');
  }

  // ... 其他辅助方法
}

// 公网IP获取主函数
export function publicIPs(timeout?: number): Promise<string[]> {
  const ips: string[] = [];
  const peerConnection = peer((candidate) => {
    // 使用正则表达式从候选信息中提取IP
    for (const regex of ip_regex_array) {
      const matches = regex.exec(candidate);
      if (matches) {
        const validIPs = matches.filter(ip => is_ipv4(ip) || is_ipv6(ip));
        ips.push(...validIPs);
      }
    }
  });

  return new Promise((resolve, reject) => {
    peerConnection.start();
    
    setTimeout(() => {
      if (ips.length > 0) {
        resolve([...new Set(ips.flat(Infinity))]);
      } else {
        reject('No IP addresses were found.');
      }
      peerConnection.stop();
    }, timeout || 500);
  });
}

IP类型识别与分类

Web-Tracing不仅获取IP，还能智能识别IP类型：

IP类型	识别规则	用途
私有IPv4	`192.168.`, `10.`, `172.16-31.*`	内网环境识别
公网IPv4	非私有IPv4地址	用户真实公网IP
IPv6地址	IPv6格式匹配	未来网络兼容

function getIPTypes(timeout?: number): Promise<Array<{ip: string, type: string, IPv4: boolean}>> {
  return publicIPs(timeout).then(ips => {
    return ips.map(ip => {
      if (ip.match(/^(192\.168\.|169\.254\.|10\.|172\.(1[6-9]|2\d|3[01]))/)) {
        return { ip, type: 'private', IPv4: true };
      } else if (is_ipv6(ip)) {
        return { ip, type: 'IPv6', IPv4: false };
      } else {
        return { ip, type: 'public', IPv4: true };
      }
    });
  });
}

技术挑战与解决方案

1. 浏览器兼容性问题

不同浏览器对WebRTC的支持程度不同，Web-Tracing采用了多重fallback机制：

mermaid

2. 隐私保护限制

现代浏览器加强了隐私保护，对WebRTC的使用有诸多限制。Web-Tracing通过以下策略应对：

超时机制：默认500ms超时，避免长时间阻塞
错误处理：完善的异常捕获和降级处理
用户提示：在无法获取IP时提供明确的错误信息

3. 网络环境复杂性

在企业网络、代理等复杂环境下，IP获取可能不准确。Web-Tracing通过多级验证：

// IP地址验证正则表达式
const regex_v4 = /((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])/;
const regex_v6 = /((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))/;

实际应用场景

1. 用户行为分析

通过IP地址可以实现：

地域分布分析：了解用户地域分布
网络环境识别：识别企业网络、家庭网络等
异常行为检测：同一IP的异常操作模式识别

2. 安全监控

// 在sendData中的IP信息整合
const sendParams = {
  baseInfo: {
    ...baseInfo.base?.value,
    sendTime: getTimestamp(),
    userUuid: options.value.userUuid,
    // IP信息作为基础信息的一部分
    ipAddress: await getIPv4().catch(() => '')
  },
  eventInfo: events
};

3. 服务质量监控

结合IP信息可以分析：

CDN效果评估：不同地域的访问速度
网络问题定位：特定IP段的访问异常
服务容量规划：基于地域分布的容量规划

最佳实践建议

1. 隐私合规性

// 在使用IP获取前进行用户同意检查
if (options.value.enableIPCollection && userConsent.granted) {
  const userIP = await getIPv4().catch(() => 'unknown');
  // ... 使用IP信息
}

2. 性能优化

懒加载：仅在需要时获取IP信息
缓存机制：合理缓存IP结果，避免重复获取
超时控制：设置合理的超时时间，避免阻塞主流程

3. 降级方案

// 完整的IP获取降级策略
async function getSafeIP(): Promise<string> {
  try {
    const ips = await getIPv4(300); // 300ms超时
    return ips[0] || 'unknown';
  } catch (error) {
    console.warn('IP获取失败，使用降级方案');
    return 'unknown';
  }
}

未来展望

随着网络技术的发展和隐私保护要求的提高，前端IP获取技术也将不断演进：

新技术标准：如ICE（Interactive Connectivity Establishment）协议的更广泛应用
隐私增强技术：如差分隐私技术在IP收集中的应用
AI辅助分析：利用机器学习算法提高IP识别的准确性

结语

Web-Tracing项目在前端IP获取方面的实践为我们提供了一个优秀的技术范例。通过WebRTC STUN协议，它实现了相对准确的前端IP获取，同时在浏览器兼容性、隐私保护和性能优化方面都做了充分考虑。

在实际项目中，我们应该根据具体业务需求和法律要求，合理使用IP获取功能，既要发挥其价值，又要确保用户隐私得到充分保护。Web-Tracing的实现思路和技术方案值得我们在类似场景中借鉴和学习。

技术要点回顾：

WebRTC STUN协议是当前最可靠的前端IP获取方案
多重fallback机制确保浏览器兼容性
完善的错误处理和超时机制保障稳定性
隐私合规性是需要重点考虑的因素
合理的性能优化策略提升用户体验

通过深入理解Web-Tracing的IP获取机制，我们能够更好地在前端监控领域做出技术决策，构建更加完善和可靠的监控系统。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考