Как получить IP-адрес клиента только с помощью Javascript?

Javascript не может получить (и не хранить где-нибудь) IP-адрес клиента, однако javascript способен создавать запросы Http, а языки на стороне сервера могут извлекать общедоступный IP-адрес пользователя, поэтому вы можете использовать это как преимущество. Другими словами, если вы хотите получить публичный IP-адрес пользователя, вы будете зависеть от запроса к любому серверу для получения IP-адреса. Однако с введением WebRTC вы сможете получить частный IP-адрес пользователя с помощью хитрости, используя RTCPeerConnection.

В этой статье вы узнаете, как легко получить IP-адрес пользователя (частный с использованием чистого JavaScript и общедоступный с использованием стороннего сервиса) с помощью нескольких приемов.

Использование webRTC (получить приватный IP)

Интерфейс RTCPeerConnection позволяет вам создать соединение WebRTC между вашим компьютером и удаленным узлом. Тем не менее, мы собираемся создать его «interrupted» версию, чтобы получить IP-адрес клиента, используя только javascript.

Метод createOffer инициирует создание протокола описания сеанса (SDP), который предоставляет информацию о любых MediaStreamTracks, подключенных к сеансу WebRTC, сеансу, кодам и любым кандидатам, уже собранным агентами ICE (который содержит нашу цель, IP).

В более старых версиях этот метод использует обратные вызовы. Однако теперь возвращаем значение, основанное на Promise, которое возвращает информацию, которая нам нужна, когда она заполнена:

Примечание: чистая реализация javascript вернет клиенту частный IP, а не публичный.

/**
 * Get the user IP throught the webkitRTCPeerConnection
 * @param onNewIP {Function} listener function to expose the IP locally
 * @return undefined
 */
function getUserIP(onNewIP) { //  onNewIp - your listener function for new IPs
    //compatibility for firefox and chrome
    var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
    var pc = new myPeerConnection({
        iceServers: []
    }),
    noop = function() {},
    localIPs = {},
    ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
    key;

    function iterateIP(ip) {
        if (!localIPs[ip]) onNewIP(ip);
        localIPs[ip] = true;
    }

     //create a bogus data channel
    pc.createDataChannel("");

    // create offer and set local description
    pc.createOffer().then(function(sdp) {
        sdp.sdp.split('\n').forEach(function(line) {
            if (line.indexOf('candidate') < 0) return;
            line.match(ipRegex).forEach(iterateIP);
        });
        
        pc.setLocalDescription(sdp, noop, noop);
    }).catch(function(reason) {
        // An error occurred, so handle the failure to connect
    });

    //listen for candidate events
    pc.onicecandidate = function(ice) {
        if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
        ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
    };
}

// Usage

getUserIP(function(ip){
    alert("Got IP! :" + ip);
});

getUserIP. Метод ожидает в качестве первого параметра функцию, которая будет вызываться, когда IP-адрес клиента доступен. Обратные вызовы получают строку (ip) в качестве первого (и уникального) параметра. Вы можете увидеть предыдущий фрагмент в действии через JSFiddle:

/**
 * Get the user IP throught the webkitRTCPeerConnection
 * @param onNewIP {Function} listener function to expose the IP locally
 * @return undefined
 */
function getUserIP(onNewIP) { //  onNewIp - your listener function for new IPs
    //compatibility for firefox and chrome
    var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
    var pc = new myPeerConnection({
        iceServers: []
    }),
    noop = function() {},
    localIPs = {},
    ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
    key;

    function iterateIP(ip) {
        if (!localIPs[ip]) onNewIP(ip);
        localIPs[ip] = true;
    }

     //create a bogus data channel
    pc.createDataChannel("");

    // create offer and set local description
    pc.createOffer(function(sdp) {
        sdp.sdp.split('\n').forEach(function(line) {
            if (line.indexOf('candidate') < 0) return;
            line.match(ipRegex).forEach(iterateIP);
        });
        
        pc.setLocalDescription(sdp, noop, noop);
    }, noop); 

    //listen for candidate events
    pc.onicecandidate = function(ice) {
        if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
        ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
    };
}

// Usage

getUserIP(function(ip){
  document.getElementById("ip").innerHTML = 'Got your IP ! : '  + ip + " | verify in http://www.whatismypublicip.com/";
});

Использование стороннего сервиса (получить публичный IP)

Если вам необходимо обеспечить поддержку кросс-браузерной работы, вы не сможете использовать RTCPeerConnection для получения частного IP-адреса вашего клиента, поэтому единственный ресурс, который у вас есть, это зависеть от внешней службы (запроса к серверу, сторонней службы или вашего Автореализованный сервис на вашем собственном сервере).

Неправильные соединения HTTP

Чтобы получить IP-адрес пользователя с веб-сайта без SSL-сертификата, вы можете положиться на ipinfo.io. Этот сервис предлагает API для получения IP-адреса клиента с помощью простого вызова ajax:

$.getJSON('http://ipinfo.io', function(data){
    console.log(data);
});

Полученный объект данных содержит информацию о локализации, такую как: страна, город и т. Д., Если они доступны. Серверы ipinfo используют DNS-маршрутизацию с задержкой для максимально быстрой обработки запроса. Узнайте больше о ipinfo на официальном сайте здесь.

Безопасные соединения HTTPS

Чтобы получить IP-адрес пользователя с веб-сайта даже на защищенных веб-сайтах с SSL, вы можете использовать сервис ipify, который предоставляет дружественный API, чтобы легко получить IP-адрес пользователя. Эта услуга не имеет ограничений по запросу.

Вы можете использовать его в своем проекте, запрашивая API (с параметром format, если вам нужно), и вы готовы к работе.

Вы можете использовать его с JSONP:

<script type="application/javascript">
  function getIP(json) {
    document.write("My public IP address is: ", json.ip);
  }
</script>

<script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP"></script>

Или получить объект с помощью запроса json, используя jQuery:

$.getJSON('https://api.ipify.org?format=json', function(data){
    console.log(data.ip);
});

Кроме того, вы можете создать, если у вас есть собственный сервер, и вы можете работать на нем, создать свой собственный частный сервис, который возвращает IP-адрес пользователя с языком сервера, таким как PHP, ASP.NET и т.д.