Added software functions to main

frontend/src/components/FingerprintBlock.js

@@ -1,15 +1,19 @@
+/* eslint-disable no-unused-vars */
 import { useState, useEffect } from 'react';
 import axios from 'axios';
 import ScanBlock from './ScanBlock';
 import Table from './Table';
-import { getHash } from './main';
+import { getHash, getHardware, getWebGL, getBattery } from './main';
 
 const FingerprintBlock = () => {
+  const [data, setData] = useState([]);
   const [name, setName] = useState('');
   const [saved, setSaved] = useState('');
   const [display, setDisplay] = useState('none');
 
   useEffect(() => {
+    setData([...getHardware(), ...getWebGL()]);
+
     axios
       .get(`https://api.vytal.io/fingerprint/?hash=${hash}`)
       .then((response) => {
@@ -29,84 +33,7 @@ const FingerprintBlock = () => {
     setSaved(true);
   };
 
-  const gl = document.createElement('canvas').getContext('webgl');
+  const hash = getHash(data);
-  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 = getHash(fingerprintData);
 
   const tableData = [
     {

frontend/src/components/HardwareBlock.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import { useState, useEffect } from 'react';
 import ScanBlock from './ScanBlock';
 import Table from './Table';

frontend/src/components/SoftwareBlock.js

@@ -1,122 +1,15 @@
-import Bowser from 'bowser';
+import { useState, useEffect } from 'react';
 import ScanBlock from './ScanBlock';
 import Table from './Table';
+import { getSoftware } from './main';
 
 const HardwareBlock = () => {
-  // sorts array into comma separated list
+  const [data, setData] = useState([]);
-  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
+  useEffect(() => {
-  const sortPlugins = (data) => {
+    setData(getSoftware());
-    const { length } = data;
+  }, []);
 
-    let list = '';
-    for (let i = 0; i < length; i++) {
-      if (i !== 0) list += ', ';
-      list += data[i].name;
-    }
-    return list;
-  };
-
-  const uaResult = Bowser.parse(navigator.userAgent);
-  const date = new Date();
-
-  // Software table items
-  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 (
     <ScanBlock>
       <h1>Software</h1>

frontend/src/components/main.js

@@ -1,9 +1,6 @@
-/* eslint-disable import/prefer-default-export */
 import md5 from 'crypto-js/md5';
+import Bowser from 'bowser';
 
-const getHash = (data) => md5(JSON.stringify(data)).toString();
-
-// Hardware table items
 const getHardware = () => {
   const data = [
     {
@@ -79,4 +76,183 @@ const getWebGL = () => {
   return data;
 };
 
-export { getHash, getHardware, getWebGL, getBattery };
+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 = () => {
+//   const data = [
+//     {
+//       key: 'name',
+//       title: 'Name',
+//       value: name,
+//     },
+//     {
+//       key: 'hash',
+//       title: 'Hash',
+//       value: hash,
+//     },
+//   ];
+//   return data;
+
+// const data = [
+// {
+//   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,
+// },
+// ];
+//   return data;
+// };
+
+const getHash = (data) => md5(JSON.stringify(data)).toString();
+
+export { getHash, getSoftware, getHardware, getWebGL, getBattery };