Generating hash from data

frontend/public/worker.js

@@ -2,7 +2,6 @@ const data = {
   locale: Intl.DateTimeFormat().resolvedOptions().locale,
   timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
   timezoneOffset: new Date().getTimezoneOffset(),
-  date: new Date().toString(),
   deviceMemory: navigator.deviceMemory,
   hardwareConcurrency: navigator.hardwareConcurrency,
   platform: navigator.platform,

frontend/src/components/Blocks.js

@@ -29,7 +29,7 @@ const Blocks = () => {
       {connectionData ? (
         <>
           <div className="centerBlockInner">
-            {/* <FingerprintBlock /> */}
+            <FingerprintBlock workerData={workerData} />
             <NavigatorBlock workerData={workerData} />
             <UserAgentBlock workerAgent={workerData.userAgent} />
             <IntlBlock workerData={workerData} />

frontend/src/components/FingerprintBlock.js

@@ -1,54 +1,24 @@
+/* eslint-disable no-unused-vars */
 import { useState } from 'react';
 import Block from './Block';
 import Table from './Table';
-import {
+import getHash from '../utils/fingerprint';
-  getHardware,
-  getWebGL,
-  getSoftware,
-  getFingerprint,
-  getHash,
-  getName,
-  handleSave,
-} from './mainOld';
 
-const FingerprintBlock = () => {
+const FingerprintBlock = ({ workerData }) => {
-  const [name, setName] = useState('');
+  const hash = getHash(workerData);
-  const [load, setLoad] = useState(false);
+  console.log(hash);
-  const [saved, setSaved] = useState('');
-  const hash = getHash([...getHardware(), ...getWebGL(), ...getSoftware()]);
-  getName(hash, setName, setLoad);
   return (
     <Block>
       <h1>Fingerprint</h1>
-      {load && (
+      <div className="boxWrap">
-        <>
+        <div className="hash">{hash}</div>
-          {name ? (
+      </div>
-            <Table data={getFingerprint(name, hash)} />
-          ) : (
-            <div className="boxWrap">
-              <div className="hash">{hash}</div>
-            </div>
-          )}
-        </>
-      )}
       <p>
         <b>Explanation:</b> This is a unique identifier that can be used to
         follow you around the web. Even if you clear cookies, change your IP or
         use private mode the hash will stay the same. Enter your name below and
         reload the page in private mode to test it out.
       </p>
-      {saved ? (
-        <p>Success! Re-scan browser.</p>
-      ) : (
-        <form
-          onSubmit={(e) => {
-            handleSave(e, hash, setSaved);
-          }}
-        >
-          <input type="text" id="name" name="name" placeholder="Enter name" />
-          <input type="submit" id="saveButton" value="Save" maxLength="100" />
-        </form>
-      )}
     </Block>
   );
 };

frontend/src/components/FingerprintBlock2.js

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import Block from './Block';
+import Table from './Table';
+import {
+  getHardware,
+  getWebGL,
+  getSoftware,
+  getFingerprint,
+  getHash,
+  getName,
+  handleSave,
+} from './mainOld';
+
+const FingerprintBlock = () => {
+  const [name, setName] = useState('');
+  const [load, setLoad] = useState(false);
+  const [saved, setSaved] = useState('');
+  const hash = getHash([...getHardware(), ...getWebGL(), ...getSoftware()]);
+  getName(hash, setName, setLoad);
+  return (
+    <Block>
+      <h1>Fingerprint</h1>
+      {load && (
+        <>
+          {name ? (
+            <Table data={getFingerprint(name, hash)} />
+          ) : (
+            <div className="boxWrap">
+              <div className="hash">{hash}</div>
+            </div>
+          )}
+        </>
+      )}
+      <p>
+        <b>Explanation:</b> This is a unique identifier that can be used to
+        follow you around the web. Even if you clear cookies, change your IP or
+        use private mode the hash will stay the same. Enter your name below and
+        reload the page in private mode to test it out.
+      </p>
+      {saved ? (
+        <p>Success! Re-scan browser.</p>
+      ) : (
+        <form
+          onSubmit={(e) => {
+            handleSave(e, hash, setSaved);
+          }}
+        >
+          <input
+            type="text"
+            id="name"
+            name="name"
+            placeholder="Enter signature"
+          />
+          <input type="submit" id="saveButton" value="Save" maxLength="100" />
+        </form>
+      )}
+    </Block>
+  );
+};
+
+export default FingerprintBlock;

frontend/src/utils/fingerprint.js

@@ -0,0 +1,5 @@
+import md5 from 'crypto-js/md5';
+
+const getHash = (data) => md5(JSON.stringify(data)).toString();
+
+export default getHash;

frontend/src/utils/other.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import { checkWebWorker } from './common';
 
 const detectTor = () => {
@@ -22,54 +21,45 @@ const checkDatePrototype = () => {
 };
 
 // Returns object with location data
-const getOther = (battery, adBlock, workerData) => {
+const getOther = (battery, adBlock, workerData) => [
-  const workerAgentParsed = 1;
+  {
-  return [
+    key: 'Brave browser',
-    {
+    value: navigator.brave ? 'True' : 'False',
-      key: 'Brave browser',
+    issues: [checkWebWorker],
-      value: navigator.brave ? 'True' : 'False',
+  },
-      issues: [checkWebWorker],
+  {
-    },
+    key: 'Tor browser',
-    {
+    value: detectTor() ? 'True' : 'False',
-      key: 'Tor browser',
+    issues: [],
-      value: detectTor() ? 'True' : 'False',
+  },
-      issues: [],
+  {
-    },
+    key: 'Adblock',
-    {
+    value: adBlock ? 'True' : 'False',
-      key: 'Adblock',
+    issues: [],
-      value: adBlock ? 'True' : 'False',
+  },
-      issues: [],
+  {
-    },
+    key: 'Date',
-    {
+    value: new Date().toString(),
-      key: 'Date',
+    issues: [checkDatePrototype()],
-      value: new Date().toString(),
+  },
-      issues: [
+  {
-        checkDatePrototype(),
+    key: 'Timezone offset',
-        checkWebWorker(new Date().toString(), workerData.date),
+    value: new Date().getTimezoneOffset(),
-      ],
+    issues: [
-    },
+      checkDatePrototype(),
-    {
+      checkWebWorker(new Date().getTimezoneOffset(), workerData.timezoneOffset),
-      key: 'Timezone offset',
+    ],
-      value: new Date().getTimezoneOffset(),
+  },
-      issues: [
+  {
-        checkDatePrototype(),
+    key: 'Battery level',
-        checkWebWorker(
+    value: `${Math.round(battery.level * 100)}%`,
-          new Date().getTimezoneOffset(),
+    issues: [],
-          workerData.timezoneOffset
+  },
-        ),
+  {
-      ],
+    key: 'Battery status',
-    },
+    value: battery.charging ? 'Charging' : 'Not charging',
-    {
+    issues: [],
-      key: 'Battery level',
+  },
-      value: `${Math.round(battery.level * 100)}%`,
+];
-      issues: [],
-    },
-    {
-      key: 'Battery status',
-      value: battery.charging ? 'Charging' : 'Not charging',
-      issues: [],
-    },
-  ];
-};
 
 export default getOther;