JavaScriptを使用してウェブページの訪問者のIPアドレスを取得する方法
こんにちは!
ウェブアプリやウェブサイトの訪問者IPアドレスを知りたいと思ったことありませんか。
ウェブサイトに悪意のあるIPがコンテンツにアクセスするのをブロックするにはすごく便利です。
「シンプルで統合しやすいJavaScriptスニペットを使用して、Webサイトの訪問者のIPアドレスを取得する方法」を紹介します。
訪問者のIPアドレスを取得する最も簡単な方法は以下に二つになります。
1. diafygiのオープンソースWebRTCメソッドを使用。
2. シンプルで無料のIPジオロケーションAPIを使用
今回は「WebRTCのSTUN IPアドレス要求」について書きます。
このコードスニペットは、STUNサーバーのリクエストを可能にするChromeとFirefoxで新しくリリースされたWebRTCサポートに基づいており、訪問者のローカルIPアドレスとパブリックIPアドレスにアクセスすることができます。
これらの要求を簡単に実行し、ページの他の部分でIPデータを利用できるようにして、分析し、カスタマイズまたはブロックするに使用できます。
これらの呼び出しはXMLHttpRequestインスタンスの外部で行われるため、広告ブロックプラグインとウィジェットによってブロックできません。
インターネットユーザーの20〜30%がAdblockerを使用して閲覧していることを考えると、これは、すべてのユーザーに一貫したエクスペリエンスを保証したい場合に最適です。
次のコードをコピーしてWebページに貼り付けます。
//アカウントに関連付けられたIPアドレスを取得します
function getIPs(callback) {
var ip_dups = {};
// FirefoxとChromeの互換性
var RTCPeerConnection =
window.RTCPeerConnection ||
window.mozRTCPeerConnection ||
window.webkitRTCPeerConnection;
var useWebKit = !!window.webkitRTCPeerConnection;
// iframeを使用して単純なwebrtcブロッキングをバイパスします
if (!RTCPeerConnection) {
var win = iframe.contentWindow;
RTCPeerConnection =
win.RTCPeerConnection ||
win.mozRTCPeerConnection ||
win.webkitRTCPeerConnection;
useWebKit = !!win.webkitRTCPeerConnection;
}
//データ接続の最小要件
var mediaConstraints = {
optional: [{ RtpDataChannels: true }],
};
var servers = { iceServers: [{ urls: "stun:stun.services.mozilla.com" }] };
//新しいRTCPeerConnectionを構築します
var pc = new RTCPeerConnection(servers, mediaConstraints);
function handleCandidate(candidate) {
// IPアドレスのみを照合します
var ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/;
var ip_addr = ip_regex.exec(candidate)[1];
//重複を削除する
if (ip_dups[ip_addr] === undefined) callback(ip_addr);
ip_dups[ip_addr] = true;
}
//候補イベントを聞く
pc.onicecandidate = function(ice) {
//候補以外のイベントをスキップ
if (ice.candidate) handleCandidate(ice.candidate.candidate);
};
//偽のデータチャネルを作成する
pc.createDataChannel("");
//オファーsdpを作成する
pc.createOffer(
function(result) {
//スタンサーバーリクエストをトリガーします
pc.setLocalDescription(
result,
function() {},
function() {}
);
},
function() {}
);
//しばらく待ってからすべてを完了させます
setTimeout(function() {
//ローカルの説明から候補者情報を読み取ります
var lines = pc.localDescription.sdp.split("\n");
lines.forEach(function(line) {
if (line.indexOf("a=candidate:") === 0) handleCandidate(line);
});
}, 1000);
}
//テスト:IPアドレスをコンソールに出力します
getIPs(function(ip) {
console.log(ip);
});
次回は
「シンプルで無料のIPジオロケーションAPIを使用方法」について