如何使用 JavaScript 在不同浏览器环境下获取用户的 IP 地址_如何使用 JavaScript 获取用户的 IP 地址并将其用于防止 CSRF 攻击

利用 RTCPeerConnection API 可以在大多数现代浏览器中获取用户的 IP 地址。这个 API 最初是为WebRTC开发的,但也可用于获取用户IP地址。

function getIPAddress() {
  return new Promise((resolve, reject) => {
    const pc = new RTCPeerConnection({
      // 默认 STUN 服务器
      iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
    });
    pc.createDataChannel(''); // 创建数据通道
    pc.createOffer(pc.setLocalDescription.bind(pc), reject);
    pc.onicecandidate = event => {
      if (event.candidate) {
        const ip = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/.exec(event.candidate.candidate)[1];
        pc.onicecandidate = null;
        pc.disconnect();
        resolve(ip);
      }
    };
  });
}

另一种常见的方式是通过发送 HTTP 请求到服务端,由服务端返回用户的 IP 地址。这种方式可以在几乎所有的浏览器环境下使用。

function getIPAddress() {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.ipify.org?format=json');
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText).ip);
      } else {
        reject(xhr.status);
      }
    };
    xhr.onerror = () => {
      reject(xhr.status);
    };
    xhr.send();
  });
}

获取用户的 IP 地址可用于防范CSRF攻击。在用户发送请求时,可以将用户的 IP 地址信息作为表单字段或请求头发送到服务端。服务端在验证请求时,检查 IP 地址是否与之前存储的一致,从而判断该请求是否来自同一个用户。