소개

가장 널리 사용되는 추적 방법에는 유명한cookies 과 같은 영구 식별자가 포함됩니다. 하지만 그 쿠키를 삭제하면 어떻게 될까요? 시크릿 모드로 전환하면 어떻게 되나요?



영구 식별자에 의존하지 않고 사용자를 추적하는 다른 방법이 있는 것으로 나타났습니다. Browser fingerprinting도 그 중 하나입니다. 아무것도 저장할 필요가 없기 때문에 삭제할 것이 없으며 비공개로 전환해도 문제가 없습니다.

device's fingerprint 및 IP address 메타데이터를 수집하는 방법을 보여주기 위해 작은 React 앱을 작성할 것입니다. 앱은 전적으로 브라우저에서 실행되며 데이터는 저장되지 않습니다.

동기 부여

By gathering that information together and storing it on its own servers, a site can track your browsing habits without the use of persistent identifiers stored on your computer, like cookies. Fingerprinting can also be used to recreate a tracking cookie for a user after the user has deleted it. Users that are aware of cookies can remove them within their browser settings, but fingerprinting subverts the built-in browser mechanisms that allow users to avoid being tracked. (EFF | The GDPR and Browser Fingerprinting: How It Changes the Game for the Sneakiest Web Trackers).

우리가 만들고 있는 것

앱을 빌드하려면 다음을 사용합니다.

Fingerprintjs2 지문을 수집합니다. 이것은 우리에게 장치의 플랫폼, RAM, 코어 수 및 기타 유용한 정보를 제공합니다.

Extreme IP Lookup API는 IP 주소 메타데이터를 가져옵니다. 이것은 장치의 위치, ISP 등과 같은 정보를 제공합니다...

React Hooks 상용구를 최소화하면서 응용 프로그램의 상태를 관리합니다. 우리는 가벼운 접근 방식을 사용할 것이므로 Redux와 같은 것보다 이 옵션을 선호할 것입니다.

작동 방식

장치의 지문 가져오기

Fingerprintjs2 실행 중인 브라우저의 기능을 자동으로 감지한 다음 사용 가능한 매개변수를 선택적으로 쿼리합니다. 사용하는 식별 방법 중 일부는 다음과 같습니다.

Canvas fingerprinting . 텍스트를 그리고 배경색을 추가하면 스크립트가 Canvas API를 호출하여 이진 픽셀 데이터의 Base64 인코딩 표현을 가져옵니다. 그런 다음 해당 표현은 지문 역할을 하는 해시로 변환됩니다.

Font detection . 가지고 있는 글꼴과 글꼴을 그리는 방법을 기반으로 합니다. 채워진 크기를 측정하여 지문을 모델링할 수 있습니다.

브라우저 플러그인 검색.

오디오 샘플링.

WebGL 핑거프린팅.

실제로 지문을 얻으려면 get 의 Fingerprintjs2 함수를 사용하고 다음과 같이 표시합니다.

import fp from "fingerprintjs2";

// We re-write the callback into a Promise style,
// so it plays nice with React Hooks
export const getFingerprint = () =>
  new Promise(resolve => {
    fp.get(components => {
      resolve(components);
    });
  });

IP 주소 메타데이터 가져오기

IP-based Geolocation is a mapping of an IP address or MAC address to the real-world geographic location of an Internet-connected computing or a mobile device. Geolocation involves mapping an IP address to the country, region (city), latitude/longitude, ISP and domain name among other useful things. More about here.

여기에 관련된 마법은 없습니다. 지리적 위치는 관련 정보가 미리 채워진 데이터베이스를 사용하여 작동합니다. 이 자습서에서 사용하는 것과 같이 이 작업을 수행하는 많은 무료(유료) 서비스도 있습니다.
extreme-ip-lookup REST API에 대한 표준 HTTP GET 요청을 사용합니다. 또한 반환 응답 형식으로 원하는 json를 지정합니다.

// Standard HTTP GET using "fetch"
fetch("https://extreme-ip-lookup.com/json")
  .then(res => res.json())

구성 요소 만들기

이제 모든 것을 모아 메인 구성 요소를 만들어 보겠습니다. 데이터 가져오기는 비동기식이므로 useEffect 후크를 사용하여 구성 요소를 채웁니다.

import React, { useEffect, useState } from "react";
import { getFingerprint } from "./utils";   // The method we wrote above
import DataTable from "./dataTable";        // Custom component to render our data

function App() {
  const [fingerprint, setFingerprint] = useState(null);
  const [ipData, setIpData] = useState(null);
  const [showReport, setShowReport] = useState(true);

  useEffect(() => {
    if (showReport) {
      fetch("https://extreme-ip-lookup.com/json")           // Get the IP data
        .then(res => res.json())
        .then(ip => Promise.all([ip, getFingerprint()]))    // Get the fingerprint
        .then(([ip, fp]) => {
          setFingerprint(fp);                               // Update the state
          setIpData(ip);
          setShowReport(false);
        });
    }
  }, [showReport]);

  return (
    <div>
      {ipData && fingerprint ? (
        <div>
          <DataTable title="IP Data" data={ipData} />
          <DataTable title="Fingerprint" data={fingerprint} />
        </div>
      ) : (
        <div>
          <h2>Please wait...</h2>
        </div>
      )}
    </div>
  );
}

export default App;

메모

앱은 수집된 정보를 저장하지 않지만 쉽게 변경하고 저장 기능을 제공할 수 있습니다. 우리는:

localStorage API를 사용하여 결과를 브라우저에 저장합니다.

나중에 사용할 수 있도록 수집된 데이터를 데이터베이스에 저장할 우리가 구축한 서버로 보냅니다.

Github 리포지토리

몰라크 / 지문

교활한 지문 및 IP 주소 추적기

React를 사용한 교활한 지문 및 IP 추적기

소개

가장 널리 사용되는 추적 방법에는 famouscookies 와 같은 영구 식별자가 포함됩니다. 하지만 그 쿠키를 삭제하면 어떻게 될까요? 시크릿 모드로 전환하면 어떻게 되나요?

영구 식별자에 의존하지 않고 사용자를 추적하는 다른 방법이 있는 것으로 나타났습니다. Browser fingerprinting도 그 중 하나입니다. 아무것도 저장할 필요가 없기 때문에 삭제할 것이 없으며 비공개로 전환해도 문제가 없습니다.
device's fingerprint 및 IP address 메타데이터를 수집하는 방법을 보여주기 위해 작은 React 앱을 작성할 것입니다. 앱은 전적으로 브라우저에서 실행되며 데이터는 저장되지 않습니다.

동기 부여

By gathering that information together and storing it on its own servers, a site can track your browsing habits without the use of persistent identifiers stored on your computer, like cookies. Fingerprinting can also be used to recreate a tracking cookie for a…

View on GitHub

그것을 실행

git clone [email protected]:molamk/fingerprint.git
cd fingerprint

yarn install
yarn start

라이브 데모 링크

https://fingerprint.molamk.com