Как получить IP-адрес клиента только с помощью Javascript?
CodingJavascript не может получить (и не хранить где-нибудь) 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 и т.д.