昨天简单介绍过几个浏览器指纹信息的包，以下简单使用下
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