155 lines
3.5 KiB
JavaScript
155 lines
3.5 KiB
JavaScript
import md5 from 'crypto-js/md5';
|
|
import { useState, useEffect } from 'react';
|
|
import axios from 'axios';
|
|
import ScanBlock from './ScanBlock';
|
|
import Table from './Table';
|
|
|
|
const FingerprintBlock = () => {
|
|
const [name, setName] = useState('');
|
|
const [saved, setSaved] = useState('');
|
|
const [display, setDisplay] = useState('none');
|
|
|
|
useEffect(() => {
|
|
axios.get(`/api/fingerprint/?hash=${hash}`).then((response) => {
|
|
if (response.data.length !== 0) {
|
|
setName(response.data[response.data.length - 1].name);
|
|
}
|
|
setDisplay('block');
|
|
});
|
|
}, []);
|
|
|
|
const handleSave = (e) => {
|
|
e.preventDefault();
|
|
axios.post('/api/fingerprint/', {
|
|
name: e.target[0].value,
|
|
hash,
|
|
});
|
|
setSaved(true);
|
|
};
|
|
|
|
const gl = document.createElement('canvas').getContext('webgl');
|
|
const ext = gl.getExtension('WEBGL_debug_renderer_info');
|
|
|
|
const fingerprintData = [
|
|
{
|
|
key: 'screenResolution',
|
|
value: `${window.screen.width}x${window.screen.height}`,
|
|
},
|
|
{
|
|
key: 'colorResolution',
|
|
value: window.screen.colorDepth,
|
|
},
|
|
{
|
|
key: 'deviceMemory',
|
|
value: navigator.deviceMemory ? `${navigator.deviceMemory}GB` : 'N/A',
|
|
},
|
|
{
|
|
key: 'cpuCores',
|
|
value: navigator.hardwareConcurrency || 'N/A',
|
|
},
|
|
{
|
|
key: 'maxTouchpoints',
|
|
value: navigator.maxTouchPoints,
|
|
},
|
|
{
|
|
key: 'webGLVendor',
|
|
title: 'WebGL vendor',
|
|
value: gl.getParameter(ext.UNMASKED_VENDOR_WEBGL),
|
|
},
|
|
{
|
|
key: 'webglRenderer',
|
|
title: 'WebGL renderer',
|
|
value: gl.getParameter(ext.UNMASKED_RENDERER_WEBGL),
|
|
},
|
|
{
|
|
key: 'platform',
|
|
value: navigator.platform,
|
|
},
|
|
{
|
|
key: 'userAgent',
|
|
value: navigator.userAgent,
|
|
},
|
|
{
|
|
key: 'preferredLanguage',
|
|
value: navigator.language,
|
|
},
|
|
{
|
|
key: 'languages',
|
|
title: 'Languages',
|
|
value: navigator.languages,
|
|
},
|
|
{
|
|
key: 'timezone',
|
|
value: Intl.DateTimeFormat().resolvedOptions().timeZone || 'N/A',
|
|
},
|
|
{
|
|
key: 'cookiesEnabled',
|
|
value: navigator.cookieEnabled,
|
|
},
|
|
{
|
|
key: 'javaEnabled',
|
|
value: navigator.javaEnabled(),
|
|
},
|
|
{
|
|
key: 'dntHeader',
|
|
value: navigator.doNotTrack,
|
|
},
|
|
{
|
|
key: 'automatedBrowser',
|
|
value: navigator.webdriver,
|
|
},
|
|
{
|
|
key: 'plugins',
|
|
value: navigator.plugins,
|
|
},
|
|
];
|
|
|
|
const hash = md5(JSON.stringify(fingerprintData)).toString();
|
|
|
|
const tableData = [
|
|
{
|
|
key: 'hash',
|
|
title: 'Hash',
|
|
value: hash,
|
|
},
|
|
{
|
|
key: 'name',
|
|
title: 'Name',
|
|
value: name,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ScanBlock>
|
|
<h1>Fingerprint</h1>
|
|
<div style={{ display }}>
|
|
{name ? (
|
|
<Table data={tableData} />
|
|
) : (
|
|
<div className="boxWrap">
|
|
<div className="hash">{hash}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<p>
|
|
<b>Explanation:</b> JavaScript can be used to read various information
|
|
about your software. This information can be used to create a
|
|
fingerprint.
|
|
</p>
|
|
{saved ? (
|
|
<p>Success! Re-scan browser.</p>
|
|
) : (
|
|
<form
|
|
onSubmit={(e) => {
|
|
handleSave(e);
|
|
}}
|
|
>
|
|
<input type="text" id="name" name="name" placeholder="Enter name" />
|
|
<input type="submit" id="saveButton" value="Save" maxLength="100" />
|
|
</form>
|
|
)}
|
|
</ScanBlock>
|
|
);
|
|
};
|
|
|
|
export default FingerprintBlock;
|