浏览器指纹信息获取js 包的使用

昨天简单介绍过几个浏览器指纹信息的包，以下简单使用下

browser_fingerprint

browser_fingerprint 是actionhero 开发的，属于一个服务器端的处理，如果使用过里边actionhero会发现响应li bian直接包含了一个fingerprint

  • 参考代码
const http = require("http");
const port = 8080;
 
const { BrowserFingerprint } = require("browser_fingerprint");
 
// these are the default options
const options = {
  cookieKey: "__browser_fingerprint",
  toSetCookie: true,
  onlyStaticElements: true,
  settings: {
    path: "/",
    expires: 3600000,
    httpOnly: null,
  },
};
 
const fingerPrinter = new BrowserFingerprint(options);
 
http
  .createServer((req, res) => {
    let { fingerprint, elementsHash, headersHash } = fingerPrinter.fingerprint(
      req
    );
    headersHash["Content-Type"] = "text/plain"; // append any other headers you want
    res.writeHead(200, headersHash);
 
    let resp = `Your Browser Fingerprint: ${fingerprint} \r\n\r\n`;
    for (let i in elementHash) {
      resp += `Element ${i}: ${elementHash[i]}\r\n`;
    }
 
    res.end(resp);
    console.log(
      "request from " +
        req.connection.remoteAddress +
        ", fingerprint -> " +
        fingerprint
    );
  })
  .listen(port);
 
console.log(`server running at http://127.0.0.1:${port}`);
  • 效果

 

 

fingerprintjs

这个是一个专门搞saas服务的一个开源版本，使用简单

  • 参考代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demoapp</title>
</head>
<body>
  <div id="id"></div>
    <script>
        // Initialize the agent at application startup.
        // You can also use https://openfpcdn.io/fingerprintjs/v3/esm.min.js
        const fpPromise = import('./v3.js')
          .then(FingerprintJS => FingerprintJS.load({debug:true}))
 
        // Get the visitor identifier when you need it.
        fpPromise
          .then(fp => fp.get())
          .then(result => {
            console.log(result.visitorId)
            document.getElementById("id").innerHTML=result.visitorId;
          } )
      </script>
 
</body>
</html>
  • 访问效果
    注意构建使用了parcel

 

 

clientjs

使用了parcel 构建

  • 代码
 
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demoapp</title>
</head>
 
<body>
  <h>fingerprintjs:</h>
  <div id="id"></div>
  <h>clientjs:</h>
  <div id="id2"></div>
  <script>
    // Initialize the agent at application startup.
    // You can also use https://openfpcdn.io/fingerprintjs/v3/esm.min.js
    const fpPromise = import('./v3.js')
      .then(FingerprintJS => FingerprintJS.load({ debug: true }))
 
    // Get the visitor identifier when you need it.
    fpPromise
      .then(fp => fp.get())
      .then(result => {
        console.log(result.visitorId)
        document.getElementById("id").innerHTML = result.visitorId;
      })
 
 
  </script>
 
  <script type="module">
    import { ClientJS } from 'clientjs';
    // Create a new ClientJS object
    const client = new ClientJS();
    // Get the client's fingerprint id
    const fingerprint = client.getFingerprint();
    // Print the 32bit hash id to the console
    document.getElementById("id2").innerHTML = fingerprint;
  </script>
 
</body>
 
</html>
  • 效果

 

 

说明

以上几个工具都是很不错的选择，可以结合起来使用，而且parcel 是一个方便的工具对于测试es6特性很方便，参考package.json 配置

{
  "name": "finger",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "parcel": "^2.2.1"
  },
  "scripts": {
    "app": "parcel index.html"
  },
  "dependencies": {
    "browser_fingerprint": "^2.0.4",
    "clientjs": "^0.2.1"
  }
}

参考资料

https://github.com/actionhero/browser_fingerprint
https://www.npmjs.com/package/clientjs
https://www.npmjs.com/package/@fingerprintjs/fingerprintjs
https://github.com/jackspirou/clientjs
https://github.com/fingerprintjs/fingerprintjs

posted on 2022-02-05 14:13  荣锋亮  阅读(1131)  评论(0)  编辑  收藏  举报

导航