Three Solutions to Implement The Browser Fingerprints

最新推荐文章于 2025-12-08 22:53:17 发布

原创最新推荐文章于 2025-12-08 22:53:17 发布 · 986 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #跨浏览器

本文介绍了如何使用FingerprintJS、ClientJS和Canvas技术实现浏览器指纹，提供了相应的代码片段和测试文件，展示了在实际项目中获取和利用这些指纹的方法。

The solutions for implementing browser fingerprints are diverse. This article introduces three common approaches along with corresponding code examples. A test file is provided for those interested to experience directly.

FingerprintJS Library:

FingerprintJS is a popular JavaScript library that creates browser fingerprints using various techniques. It utilizes features like user agent, plugin lists, and font information to generate a unique fingerprint.

<!-- Include FingerprintJS library -->
<script src="https://cdn.jsdelivr.net/npm/@fingerprintjs/fingerprintjs@3"></script>

// Use FingerprintJS to get the browser fingerprint
const getBrowserFingerprint = async () => {
    const fpPromise = FingerprintJS.load();
    const fpInstance = await fpPromise;

    const result = await fpInstance.get();

    console.log(result.visitorId); // Browser fingerprint
};

getBrowserFingerprint();

ClientJS Library:

ClientJS is another widely used JavaScript library that generates fingerprints by detecting various browser properties. It provides an easy-to-use interface suitable for various browser fingerprinting scenarios.

<!-- Include ClientJS library -->
<script src="https://cdn.jsdelivr.net/npm/clientjs"></script>

// Use ClientJS to get the browser fingerprint
const getClientJSFingerprint = () => {
    const client = new ClientJS();
    const fingerprint = client.getFingerprint();

    console.log(fingerprint); // Browser fingerprint
};

getClientJSFingerprint();

Canvas Fingerprinting:

Canvas fingerprinting exploits subtle differences when rendering text or images on HTML5 canvas. Here’s a simple Canvas Fingerprinting example:

<canvas id="canvas" width="200" height="20"></canvas>

// Canvas Fingerprinting example
const getCanvasFingerprint = () => {
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    const text = 'Canvas Fingerprint';

    context.font = '10px Arial';
    context.fillText(text, 10, 10);

    const imageData = canvas.toDataURL('image/png');

    console.log(imageData); // Canvas Fingerprint
};

getCanvasFingerprint();

These examples demonstrate the use of different JavaScript libraries or techniques to implement browser fingerprints. Below is the complete test file:

<!-- Complete test file -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Browser Fingerprint Test</title>
    <script type="module">
        import FingerprintJS from 'https://cdn.jsdelivr.net/npm/@fingerprintjs/fingerprintjs@4.2.2/+esm'
        console.log(FingerprintJS)
        window.FingerprintJS = FingerprintJS;
    </script>

    <!-- Include ClientJS library -->
    <script src="https://cdn.jsdelivr.net/npm/clientjs"></script>
    <canvas id="canvas" width="200" height="20"></canvas>
</head>

<body>
    <script>
        window.onload = () => {
            // Use FingerprintJS to get the browser fingerprint
            const getBrowserFingerprint0 = async () => {
                const fpPromise = FingerprintJS.load();
                const fpInstance = await fpPromise;
                const result = await fpInstance.get();
                console.log(result.visitorId); // Browser fingerprint
            };

            getBrowserFingerprint0();

            // Use ClientJS to get the browser fingerprint
            const getClientJSFingerprint = () => {
                const client = new ClientJS();
                const fingerprint = client.getFingerprint();

                console.log(fingerprint); // Browser fingerprint
            };
            getClientJSFingerprint();

            // Canvas Fingerprinting example
            const getCanvasFingerprint2 = () => {
                const canvas = document.getElementById('canvas');
                const context = canvas.getContext('2d');
                const text = 'Canvas Fingerprint';
                context.font = '10px Arial';
                context.fillText(text, 10, 10);
                const imageData = canvas.toDataURL('image/png');
                console.log(imageData); // Canvas Fingerprint
            };

            getCanvasFingerprint2();
        }
    </script>
</body>

</html>