js

[JS] 자바스크립트에서 IP 주소를 가져오는 방법

2월 03, 2025

클라이언트나 서버의 IP 주소를 검색하는 것은 웹 개발에서 일반적인 요구 사항으로, 분석, 보안 및 사용자 경험 맞춤화에 유용합니다.

여기에서는 JavaScript에서 IP 주소를 가져오는 다양한 기술을 살펴보고, 정확하고 효율적인 IP 주소 검색을 위한 방법을 살펴 봅니다.


IP 주소 검색 이해

IP 주소는 클라이언트 측이나 서버 측에서 검색할 수 있습니다. 브라우저의 클라이언트 측 JavaScript는 보안상의 이유로 클라이언트의 IP 주소에 직접 액세스할 수 없지만 외부 API를 사용하여 가져오는 방법이 있습니다.

Node.js와 같은 서버 측 JavaScript는 요청 객체에서 IP 주소에 직접 액세스할 수 있습니다.


1. 외부 API를 사용한 클라이언트 측 IP 검색

브라우저 기반 JavaScript는 클라이언트의 IP 주소에 직접 액세스할 수 없으므로, 외부 API를 사용하여 정보를 가져올 수 있습니다.

먼저, Fetch API를 지원하지 않는 이전 브라우저에 대한 Fetch Polyfill을 포함시킵니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get IP Address</title>
</head>
<body>
    <button onclick="getIP()">Get IP Address</button>
    <p id="ip"></p>

    <script>
        async function getIP() {
            try {
                const response = await fetch('https://api.ipify.org?format=json');
                const data = await response.json();
                document.getElementById('ip').innerText = `Your IP Address: ${data.ip}`;
            } catch (error) {
                console.error('Error fetching IP address:', error);
            }
        }
    </script>
</body>
</html>

ipinfoAPI 예제는 아래와 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get IP Address</title>
</head>
<body>
    <button onclick="getIP()">Get IP Address</button>
    <p id="ip"></p>

    <script>
        async function getIP() {
            try {
                const response = await fetch('https://ipinfo.io/json?token=YOUR_TOKEN_HERE');
                const data = await response.json();
                document.getElementById('ip').innerText = `Your IP Address: ${data.ip}`;
            } catch (error) {
                console.error('Error fetching IP address:', error);
            }
        }
    </script>
</body>
</html>


2. Node.js를 사용한 서버 측 IP 검색

서버 측에서는 요청 객체에서 클라이언트의 IP 주소에 쉽게 액세스할 수 있습니다. Express.js와 같은 프레임워크를 사용하면 이 프로세스가 간소화됩니다.

먼저 Express.js를 설치하세요.

npm install express

그런 다음 클라이언트의 IP 주소를 검색하기 위한 간단한 Express 서버를 만듭니다.

const express = require('express');
const app = express();

app.get('/get-ip', (req, res) => {
    const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
    res.json({ ip });
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});


3. 클라이언트 측 IP 검색을 위한 WebRTC 사용

WebRTC는 로컬 IP 주소를 가져오는 데 사용할 수 있습니다. 그러나 이 방법은 공용 IP 주소에 대해 신뢰할 수 없으며 일반적으로 더 복잡합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Local IP Address</title>
</head>
<body>
    <button onclick="getLocalIP()">Get Local IP Address</button>
    <p id="ip"></p>

    <script>
        function getLocalIP() {
            const pc = new RTCPeerConnection({ iceServers: [] });
            pc.createDataChannel('');
            pc.createOffer(pc.setLocalDescription.bind(pc), () => {});

            pc.onicecandidate = (ice) => {
                if (ice && ice.candidate && ice.candidate.candidate) {
                    const myIP = /([0-9]{1,3}(\.[0-9]{1,3}){3})/.exec(ice.candidate.candidate)[1];
                    document.getElementById('ip').innerText = `Local IP Address: ${myIP}`;
                    pc.onicecandidate = () => {};
                }
            };
        }
    </script>
</body>
</html>

출처: https://medium.com/@ryan_forrester...

Tag:

0 Comments

0 댓글