大多数流行的追踪方法都涉及持久性标识符，例如著名的cookies。但如果我们删除了这些cookies呢？如果我们使用隐身模式呢？
事实证明，除了依赖持久性标识符之外，还有其他方法可以追踪用户。浏览器指纹识别就是其中之一。由于它不需要存储任何信息，因此无需删除任何内容，而将浏览器设置为私密状态也无济于事。
我们将编写一个小型 React 应用来演示如何收集设备的指纹和IP 地址元数据。该应用将完全在浏览器中运行，不会存储任何数据。
通过收集这些信息并将其存储在自己的服务器上，网站无需使用存储在您计算机上的持久性标识符（例如 Cookie）即可追踪您的浏览习惯。指纹识别技术还可以在用户删除跟踪 Cookie 后重新创建该 Cookie。了解 Cookie 的用户可以在浏览器设置中删除它们，但指纹识别技术可以绕过浏览器内置的、允许用户避免被追踪的机制。（EFF | GDPR 和浏览器指纹识别：它如何改变了最隐蔽的网络追踪器的游戏规则）。
为了构建该应用程序，我们将使用：
Fingerprintjs2它会自动检测正在运行的浏览器的功能，然后有选择地查询可用的参数。它使用的一些识别方法包括：
为了实际获取指纹，我们将使用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 地址或 MAC 地址映射到联网计算机或移动设备的实际地理位置。地理定位涉及将 IP 地址映射到国家/地区、区域（城市）、经纬度、互联网服务提供商 (ISP) 和域名等信息。更多信息请点击此处。
这里没有什么魔法。地理定位的工作原理很简单，就是使用预先填充了相关信息的数据库。有很多免费（和付费）服务可以帮你完成这项工作，比如我们在本教程中使用的服务。
我们将使用标准的 HTTP GET 请求来调用extreme-ip-lookupREST API。我们还会指定所需的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;
该应用不会存储任何收集到的信息，但我们可以很容易地更改设置，使其具备存储功能。我们可以：
localStorageAPI 将结果存储在浏览器中。最常用的追踪方法涉及持久性标识符，例如著名的cookie。但如果我们删除了这些 cookie 呢？如果我们使用隐身模式呢？
事实证明，除了依赖持久性标识符之外，还有其他方法可以追踪用户。浏览器指纹识别就是其中之一。由于它不需要存储任何信息，因此无需删除任何内容，而将浏览器设置为私密状态也无济于事。
我们将编写一个小型 React 应用来演示如何收集设备的指纹和IP 地址元数据。该应用将完全在浏览器中运行，不会存储任何数据。
通过收集这些信息并将其存储在自己的服务器上，网站无需使用存储在您计算机上的持久性标识符（例如 Cookie）即可跟踪您的浏览习惯。指纹识别技术还可以用于重新创建跟踪 Cookie……
git clone git@github.com:molamk/fingerprint.git
cd fingerprint
yarn install
yarn start
https://fingerprint.molamk.com
文章来源：https://dev.to/molamk/sneaky-fingerprint-and-ip-tracker-2ka7