浏览器指纹信息获取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
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
2021-02-05 dremio 中文查询问题解决
2021-02-05 nodejs 几个不错的文件系统抽象包
2020-02-05 pgspider 其他扩展的集成
2020-02-05 pgspider 简单试用
2020-02-05 pgspider sqlite mysql docker 镜像
2019-02-05 100 webhook implementations
2019-02-05 streamdataio 实时数据分发平台