Renamed navigator to main
This commit is contained in:
z0ccc
parent
46236137a4
commit
ceecbf32b6
11 changed files with 515 additions and 516 deletions
|
|
@ -1,7 +1,7 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import ScanBlock from './ScanBlock';
|
||||
import Table from './Table';
|
||||
import { fetchAPI, getConnection } from './main';
|
||||
import { fetchAPI, getConnection } from './mainOld';
|
||||
|
||||
const ConnectionBlock = () => {
|
||||
const [data, setData] = useState('');
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import {
|
|||
getHash,
|
||||
getName,
|
||||
handleSave,
|
||||
} from './main';
|
||||
} from './mainOld';
|
||||
|
||||
const FingerprintBlock = () => {
|
||||
const [name, setName] = useState('');
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import ScanBlock from './ScanBlock';
|
||||
import Table from './Table';
|
||||
import { getHardware, getWebGL, getBattery } from './main';
|
||||
import { getHardware, getWebGL, getBattery } from './mainOld';
|
||||
|
||||
const HardwareBlock = () => {
|
||||
const [data, setData] = useState([]);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import ScanBlock from './ScanBlock';
|
||||
import Table from './Table';
|
||||
import { fetchAPI, getLocation, getMap } from './main';
|
||||
import { fetchAPI, getLocation, getMap } from './mainOld';
|
||||
|
||||
const LocationBlock = () => {
|
||||
const [data, setData] = useState([]);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import ScanBlock from './ScanBlock';
|
||||
import Table from './Table';
|
||||
import { getNavigator } from './navigator';
|
||||
import { getNavigator } from './main';
|
||||
|
||||
const NavigatorBlock = () => (
|
||||
<ScanBlock>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import ScanBlock from './ScanBlock';
|
||||
import Table from './Table';
|
||||
import { getScreen } from './navigator';
|
||||
import { getScreen } from './main';
|
||||
|
||||
const ScreenBlock = () => (
|
||||
<ScanBlock>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import ScanBlock from './ScanBlock';
|
||||
import Table from './Table';
|
||||
import { getSoftware } from './main';
|
||||
import { getSoftware } from './mainOld';
|
||||
|
||||
const SoftwareBlock = () => (
|
||||
<ScanBlock>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {
|
|||
checkNavigatorProperties,
|
||||
checkWebWorker,
|
||||
checkScreenProperties,
|
||||
} from './navigator';
|
||||
} from './main';
|
||||
|
||||
const TableRow = ({ item }) => {
|
||||
const [workerData, setWorkerData] = useState('');
|
||||
|
|
@ -15,7 +15,7 @@ const TableRow = ({ item }) => {
|
|||
if (item.issues !== '' || workerData !== '') {
|
||||
setIssues(true);
|
||||
}
|
||||
checkWebWorker(item, setWorkerData);
|
||||
checkWebWorker(item.key, setWorkerData);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -28,11 +28,10 @@ const TableRow = ({ item }) => {
|
|||
<tr className={issues ? 'issue' : ''}>
|
||||
<td>{item.title}</td>
|
||||
<td>{item.value}</td>
|
||||
<td>{parse(item.issues || '')}</td>
|
||||
{/* <td> */}
|
||||
{/* <>{parse(properties)}</> */}
|
||||
{/* <>{parse(workerData)}</> */}
|
||||
{/* </td> */}
|
||||
<td>
|
||||
{parse(item.issues || '')}
|
||||
{parse(workerData)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,303 +1,102 @@
|
|||
import md5 from 'crypto-js/md5';
|
||||
import Bowser from 'bowser';
|
||||
import axios from 'axios';
|
||||
|
||||
/* eslint-disable dot-notation */
|
||||
export {
|
||||
fetchAPI,
|
||||
getLocation,
|
||||
getMap,
|
||||
getConnection,
|
||||
detectTor,
|
||||
getSoftware,
|
||||
getHardware,
|
||||
getWebGL,
|
||||
getBattery,
|
||||
getFingerprint,
|
||||
getHash,
|
||||
getName,
|
||||
handleSave,
|
||||
getNavigator,
|
||||
checkNavigatorProperties,
|
||||
checkWebWorker,
|
||||
getScreen,
|
||||
checkScreenProperties,
|
||||
};
|
||||
|
||||
const fetchAPI = (setData, setDisplay) => {
|
||||
fetch('https://api.vytal.io/ip/')
|
||||
.then((response) => response.json())
|
||||
.then((json) => {
|
||||
setData(json);
|
||||
setDisplay(1);
|
||||
})
|
||||
.catch(() => {
|
||||
setDisplay(0);
|
||||
});
|
||||
};
|
||||
|
||||
const getLocation = (json) => {
|
||||
const getNavigator = () => {
|
||||
const data = [
|
||||
{
|
||||
key: 'country',
|
||||
title: 'Country',
|
||||
value: json.country,
|
||||
},
|
||||
{
|
||||
key: 'regionName',
|
||||
title: 'Region',
|
||||
value: json.regionName,
|
||||
},
|
||||
{
|
||||
key: 'lat',
|
||||
title: 'City',
|
||||
value: json.city,
|
||||
},
|
||||
{
|
||||
key: 'zip',
|
||||
title: 'Zip code',
|
||||
value: json.zip,
|
||||
},
|
||||
{
|
||||
key: 'lat',
|
||||
title: 'Latitude',
|
||||
value: json.lat,
|
||||
},
|
||||
{
|
||||
key: 'lon',
|
||||
title: 'Longitude',
|
||||
value: json.lon,
|
||||
},
|
||||
];
|
||||
return data;
|
||||
};
|
||||
|
||||
const getMap = (data) =>
|
||||
`https://maps.googleapis.com/maps/api/staticmap?center=${data.lat},${data.lon}&markers=color:red%7Clabel:%7C${data.lat},${data.lon}&size=500x200&zoom=10&key=AIzaSyB-YN-X8PGBSPd7NOaQu4csVhgJUnF3ZGk`;
|
||||
|
||||
const getConnection = (json) => {
|
||||
const data = [
|
||||
{
|
||||
key: 'ipAddress',
|
||||
title: 'IP address',
|
||||
value: json.query,
|
||||
},
|
||||
{
|
||||
key: 'isp',
|
||||
title: 'ISP',
|
||||
value: json.isp,
|
||||
},
|
||||
{
|
||||
key: 'org',
|
||||
title: 'Organization',
|
||||
value: json.org,
|
||||
},
|
||||
{
|
||||
key: 'asn',
|
||||
title: 'ASN',
|
||||
value: json.as,
|
||||
},
|
||||
{
|
||||
key: 'tor',
|
||||
title: 'Tor browser detected',
|
||||
value: detectTor() ? 'True' : 'False',
|
||||
},
|
||||
];
|
||||
return data;
|
||||
};
|
||||
|
||||
const detectTor = () => {
|
||||
const date = new Date();
|
||||
if (
|
||||
navigator.plugins.length === 0 &&
|
||||
date.getTimezoneOffset() === 0 &&
|
||||
window.outerWidth === window.screen.availWidth &&
|
||||
window.outerHeight === window.screen.availHeight
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const getHardware = () => {
|
||||
const data = [
|
||||
{
|
||||
key: 'screenResolution',
|
||||
title: 'Screen resolution',
|
||||
value: `${window.screen.width}x${window.screen.height}`,
|
||||
},
|
||||
{
|
||||
key: 'colorResolution',
|
||||
title: 'Color Resolution',
|
||||
value: window.screen.colorDepth,
|
||||
},
|
||||
{
|
||||
key: 'deviceMemory',
|
||||
title: 'Device memory',
|
||||
value: navigator.deviceMemory ? `${navigator.deviceMemory}GB` : 'N/A',
|
||||
value: navigator.deviceMemory,
|
||||
issues: checkNavigatorProperties('deviceMemory'),
|
||||
},
|
||||
{
|
||||
key: 'cpuCores',
|
||||
title: '# of CPU cores',
|
||||
value: navigator.hardwareConcurrency || 'N/A',
|
||||
key: 'hardwareConcurrency',
|
||||
title: 'Hardware Concurrency',
|
||||
value: navigator.hardwareConcurrency,
|
||||
issues: checkNavigatorProperties('hardwareConcurrency'),
|
||||
},
|
||||
{
|
||||
key: 'maxTouchpoints',
|
||||
key: 'maxTouchPoints',
|
||||
title: 'Max touchpoints',
|
||||
value: navigator.maxTouchPoints || 0,
|
||||
},
|
||||
];
|
||||
return data;
|
||||
};
|
||||
|
||||
const getBattery = async () => {
|
||||
let level, status;
|
||||
if ('getBattery' in navigator) {
|
||||
await navigator.getBattery().then((res) => {
|
||||
level = `${Math.round(res.level * 100)}%`;
|
||||
status = res.charging ? 'Charging' : 'Not charging';
|
||||
});
|
||||
} else {
|
||||
level = 'N/A';
|
||||
status = 'N/A';
|
||||
}
|
||||
const data = [
|
||||
{
|
||||
key: 'batteryLevel',
|
||||
title: 'Battery level',
|
||||
value: level,
|
||||
},
|
||||
{
|
||||
key: 'batteryStatus',
|
||||
title: 'Battery status',
|
||||
value: status,
|
||||
},
|
||||
];
|
||||
return data;
|
||||
};
|
||||
|
||||
const getWebGL = () => {
|
||||
const gl = document.createElement('canvas').getContext('webgl');
|
||||
let ext;
|
||||
if (gl) {
|
||||
ext = gl.getExtension('WEBGL_debug_renderer_info');
|
||||
} else {
|
||||
ext = null;
|
||||
}
|
||||
|
||||
const data = [
|
||||
{
|
||||
key: 'webGLVendor',
|
||||
title: 'WebGL vendor',
|
||||
value: ext ? gl.getParameter(ext.UNMASKED_VENDOR_WEBGL) : 'N/A',
|
||||
},
|
||||
{
|
||||
key: 'webglRenderer',
|
||||
title: 'WebGL renderer',
|
||||
value: ext ? gl.getParameter(ext.UNMASKED_RENDERER_WEBGL) : 'N/A',
|
||||
},
|
||||
];
|
||||
return data;
|
||||
};
|
||||
|
||||
const getSoftware = () => {
|
||||
const uaResult = Bowser.parse(navigator.userAgent);
|
||||
const date = new Date();
|
||||
const data = [
|
||||
{
|
||||
key: 'browser',
|
||||
title: 'Browser',
|
||||
value: uaResult.browser.name,
|
||||
},
|
||||
{
|
||||
key: 'browserVersion',
|
||||
title: 'Browser version',
|
||||
value: uaResult.browser.version,
|
||||
},
|
||||
{
|
||||
key: 'browserEngine',
|
||||
title: 'Browser engine',
|
||||
value: uaResult.browser.engine || 'N/A',
|
||||
},
|
||||
{
|
||||
key: 'os',
|
||||
title: 'OS',
|
||||
value: `${uaResult.os.name} ${uaResult.os.versionName}`,
|
||||
},
|
||||
{
|
||||
key: 'osVersion',
|
||||
title: 'OS version',
|
||||
value: uaResult.os.version,
|
||||
value: navigator.maxTouchPoints,
|
||||
issues: checkNavigatorProperties('maxTouchPoints'),
|
||||
},
|
||||
{
|
||||
key: 'platform',
|
||||
title: 'Platform',
|
||||
value: navigator.platform,
|
||||
},
|
||||
{
|
||||
key: 'systemType',
|
||||
title: 'System type',
|
||||
value: uaResult.platform.type,
|
||||
issues: checkNavigatorProperties('platform'),
|
||||
},
|
||||
{
|
||||
key: 'userAgent',
|
||||
title: 'User agent',
|
||||
value: navigator.userAgent || 'N/A',
|
||||
value: navigator.userAgent,
|
||||
issues: checkNavigatorProperties('userAgent'),
|
||||
},
|
||||
{
|
||||
key: 'preferredLanguage',
|
||||
title: 'Preferred language',
|
||||
value: navigator.language || 'N/A',
|
||||
},
|
||||
// {
|
||||
// key: 'languages',
|
||||
// title: 'Languages',
|
||||
// value: sortArr(navigator.languages) || 'N/A',
|
||||
// },
|
||||
{
|
||||
key: 'timezone',
|
||||
title: 'Timezone',
|
||||
value: Intl.DateTimeFormat().resolvedOptions().timeZone || 'N/A',
|
||||
key: 'language',
|
||||
title: 'Language',
|
||||
value: navigator.userAgent,
|
||||
issues: checkNavigatorProperties('userAgent'),
|
||||
},
|
||||
{
|
||||
key: 'timezoneOffset',
|
||||
title: 'Timezone offset',
|
||||
value: date.getTimezoneOffset() || 'N/A',
|
||||
key: 'languages',
|
||||
title: 'Languages',
|
||||
value: navigator.languages,
|
||||
issues: checkNavigatorProperties('languages'),
|
||||
},
|
||||
{
|
||||
key: 'cookiesEnabled',
|
||||
key: 'cookieEnabled',
|
||||
title: 'Cookies enabled',
|
||||
value: navigator.cookieEnabled ? 'True' : 'False',
|
||||
issues: checkNavigatorProperties('cookieEnabled'),
|
||||
},
|
||||
{
|
||||
key: 'javaEnabled',
|
||||
title: 'Java enabled',
|
||||
value: navigator.javaEnabled() ? 'True' : 'False',
|
||||
},
|
||||
{
|
||||
key: 'dntHeader',
|
||||
title: 'DNT header enabled',
|
||||
key: 'doNotTrack',
|
||||
title: 'Do not track header',
|
||||
value: navigator.doNotTrack ? 'True' : 'False',
|
||||
issues: checkNavigatorProperties('doNotTrack'),
|
||||
},
|
||||
{
|
||||
key: 'automatedBrowser',
|
||||
title: 'Automated browser',
|
||||
key: 'webdriver',
|
||||
title: 'Webdriver',
|
||||
value: navigator.webdriver ? 'True' : 'False',
|
||||
issues: checkNavigatorProperties('webdriver'),
|
||||
},
|
||||
{
|
||||
key: 'plugins',
|
||||
title: 'Plugins',
|
||||
value: sortPlugins(navigator.plugins) || 'N/A',
|
||||
value: sortPlugins(navigator.plugins),
|
||||
issues: checkNavigatorProperties('plugins'),
|
||||
},
|
||||
{
|
||||
key: 'vendor',
|
||||
title: 'Vendor',
|
||||
value: navigator.vendor,
|
||||
issues: checkNavigatorProperties('vendor'),
|
||||
},
|
||||
{
|
||||
key: 'appVersion',
|
||||
title: 'App version',
|
||||
value: navigator.appVersion,
|
||||
issues: checkNavigatorProperties('appVersion'),
|
||||
},
|
||||
{
|
||||
key: 'productSub',
|
||||
title: 'Product sub',
|
||||
value: navigator.productSub,
|
||||
issues: checkNavigatorProperties('productSub'),
|
||||
},
|
||||
];
|
||||
return data;
|
||||
};
|
||||
|
||||
// sorts array into comma separated list
|
||||
// const sortArr = (arr) => {
|
||||
// const arrLength = arr.length;
|
||||
// let list = '';
|
||||
// for (let i = 0; i < arrLength; i++) {
|
||||
// if (i !== 0) list += ', ';
|
||||
// list += arr[i];
|
||||
// }
|
||||
// return list;
|
||||
// };
|
||||
|
||||
// sorts plugins object into comma separated list
|
||||
const sortPlugins = (data) => {
|
||||
const { length } = data;
|
||||
|
|
@ -310,40 +109,114 @@ const sortPlugins = (data) => {
|
|||
return list;
|
||||
};
|
||||
|
||||
const getFingerprint = (name, hash) => {
|
||||
const checkNavigatorProperties = (key) => {
|
||||
const list = [];
|
||||
if (Object.getOwnPropertyDescriptor(navigator, key) !== undefined) {
|
||||
list.push('Failed undefined properties');
|
||||
}
|
||||
if (
|
||||
Object.getOwnPropertyDescriptor(Navigator.prototype, key).value !==
|
||||
undefined
|
||||
) {
|
||||
list.push('Failed descriptor.value undefined');
|
||||
}
|
||||
try {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const check = Navigator.prototype[key];
|
||||
list.push('Failed Navigator.prototype');
|
||||
} catch (err) {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const check = '';
|
||||
}
|
||||
return list.toString().split(',').join('<br />');
|
||||
};
|
||||
|
||||
const getScreen = () => {
|
||||
const data = [
|
||||
{
|
||||
key: 'name',
|
||||
title: 'Name',
|
||||
value: name,
|
||||
key: 'width',
|
||||
title: 'Width',
|
||||
value: window.screen.width,
|
||||
issues: checkScreenProperties('width'),
|
||||
},
|
||||
// {
|
||||
// key: 'outerWidth',
|
||||
// title: 'Outer width',
|
||||
// value: window.outerWidth,
|
||||
// },
|
||||
{
|
||||
key: 'availWidth',
|
||||
title: 'Avail width',
|
||||
value: window.screen.availWidth,
|
||||
issues: checkScreenProperties('availWidth'),
|
||||
},
|
||||
{
|
||||
key: 'hash',
|
||||
title: 'Hash',
|
||||
value: hash,
|
||||
key: 'height',
|
||||
title: 'Height',
|
||||
value: window.screen.height,
|
||||
issues: checkScreenProperties('height'),
|
||||
},
|
||||
// {
|
||||
// key: 'outerHeight',
|
||||
// title: 'Outer height',
|
||||
// value: window.outerHeight,
|
||||
// },
|
||||
{
|
||||
key: 'availHeight',
|
||||
title: 'Avail height',
|
||||
value: window.screen.availHeight,
|
||||
issues: checkScreenProperties('availHeight'),
|
||||
},
|
||||
{
|
||||
key: 'pixelDepth',
|
||||
title: 'Pixel depth',
|
||||
value: window.screen.pixelDepth,
|
||||
issues: checkScreenProperties('pixelDepth'),
|
||||
},
|
||||
{
|
||||
key: 'colorDepth',
|
||||
title: 'Color depth',
|
||||
value: window.screen.colorDepth,
|
||||
issues: checkScreenProperties('colorDepth'),
|
||||
},
|
||||
];
|
||||
return data;
|
||||
};
|
||||
|
||||
const getHash = (data) => md5(JSON.stringify(data)).toString();
|
||||
|
||||
const getName = (hash, setName, setLoad) => {
|
||||
axios
|
||||
.get(`https://api.vytal.io/fingerprint/?hash=${hash}`)
|
||||
.then((response) => {
|
||||
if (response.data.length !== 0) {
|
||||
setName(response.data[response.data.length - 1].name);
|
||||
const checkScreenProperties = (key) => {
|
||||
const list = [];
|
||||
if (Object.getOwnPropertyDescriptor(window.screen, key) !== undefined) {
|
||||
list.push('Failed undefined properties');
|
||||
}
|
||||
setLoad(true);
|
||||
});
|
||||
if (
|
||||
Object.getOwnPropertyDescriptor(Screen.prototype, key).value !== undefined
|
||||
) {
|
||||
list.push('Failed descriptor.value undefined');
|
||||
}
|
||||
try {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const check = Screen.prototype[key];
|
||||
list.push('Failed Navigator.prototype');
|
||||
} catch (err) {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const check = '';
|
||||
}
|
||||
|
||||
return list.toString().split(',').join('<br />');
|
||||
};
|
||||
|
||||
const handleSave = (e, hash, setSaved) => {
|
||||
e.preventDefault();
|
||||
axios.post('https://api.vytal.io/fingerprint/', {
|
||||
name: e.target[0].value,
|
||||
hash,
|
||||
});
|
||||
setSaved(true);
|
||||
const checkWebWorker = (key, setWorkerData) => {
|
||||
let w;
|
||||
if (typeof w === 'undefined') {
|
||||
w = new Worker('/worker.js');
|
||||
}
|
||||
w.postMessage(key);
|
||||
w.onmessage = (event) => {
|
||||
if (
|
||||
event.data !== undefined &&
|
||||
event.data.toString() !== navigator[key].toString()
|
||||
) {
|
||||
setWorkerData('<br />Did not match web worker');
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
|
|||
349
frontend/src/components/mainOld.js
Normal file
349
frontend/src/components/mainOld.js
Normal file
|
|
@ -0,0 +1,349 @@
|
|||
import md5 from 'crypto-js/md5';
|
||||
import Bowser from 'bowser';
|
||||
import axios from 'axios';
|
||||
|
||||
export {
|
||||
fetchAPI,
|
||||
getLocation,
|
||||
getMap,
|
||||
getConnection,
|
||||
detectTor,
|
||||
getSoftware,
|
||||
getHardware,
|
||||
getWebGL,
|
||||
getBattery,
|
||||
getFingerprint,
|
||||
getHash,
|
||||
getName,
|
||||
handleSave,
|
||||
};
|
||||
|
||||
const fetchAPI = (setData, setDisplay) => {
|
||||
fetch('https://api.vytal.io/ip/')
|
||||
.then((response) => response.json())
|
||||
.then((json) => {
|
||||
setData(json);
|
||||
setDisplay(1);
|
||||
})
|
||||
.catch(() => {
|
||||
setDisplay(0);
|
||||
});
|
||||
};
|
||||
|
||||
const getLocation = (json) => {
|
||||
const data = [
|
||||
{
|
||||
key: 'country',
|
||||
title: 'Country',
|
||||
value: json.country,
|
||||
},
|
||||
{
|
||||
key: 'regionName',
|
||||
title: 'Region',
|
||||
value: json.regionName,
|
||||
},
|
||||
{
|
||||
key: 'lat',
|
||||
title: 'City',
|
||||
value: json.city,
|
||||
},
|
||||
{
|
||||
key: 'zip',
|
||||
title: 'Zip code',
|
||||
value: json.zip,
|
||||
},
|
||||
{
|
||||
key: 'lat',
|
||||
title: 'Latitude',
|
||||
value: json.lat,
|
||||
},
|
||||
{
|
||||
key: 'lon',
|
||||
title: 'Longitude',
|
||||
value: json.lon,
|
||||
},
|
||||
];
|
||||
return data;
|
||||
};
|
||||
|
||||
const getMap = (data) =>
|
||||
`https://maps.googleapis.com/maps/api/staticmap?center=${data.lat},${data.lon}&markers=color:red%7Clabel:%7C${data.lat},${data.lon}&size=500x200&zoom=10&key=AIzaSyB-YN-X8PGBSPd7NOaQu4csVhgJUnF3ZGk`;
|
||||
|
||||
const getConnection = (json) => {
|
||||
const data = [
|
||||
{
|
||||
key: 'ipAddress',
|
||||
title: 'IP address',
|
||||
value: json.query,
|
||||
},
|
||||
{
|
||||
key: 'isp',
|
||||
title: 'ISP',
|
||||
value: json.isp,
|
||||
},
|
||||
{
|
||||
key: 'org',
|
||||
title: 'Organization',
|
||||
value: json.org,
|
||||
},
|
||||
{
|
||||
key: 'asn',
|
||||
title: 'ASN',
|
||||
value: json.as,
|
||||
},
|
||||
{
|
||||
key: 'tor',
|
||||
title: 'Tor browser detected',
|
||||
value: detectTor() ? 'True' : 'False',
|
||||
},
|
||||
];
|
||||
return data;
|
||||
};
|
||||
|
||||
const detectTor = () => {
|
||||
const date = new Date();
|
||||
if (
|
||||
navigator.plugins.length === 0 &&
|
||||
date.getTimezoneOffset() === 0 &&
|
||||
window.outerWidth === window.screen.availWidth &&
|
||||
window.outerHeight === window.screen.availHeight
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const getHardware = () => {
|
||||
const data = [
|
||||
{
|
||||
key: 'screenResolution',
|
||||
title: 'Screen resolution',
|
||||
value: `${window.screen.width}x${window.screen.height}`,
|
||||
},
|
||||
{
|
||||
key: 'colorResolution',
|
||||
title: 'Color Resolution',
|
||||
value: window.screen.colorDepth,
|
||||
},
|
||||
{
|
||||
key: 'deviceMemory',
|
||||
title: 'Device memory',
|
||||
value: navigator.deviceMemory ? `${navigator.deviceMemory}GB` : 'N/A',
|
||||
},
|
||||
{
|
||||
key: 'cpuCores',
|
||||
title: '# of CPU cores',
|
||||
value: navigator.hardwareConcurrency || 'N/A',
|
||||
},
|
||||
{
|
||||
key: 'maxTouchpoints',
|
||||
title: 'Max touchpoints',
|
||||
value: navigator.maxTouchPoints || 0,
|
||||
},
|
||||
];
|
||||
return data;
|
||||
};
|
||||
|
||||
const getBattery = async () => {
|
||||
let level, status;
|
||||
if ('getBattery' in navigator) {
|
||||
await navigator.getBattery().then((res) => {
|
||||
level = `${Math.round(res.level * 100)}%`;
|
||||
status = res.charging ? 'Charging' : 'Not charging';
|
||||
});
|
||||
} else {
|
||||
level = 'N/A';
|
||||
status = 'N/A';
|
||||
}
|
||||
const data = [
|
||||
{
|
||||
key: 'batteryLevel',
|
||||
title: 'Battery level',
|
||||
value: level,
|
||||
},
|
||||
{
|
||||
key: 'batteryStatus',
|
||||
title: 'Battery status',
|
||||
value: status,
|
||||
},
|
||||
];
|
||||
return data;
|
||||
};
|
||||
|
||||
const getWebGL = () => {
|
||||
const gl = document.createElement('canvas').getContext('webgl');
|
||||
let ext;
|
||||
if (gl) {
|
||||
ext = gl.getExtension('WEBGL_debug_renderer_info');
|
||||
} else {
|
||||
ext = null;
|
||||
}
|
||||
|
||||
const data = [
|
||||
{
|
||||
key: 'webGLVendor',
|
||||
title: 'WebGL vendor',
|
||||
value: ext ? gl.getParameter(ext.UNMASKED_VENDOR_WEBGL) : 'N/A',
|
||||
},
|
||||
{
|
||||
key: 'webglRenderer',
|
||||
title: 'WebGL renderer',
|
||||
value: ext ? gl.getParameter(ext.UNMASKED_RENDERER_WEBGL) : 'N/A',
|
||||
},
|
||||
];
|
||||
return data;
|
||||
};
|
||||
|
||||
const getSoftware = () => {
|
||||
const uaResult = Bowser.parse(navigator.userAgent);
|
||||
const date = new Date();
|
||||
const data = [
|
||||
{
|
||||
key: 'browser',
|
||||
title: 'Browser',
|
||||
value: uaResult.browser.name,
|
||||
},
|
||||
{
|
||||
key: 'browserVersion',
|
||||
title: 'Browser version',
|
||||
value: uaResult.browser.version,
|
||||
},
|
||||
{
|
||||
key: 'browserEngine',
|
||||
title: 'Browser engine',
|
||||
value: uaResult.browser.engine || 'N/A',
|
||||
},
|
||||
{
|
||||
key: 'os',
|
||||
title: 'OS',
|
||||
value: `${uaResult.os.name} ${uaResult.os.versionName}`,
|
||||
},
|
||||
{
|
||||
key: 'osVersion',
|
||||
title: 'OS version',
|
||||
value: uaResult.os.version,
|
||||
},
|
||||
{
|
||||
key: 'platform',
|
||||
title: 'Platform',
|
||||
value: navigator.platform,
|
||||
},
|
||||
{
|
||||
key: 'systemType',
|
||||
title: 'System type',
|
||||
value: uaResult.platform.type,
|
||||
},
|
||||
{
|
||||
key: 'userAgent',
|
||||
title: 'User agent',
|
||||
value: navigator.userAgent || 'N/A',
|
||||
},
|
||||
{
|
||||
key: 'preferredLanguage',
|
||||
title: 'Preferred language',
|
||||
value: navigator.language || 'N/A',
|
||||
},
|
||||
// {
|
||||
// key: 'languages',
|
||||
// title: 'Languages',
|
||||
// value: sortArr(navigator.languages) || 'N/A',
|
||||
// },
|
||||
{
|
||||
key: 'timezone',
|
||||
title: 'Timezone',
|
||||
value: Intl.DateTimeFormat().resolvedOptions().timeZone || 'N/A',
|
||||
},
|
||||
{
|
||||
key: 'timezoneOffset',
|
||||
title: 'Timezone offset',
|
||||
value: date.getTimezoneOffset() || 'N/A',
|
||||
},
|
||||
{
|
||||
key: 'cookiesEnabled',
|
||||
title: 'Cookies enabled',
|
||||
value: navigator.cookieEnabled ? 'True' : 'False',
|
||||
},
|
||||
{
|
||||
key: 'javaEnabled',
|
||||
title: 'Java enabled',
|
||||
value: navigator.javaEnabled() ? 'True' : 'False',
|
||||
},
|
||||
{
|
||||
key: 'dntHeader',
|
||||
title: 'DNT header enabled',
|
||||
value: navigator.doNotTrack ? 'True' : 'False',
|
||||
},
|
||||
{
|
||||
key: 'automatedBrowser',
|
||||
title: 'Automated browser',
|
||||
value: navigator.webdriver ? 'True' : 'False',
|
||||
},
|
||||
{
|
||||
key: 'plugins',
|
||||
title: 'Plugins',
|
||||
value: sortPlugins(navigator.plugins) || 'N/A',
|
||||
},
|
||||
];
|
||||
return data;
|
||||
};
|
||||
|
||||
// sorts array into comma separated list
|
||||
// const sortArr = (arr) => {
|
||||
// const arrLength = arr.length;
|
||||
// let list = '';
|
||||
// for (let i = 0; i < arrLength; i++) {
|
||||
// if (i !== 0) list += ', ';
|
||||
// list += arr[i];
|
||||
// }
|
||||
// return list;
|
||||
// };
|
||||
|
||||
// sorts plugins object into comma separated list
|
||||
const sortPlugins = (data) => {
|
||||
const { length } = data;
|
||||
|
||||
let list = '';
|
||||
for (let i = 0; i < length; i++) {
|
||||
if (i !== 0) list += ', ';
|
||||
list += data[i].name;
|
||||
}
|
||||
return list;
|
||||
};
|
||||
|
||||
const getFingerprint = (name, hash) => {
|
||||
const data = [
|
||||
{
|
||||
key: 'name',
|
||||
title: 'Name',
|
||||
value: name,
|
||||
},
|
||||
{
|
||||
key: 'hash',
|
||||
title: 'Hash',
|
||||
value: hash,
|
||||
},
|
||||
];
|
||||
return data;
|
||||
};
|
||||
|
||||
const getHash = (data) => md5(JSON.stringify(data)).toString();
|
||||
|
||||
const getName = (hash, setName, setLoad) => {
|
||||
axios
|
||||
.get(`https://api.vytal.io/fingerprint/?hash=${hash}`)
|
||||
.then((response) => {
|
||||
if (response.data.length !== 0) {
|
||||
setName(response.data[response.data.length - 1].name);
|
||||
}
|
||||
setLoad(true);
|
||||
});
|
||||
};
|
||||
|
||||
const handleSave = (e, hash, setSaved) => {
|
||||
e.preventDefault();
|
||||
axios.post('https://api.vytal.io/fingerprint/', {
|
||||
name: e.target[0].value,
|
||||
hash,
|
||||
});
|
||||
setSaved(true);
|
||||
};
|
||||
|
|
@ -1,222 +0,0 @@
|
|||
/* eslint-disable dot-notation */
|
||||
export {
|
||||
getNavigator,
|
||||
checkNavigatorProperties,
|
||||
checkWebWorker,
|
||||
getScreen,
|
||||
checkScreenProperties,
|
||||
};
|
||||
|
||||
const getNavigator = () => {
|
||||
const data = [
|
||||
{
|
||||
key: 'deviceMemory',
|
||||
title: 'Device memory',
|
||||
value: navigator.deviceMemory,
|
||||
issues: checkNavigatorProperties('deviceMemory'),
|
||||
},
|
||||
{
|
||||
key: 'hardwareConcurrency',
|
||||
title: 'Hardware Concurrency',
|
||||
value: navigator.hardwareConcurrency,
|
||||
issues: checkNavigatorProperties('hardwareConcurrency'),
|
||||
},
|
||||
{
|
||||
key: 'maxTouchPoints',
|
||||
title: 'Max touchpoints',
|
||||
value: navigator.maxTouchPoints,
|
||||
issues: checkNavigatorProperties('maxTouchPoints'),
|
||||
},
|
||||
{
|
||||
key: 'platform',
|
||||
title: 'Platform',
|
||||
value: navigator.platform,
|
||||
issues: checkNavigatorProperties('platform'),
|
||||
},
|
||||
{
|
||||
key: 'userAgent',
|
||||
title: 'User agent',
|
||||
value: navigator.userAgent,
|
||||
issues: checkNavigatorProperties('userAgent'),
|
||||
},
|
||||
{
|
||||
key: 'language',
|
||||
title: 'Language',
|
||||
value: navigator.userAgent,
|
||||
issues: checkNavigatorProperties('userAgent'),
|
||||
},
|
||||
{
|
||||
key: 'languages',
|
||||
title: 'Languages',
|
||||
value: navigator.languages,
|
||||
issues: checkNavigatorProperties('languages'),
|
||||
},
|
||||
{
|
||||
key: 'cookieEnabled',
|
||||
title: 'Cookies enabled',
|
||||
value: navigator.cookieEnabled ? 'True' : 'False',
|
||||
issues: checkNavigatorProperties('cookieEnabled'),
|
||||
},
|
||||
{
|
||||
key: 'doNotTrack',
|
||||
title: 'Do not track header',
|
||||
value: navigator.doNotTrack ? 'True' : 'False',
|
||||
issues: checkNavigatorProperties('doNotTrack'),
|
||||
},
|
||||
{
|
||||
key: 'webdriver',
|
||||
title: 'Webdriver',
|
||||
value: navigator.webdriver ? 'True' : 'False',
|
||||
issues: checkNavigatorProperties('webdriver'),
|
||||
},
|
||||
{
|
||||
key: 'plugins',
|
||||
title: 'Plugins',
|
||||
value: sortPlugins(navigator.plugins),
|
||||
issues: checkNavigatorProperties('plugins'),
|
||||
},
|
||||
{
|
||||
key: 'vendor',
|
||||
title: 'Vendor',
|
||||
value: navigator.vendor,
|
||||
issues: checkNavigatorProperties('vendor'),
|
||||
},
|
||||
{
|
||||
key: 'appVersion',
|
||||
title: 'App version',
|
||||
value: navigator.appVersion,
|
||||
issues: checkNavigatorProperties('appVersion'),
|
||||
},
|
||||
{
|
||||
key: 'productSub',
|
||||
title: 'Product sub',
|
||||
value: navigator.productSub,
|
||||
issues: checkNavigatorProperties('productSub'),
|
||||
},
|
||||
];
|
||||
return data;
|
||||
};
|
||||
|
||||
// sorts plugins object into comma separated list
|
||||
const sortPlugins = (data) => {
|
||||
const { length } = data;
|
||||
|
||||
let list = '';
|
||||
for (let i = 0; i < length; i++) {
|
||||
if (i !== 0) list += ', ';
|
||||
list += data[i].name;
|
||||
}
|
||||
return list;
|
||||
};
|
||||
|
||||
const checkNavigatorProperties = (key) => {
|
||||
const list = [];
|
||||
if (Object.getOwnPropertyDescriptor(navigator, key) !== undefined) {
|
||||
list.push('Failed undefined properties');
|
||||
}
|
||||
if (
|
||||
Object.getOwnPropertyDescriptor(Navigator.prototype, key).value !==
|
||||
undefined
|
||||
) {
|
||||
list.push('Failed descriptor.value undefined');
|
||||
}
|
||||
try {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const check = Navigator.prototype[key];
|
||||
list.push('Failed Navigator.prototype');
|
||||
} catch (err) {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const check = '';
|
||||
}
|
||||
return list.toString().split(',').join('<br />');
|
||||
};
|
||||
|
||||
const checkWebWorker = (obj, setWorkerData) => {
|
||||
let w;
|
||||
if (typeof w === 'undefined') {
|
||||
w = new Worker('/worker.js');
|
||||
}
|
||||
w.postMessage(obj.key);
|
||||
w.onmessage = (event) => {
|
||||
if (
|
||||
event.data !== undefined &&
|
||||
event.data.toString() !== navigator[obj.key].toString()
|
||||
) {
|
||||
setWorkerData('<br />Did not match web worker');
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const getScreen = () => {
|
||||
const data = [
|
||||
{
|
||||
key: 'width',
|
||||
title: 'Width',
|
||||
value: window.screen.width,
|
||||
issues: checkScreenProperties('width'),
|
||||
},
|
||||
// {
|
||||
// key: 'outerWidth',
|
||||
// title: 'Outer width',
|
||||
// value: window.outerWidth,
|
||||
// },
|
||||
{
|
||||
key: 'availWidth',
|
||||
title: 'Avail width',
|
||||
value: window.screen.availWidth,
|
||||
issues: checkScreenProperties('availWidth'),
|
||||
},
|
||||
{
|
||||
key: 'height',
|
||||
title: 'Height',
|
||||
value: window.screen.height,
|
||||
issues: checkScreenProperties('height'),
|
||||
},
|
||||
// {
|
||||
// key: 'outerHeight',
|
||||
// title: 'Outer height',
|
||||
// value: window.outerHeight,
|
||||
// },
|
||||
{
|
||||
key: 'availHeight',
|
||||
title: 'Avail height',
|
||||
value: window.screen.availHeight,
|
||||
issues: checkScreenProperties('availHeight'),
|
||||
},
|
||||
{
|
||||
key: 'pixelDepth',
|
||||
title: 'Pixel depth',
|
||||
value: window.screen.pixelDepth,
|
||||
issues: checkScreenProperties('pixelDepth'),
|
||||
},
|
||||
{
|
||||
key: 'colorDepth',
|
||||
title: 'Color depth',
|
||||
value: window.screen.colorDepth,
|
||||
issues: checkScreenProperties('colorDepth'),
|
||||
},
|
||||
];
|
||||
return data;
|
||||
};
|
||||
|
||||
const checkScreenProperties = (key) => {
|
||||
const list = [];
|
||||
if (Object.getOwnPropertyDescriptor(window.screen, key) !== undefined) {
|
||||
list.push('Failed undefined properties');
|
||||
}
|
||||
if (
|
||||
Object.getOwnPropertyDescriptor(Screen.prototype, key).value !== undefined
|
||||
) {
|
||||
list.push('Failed descriptor.value undefined');
|
||||
}
|
||||
try {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const check = Screen.prototype[key];
|
||||
list.push('Failed Navigator.prototype');
|
||||
} catch (err) {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const check = '';
|
||||
}
|
||||
|
||||
return list.toString().split(',').join('<br />');
|
||||
};
|
||||
Loading…
Add table
Reference in a new issue