HOWTO · JavaScript
JavaScript에서 클라이언트 IP 주소 가져오기
브라우저 JavaScript가 ipify, ipinfo 또는 Abstract를 사용해 서비스가 관찰한 공용 IP 주소를 가져오는 방법을 알아보세요.
이 페이지의 내용
브라우저 JavaScript는 기기의 공용 IP 주소를 직접 읽을 수 없습니다. IP 조회 서비스에 요청을 보낼 수 있으며, 해당 서비스는 그 요청에 대해 관찰한 공용 주소를 보고합니다. 이는 로컬 네트워크에서 사용되는 사설 주소와 다릅니다. 이 요청은 방문자의 IP 주소를 타사 제공업체와도 공유하므로, 애플리케이션에 맞는 데이터 처리 방식을 갖춘 서비스를 선택하세요.
아래 예제는 최신 브라우저에서 사용할 수 있는 fetch를 사용합니다. 세 가지 제공업체를 다룹니다. IP만 포함된 응답에는 ipify, IP 및 위치 필드에는 ipinfo, 지리적 위치 데이터에는 Abstract를 사용합니다. 애플리케이션에 필요한 필드, 제공업체가 자격 증명을 요구하는지 여부, 자격 증명을 어떻게 보호할지를 기준으로 선택하세요. 이러한 요청은 방문자의 브라우저에서 실행되므로 제공업체는 방문자의 공용 IP를 봅니다. 제공업체의 가용성, 응답 필드 및 액세스 규칙은 변경될 수 있습니다. 배포 전에 제공업체의 최신 문서를 확인하세요.
ipify로 공용 IP 주소 가져오기
ipify는 https://api.ipify.org?format=json에 JSON 엔드포인트를 제공합니다. 응답에는 ip 속성이 포함됩니다. 이 예제는 해당 값을 읽어 표시합니다. ipify API 저장소에는 프로젝트 소스가 포함되어 있습니다.
// Use a representative response so the parsing path is deterministic.
globalThis.fetch = async () => ({
ok: true,
json: async () => ({ ip: '203.0.113.42' }),
});
(async () => {
try {
const response = await fetch('https://api.ipify.org?format=json');
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();
console.log(data.ip);
} catch (error) {
console.log('Could not retrieve the public IP:', error.message);
}
})();
203.0.113.42
요청은 JSON을 파싱하기 전에 HTTP 상태를 확인한 다음 ip 필드를 읽습니다. 실패하면 브라우저의 네트워크 패널에서 연결, 서비스 또는 콘텐츠 보안 정책 세부 정보를 검사하세요. 이 방법은 ipify가 관찰한 주소를 반환합니다. 기기의 사설 LAN 주소는 드러나지 않습니다. IP만 포함된 응답으로 충분하고 추가 위치 필드가 필요하지 않을 때 사용하세요.
ipinfo로 IP 및 위치 데이터 가져오기
ipinfo는 ip 필드를 반환하며 city, region, country, loc와 같은 위치 관련 필드를 제공할 수 있습니다. 예제는 대표적인 응답을 사용해 해당 필드를 읽는 방법을 보여줍니다. 로컬 fetch 대체는 데모가 네트워크 액세스와 독립적으로 동작하게 합니다. 실제 요청에서는 아래에 표시된 JSON 엔드포인트를 사용하세요. 사용 가능한 필드와 액세스는 요청 및 제공업체의 현재 요구 사항에 따라 달라질 수 있으므로, 고정된 할당량 수치에 의존하지 말고 자격 증명 및 요금제 제한에 대해 제공업체 문서를 검토하세요.
// Replace this local response with the provider's live response in your app.
globalThis.fetch = async () => ({
ok: true,
json: async () => ({
ip: '203.0.113.42',
city: 'Austin',
region: 'Texas',
country: 'US',
loc: '30.2672,-97.7431',
}),
});
(async () => {
try {
const response = await fetch('https://ipinfo.io/json');
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();
console.log('IP:', data.ip);
console.log('Location:', data.city, data.region, data.country);
} catch (error) {
console.log('Could not retrieve IP information:', error.message);
}
})();
IP: 203.0.113.42
Location: Austin Texas US
관찰된 주소만 필요할 때는 ip 필드를 사용하세요. 추가 필드는 광범위한 지역 표시를 지원할 수 있지만, 위치 데이터는 대략적이며 제공업체의 데이터에 따라 달라집니다. 기기의 정확한 위치를 식별하지는 않습니다. 요청이 실패하면 네트워크 응답과 엔드포인트의 현재 액세스 요구 사항이 사용 사례에 적용되는지 확인하세요.
Abstract로 IP 및 지리적 위치 데이터 가져오기
Abstract는 IP 지리적 위치 엔드포인트를 제공합니다. 이 요청은 API 키를 사용하므로 제공업체를 통해 키를 만들고 아래 자리 표시자를 교체하세요. URL API는 키를 쿼리 매개변수로 인코딩합니다. 이 예제는 대표적인 응답을 사용하고 IP 및 위치 필드를 출력합니다. 로컬 fetch 대체는 파싱 예제를 결정적으로 만듭니다. 실제 요청에서는 인터페이스에 사용할 필드를 선택하기 전에 계정 액세스, 할당량 및 응답 스키마에 대해 제공업체의 최신 문서를 확인하세요. 브라우저 JavaScript에 포함된 키는 방문자에게 보입니다. 키를 비공개로 유지해야 하면 서버 측 프록시를 사용하세요.
// Replace this local response with the provider's live response in your app.
globalThis.fetch = async () => ({
ok: true,
json: async () => ({
ip_address: '203.0.113.42',
city: 'Austin',
region: 'Texas',
country: 'United States',
latitude: 30.2672,
longitude: -97.7431,
}),
});
(async () => {
const apiKey = 'YOUR_ABSTRACT_API_KEY';
const url = new URL('https://ipgeolocation.abstractapi.com/v1/');
url.searchParams.set('api_key', apiKey);
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();
console.log('IP:', data.ip_address);
console.log('Location:', data.city, data.region, data.country);
console.log('Coordinates:', data.latitude, data.longitude);
} catch (error) {
console.log('Could not retrieve geolocation data:', error.message);
}
})();
IP: 203.0.113.42
Location: Austin Texas United States
Coordinates: 30.2672 -97.7431
예제는 반환된 객체에서 IP 및 위치 필드를 읽습니다. 로컬 샘플은 파싱만 보여줄 뿐 실제 서비스 응답을 검증하지 않습니다. API 키가 없거나 거부되거나 제한되면 오류 응답이 발생할 수 있습니다. 네트워크 및 서비스 장애로도 결과를 얻지 못할 수 있습니다. 애플리케이션에서 이러한 경우를 처리하고, 특정 필드를 표시하도록 예제를 조정할 때는 응답과 제공업체 문서를 검사하세요. Abstract의 현재 응답과 액세스 조건이 애플리케이션에 필요한 위치 데이터에 맞을 때 Abstract를 선택하세요.