Как получить локальный IP-адрес пользователя на Javascript
02.09.2018
/
oberset
Javascript не позволяет напрямую получить локальный IP-адрес клиента в браузере, но для этого можно воспользоваться интерфейсом HTML5 RTCPeerConnection. На данный момент использовать RTCPeerConnection API для получения клиентского IP можно только в браузерах Chrome и Firefox. Для IE всех версий и Safari эта возможность недоступна.
Чтобы получить реальный IP клиентской машины, нужно создать в браузере WebRTC-соединение между локальным компьютером и «фиктивным» удаленным одноранговым узлом.
Вот пример кода на Javascript: const getUserIP = (onNewIP) => {
const myPeerConnection =
window.RTCPeerConnection ||
window.mozRTCPeerConnection ||
window.webkitRTCPeerConnection;
const pc = new myPeerConnection({
iceServers: []
});
const noop = () => {};
const localIPs = {};
const ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;
const iterateIP = (ip) => {
if (!localIPs[ip]) onNewIP(ip);
localIPs[ip] = true;
};
let key;
pc.createDataChannel('');
pc.createOffer().then(sdp => {
sdp.sdp.split('\n').forEach(line => {
if (line.indexOf('candidate') < 0) return;
line.match(ipRegex).forEach(iterateIP);
});
pc.setLocalDescription(sdp, noop, noop);
}).catch(reason => {
// Обработка ошибок
});
pc.onicecandidate = ice => {
if (!ice ||
!ice.candidate ||
!ice.candidate.candidate ||
!ice.candidate.candidate.match(ipRegex)) return;
ice.candidate.candidate
.match(ipRegex)
.forEach(iterateIP);
};
};
// Пытаемся получить IP
getUserIP(ip => console.log(`Local IP: ${ip}`));
Не стоит забывать про готовые решения, аналогичный пример кода можно найти на GitHub: https://github.com/diafygi/webrtc-ips.
В Windows текущий IP-адрес можно посмотреть, набрав в консоли команду ipconfig. В Linux/MacOS подойдут команды ifconfig или hostname -I.
Если требуется кроссбраузерное решение, доступное для IE и Safari, то опубликованный выше код не подойдет, вместо этого придется запрашивать IP-адрес с сервера.
Вот пример получения IP с помощью запроса на сервер:
$.getJSON('http://ipinfo.io', data => {
console.log(data);
});
Пример доступных серверов:
URL | Формат ответа | Данные ответа (IPv4) |
https://api.ipify.org | text | 11.111.111.111 |
https://api.ipify.org?format=json | json | {«ip»:»11.111.111.111″} |
https://api.ipify.org?format=jsonp | jsonp | callback({«ip»:»11.111.111.111″}); |
https://jsonip.com | json | {«ip»:»11.111.111.111″, … } |
Используя IP-адрес, возвращаемый сервером, нужно учитывать один важный момент: полученный адрес может отличаться от реального локального адреса машины пользователя. Например, если клиент для выхода в интернет использует прокси-сервер, вместо реального IP-адреса клиентской машины, нам может прийти IP-адрес этого прокси-сервера. Если несколько клиентов используют один общий прокси, то мы получим одинаковые IP-адреса для всех клиентов.
Метод reduce(callback, initialValue) возвращает результат функции callback, которая применяется к каждому элементу массива.
Функция debounce возвращает обертку, которая откладывает вызов исходной функции на определенное время. Пример собственной реализации функции debounce.
Примеры поиска значений в массиве с помощью методов find, findIndex, includes, every и других.