通过canvas生成浏览器指纹
<!DOCTYPE html>
<html lang="en">
<head>
<title>浏览器指纹</title>
</head>
<body><div id="fpkey"></div></body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/core.min.js" integrity="sha512-XV6Atywd9O/oxwyzpbw3HX6KuHroyHe7bWfHAWR6K+FQCu8g98hmj3u7r+7wK42OZlugD/QhB/VfogqTCTWq1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/sha256.min.js" integrity="sha512-lEfapKEoYZuB1rVgeXoQnwnToWRePRQ6cGdrINdv8RVUNR2JpWBRG5792wgC6IcYe/aBWFzGx3jYoYgYriZbAQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
function generateBrowserFingerprint() {
let fingerprint = '';
// 获取用户代理字符串
fingerprint += window.navigator.userAgent;
// 获取屏幕尺寸，用户调整分辨率会变化
fingerprint += 'screen/'+window.screen.width + 'x' + window.screen.height;
// 获取颜色深度
fingerprint += '/'+window.screen.colorDepth;
// 获取可用字体列表
const fonts = window.document.fonts.check('16px Arial');
fingerprint += fonts.status === 'installed' ? 'Arial' : '';
// 获取浏览器语言
// 使用Canvas进行更复杂的指纹生成
var canvas = window.document.createElement('canvas');
var context = canvas.getContext('2d');
// 绘制一个简单的图形
context.fillStyle = '#ff0000';
context.fillRect(0, 0, 100, 100);
// 将Canvas内容转换为DataURL
const imageData = canvas.toDataURL();
// 清理Canvas
canvas = null;
context = null;
// 使用CryptoJS的SHA256方法进行哈希运算,获取哈希值的字符串表示形式
//MD5为32位，SHA256为64位
//可以同时加上其他信息
// var hashString = CryptoJS.SHA256(fingerprint+imageData).toString();
var hashString = CryptoJS.SHA256(imageData).toString();
// 返回生成的指纹
return hashString;
}
// 调用函数并打印指纹
const browserFingerprint = generateBrowserFingerprint();
document.getElementById('fpkey').innerHTML = browserFingerprint;
console.log(browserFingerprint);
</script>
</html>
评论区