Added navigator block

frontend/.eslintrc.js

@@ -39,5 +39,6 @@ module.exports = {
     'react/react-in-jsx-scope': 'off',
     'no-bitwise': 'off',
     'react/no-array-index-key': 'off',
+    'dot-notation': 'off',
   },
 };

frontend/public/worker.js

@@ -3,6 +3,11 @@ const data = {
   timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
   timezoneOffset: new Date().getTimezoneOffset(),
   date: new Date().toString(),
+  deviceMemory: navigator.deviceMemory,
+  hardwareConcurrency: navigator.hardwareConcurrency,
+  platform: navigator.platform,
+  userAgent: navigator.userAgent,
+  appVersion: navigator.appVersion,
   language: navigator.language,
   languages: navigator.languages,
 };

frontend/src/components/Blocks.js

@@ -29,9 +29,9 @@ const ScanBlocks = () => {
       {connectionData ? (
         <>
           <div className="centerBlockInner">
-            {/* <FingerprintBlock />
+            {/* <FingerprintBlock /> */}
-            <NavigatorBlock />
+            <NavigatorBlock workerData={workerData} />
-            <UserAgentBlock />
+            {/* <UserAgentBlock />
             <IntlBlock /> */}
           </div>
           <div className="centerBlockInner">
@@ -43,8 +43,8 @@ const ScanBlocks = () => {
               workerData={workerData}
               connectionData={connectionData}
             />
-            {/* <ScreenBlock />
+            <ScreenBlock />
-            <OtherBlock /> */}
+            {/* <OtherBlock /> */}
           </div>
         </>
       ) : (

frontend/src/components/ConnectionBlock.js

@@ -1,4 +1,4 @@
-import ScanBlock from './ScanBlock';
+import ScanBlock from './Block';
 import Table from './Table';
 import { getConnection } from '../utils/conenction';
 

frontend/src/components/FiltersBlock.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import ScanBlock from './ScanBlock';
+import ScanBlock from './Block';
 import Table from './Table';
 
 const FiltersBlock = () => {

frontend/src/components/FingerprintBlock.js

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import ScanBlock from './ScanBlock';
+import ScanBlock from './Block';
 import Table from './Table';
 import {
   getHardware,

frontend/src/components/HardwareBlock.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import ScanBlock from './ScanBlock';
+import ScanBlock from './Block';
 import Table from './Table';
 import { getHardware, getWebGL, getBattery } from './mainOld';
 

frontend/src/components/IntlBlock.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import { useState, useEffect } from 'react';
-import ScanBlock from './ScanBlock';
+import ScanBlock from './Block';
 import Table from './Table';
 import { getIntl } from './main';
 import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';

frontend/src/components/LocationBlock.js

@@ -1,4 +1,4 @@
-import ScanBlock from './ScanBlock';
+import ScanBlock from './Block';
 import Table from './Table';
 import { getMap, getLocation } from '../utils/conenction';
 

frontend/src/components/MainColumn.js

@@ -1,11 +1,11 @@
 import Logo from './Logo';
-import ScanBlocks from './ScanBlocks';
+import Blocks from './Blocks';
 
 const MainColumn = () => (
   <>
     <Logo />
     <div className="centerBlockOuter">
-      <ScanBlocks />
+      <Blocks />
     </div>
   </>
 );

frontend/src/components/NavigatorBlock.js

@@ -1,11 +1,11 @@
-import ScanBlock from './ScanBlock';
+import ScanBlock from './Block';
 import Table from './Table';
-import { getNavigator } from './main';
+import getNavigator from '../utils/navigator';
 
-const NavigatorBlock = () => (
+const NavigatorBlock = ({ workerData }) => (
   <ScanBlock>
     <h1>Navigator</h1>
-    <Table type="navigator" data={getNavigator()} />
+    <Table type="navigator" data={getNavigator(workerData)} />
     <p>
       <b>Explanation:</b> JavaScript can be used to find information about your
       hardware. This information can be used to create a fingerprint.

frontend/src/components/OtherBlock.js

@@ -1,7 +1,7 @@
 /* eslint-disable arrow-body-style */
 /* eslint-disable no-unused-vars */
 import { useState, useEffect } from 'react';
-import ScanBlock from './ScanBlock';
+import ScanBlock from './Block';
 import { detectTor } from './main';
 
 const OtherBlock = () => {

frontend/src/components/ScreenBlock.js

@@ -1,4 +1,4 @@
-import ScanBlock from './ScanBlock';
+import ScanBlock from './Block';
 import Table from './Table';
 import getScreen from '../utils/screen';
 

frontend/src/components/SoftwareBlock.js

@@ -1,4 +1,4 @@
-import ScanBlock from './ScanBlock';
+import ScanBlock from './Block';
 import Table from './Table';
 import { getSoftware } from './mainOld';
 

frontend/src/components/UserAgentBlock.js

@@ -1,105 +1,105 @@
-/* eslint-disable no-unused-vars */
+// /* eslint-disable no-unused-vars */
-import { useState, useEffect } from 'react';
+// import { useState, useEffect } from 'react';
-import Bowser from 'bowser';
+// import Bowser from 'bowser';
-import ScanBlock from './ScanBlock';
+// import ScanBlock from './Block';
-import Table from './Table';
+// import Table from './Table';
-import {
+// import {
-  checkNavigatorProperties,
+//   checkNavigatorProperties,
-  checkWebWorker,
+//   checkWebWorker,
-  checkScreenProperties,
+//   checkScreenProperties,
-} from './main';
+// } from './main';
-import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
+// import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
 
-const UserAgentBlock = () => {
+// const UserAgentBlock = () => {
-  const [firstRender, setfirstRender] = useState(true);
+//   const [firstRender, setfirstRender] = useState(true);
-  const [workerData, setWorkerData] = useState('');
+//   const [workerData, setWorkerData] = useState('');
-  const [userAgent, setUserAgent] = useState();
+//   const [userAgent, setUserAgent] = useState();
 
-  useEffect(() => {
+//   useEffect(() => {
-    checkWebWorker('userAgent', setWorkerData);
+//     checkWebWorker('userAgent', setWorkerData);
-  }, []);
+//   }, []);
 
-  useEffect(() => {
+//   useEffect(() => {
-    if (!workerData) {
+//     if (!workerData) {
-      setUserAgent(Bowser.parse(navigator.userAgent));
+//       setUserAgent(Bowser.parse(navigator.userAgent));
-    } else {
+//     } else {
-      setUserAgent(Bowser.parse(workerData));
+//       setUserAgent(Bowser.parse(workerData));
-    }
+//     }
-  }, [workerData]);
+//   }, [workerData]);
 
-  return (
+//   return (
-    <ScanBlock>
+//     <ScanBlock>
-      <h1>User Agent</h1>
+//       <h1>User Agent</h1>
-      {userAgent && (
+//       {userAgent && (
-        <div className="tableWrap">
+//         <div className="tableWrap">
-          <table>
+//           <table>
-            <tbody>
+//             <tbody>
-              <tr>
+//               <tr>
-                <td>Browser</td>
+//                 <td>Browser</td>
-                <td>{userAgent.browser.name}</td>
+//                 <td>{userAgent.browser.name}</td>
-                <td>
+//                 <td>
-                  <CheckCircle className="circleButton" />
+//                   <CheckCircle className="circleButton" />
-                </td>
+//                 </td>
-              </tr>
+//               </tr>
-            </tbody>
+//             </tbody>
-            <tbody>
+//             <tbody>
-              <tr>
+//               <tr>
-                <td>Browser version</td>
+//                 <td>Browser version</td>
-                <td>{userAgent.browser.version}</td>
+//                 <td>{userAgent.browser.version}</td>
-                <td>
+//                 <td>
-                  <CheckCircle className="circleButton" />
+//                   <CheckCircle className="circleButton" />
-                </td>
+//                 </td>
-              </tr>
+//               </tr>
-            </tbody>
+//             </tbody>
-            <tbody>
+//             <tbody>
-              <tr>
+//               <tr>
-                <td>OS</td>
+//                 <td>OS</td>
-                <td>
+//                 <td>
-                  {userAgent.os.name} {userAgent.os.versionName}
+//                   {userAgent.os.name} {userAgent.os.versionName}
-                </td>
+//                 </td>
-                <td>
+//                 <td>
-                  <CheckCircle className="circleButton" />
+//                   <CheckCircle className="circleButton" />
-                </td>
+//                 </td>
-              </tr>
+//               </tr>
-            </tbody>
+//             </tbody>
-            <tbody>
+//             <tbody>
-              <tr>
+//               <tr>
-                <td>OS version</td>
+//                 <td>OS version</td>
-                <td>{userAgent.os.version}</td>
+//                 <td>{userAgent.os.version}</td>
-                <td>
+//                 <td>
-                  <CheckCircle className="circleButton" />
+//                   <CheckCircle className="circleButton" />
-                </td>
+//                 </td>
-              </tr>
+//               </tr>
-            </tbody>
+//             </tbody>
-            <tbody>
+//             <tbody>
-              <tr>
+//               <tr>
-                <td>Engine</td>
+//                 <td>Engine</td>
-                <td>
+//                 <td>
-                  {userAgent.engine.name} {userAgent.engine.version}
+//                   {userAgent.engine.name} {userAgent.engine.version}
-                </td>
+//                 </td>
-                <td>
+//                 <td>
-                  <CheckCircle className="circleButton" />
+//                   <CheckCircle className="circleButton" />
-                </td>
+//                 </td>
-              </tr>
+//               </tr>
-            </tbody>
+//             </tbody>
-            <tbody>
+//             <tbody>
-              <tr>
+//               <tr>
-                <td>Platform type</td>
+//                 <td>Platform type</td>
-                <td>{userAgent.platform.type}</td>
+//                 <td>{userAgent.platform.type}</td>
-                <td>
+//                 <td>
-                  <CheckCircle className="circleButton" />
+//                   <CheckCircle className="circleButton" />
-                </td>
+//                 </td>
-              </tr>
+//               </tr>
-            </tbody>
+//             </tbody>
-          </table>
+//           </table>
-        </div>
+//         </div>
-      )}
+//       )}
-      <p>
+//       <p>
-        <b>Explanation:</b> JavaScript can be used to find information about
+//         <b>Explanation:</b> JavaScript can be used to find information about
-        your hardware. This information can be used to create a fingerprint.
+//         your hardware. This information can be used to create a fingerprint.
-      </p>
+//       </p>
-    </ScanBlock>
+//     </ScanBlock>
-  );
+//   );
-};
+// };
 
-export default UserAgentBlock;
+// export default UserAgentBlock;

frontend/src/utils/common.js

@@ -1,4 +1,4 @@
-export { fetchAPI, getWebWorker };
+export { fetchAPI, checkWebWorker, getWebWorker };
 
 // Gets location values
 const fetchAPI = (setData) => {
@@ -9,6 +9,13 @@ const fetchAPI = (setData) => {
     });
 };
 
+const checkWebWorker = (key, worker) => {
+  if (key.toString() !== worker.toString()) {
+    return `Did not match web worker (${worker})`;
+  }
+  return null;
+};
+
 const getWebWorker = () => {
   let w;
   if (typeof w === 'undefined') {

frontend/src/utils/conenction.js

@@ -62,7 +62,6 @@ const getLocation = (data, workerData) => {
 
 // Returns object with location data
 const getConnection = (data) => {
-  console.log(data);
   const isProxy = checkProxy(data.proxy);
   return [
     {

frontend/src/utils/navigator.js

@@ -0,0 +1,197 @@
+import { checkWebWorker } from './common';
+
+const getDeviceMemory = (key, worker) => ({
+  key,
+  value: navigator[key],
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+    checkWebWorker(navigator[key], worker),
+  ],
+});
+
+const getHardwareConcurrency = (key, worker) => ({
+  key,
+  value: navigator.hardwareConcurrency,
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+    checkWebWorker(navigator[key], worker),
+  ],
+});
+
+const getMaxTouchPoints = (key) => ({
+  key,
+  value: navigator.maxTouchPoints,
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+  ],
+});
+
+const getPlatform = (key, worker) => ({
+  key,
+  value: navigator.platform,
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+    checkWebWorker(navigator[key], worker),
+  ],
+});
+
+const getUserAgent = (key, worker) => ({
+  key,
+  value: navigator.userAgent,
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+    checkWebWorker(navigator[key], worker),
+  ],
+});
+
+const getAppVersion = (key, worker) => ({
+  key,
+  value: navigator.appVersion,
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+    checkWebWorker(navigator[key], worker),
+  ],
+});
+
+const getLanguage = (key, worker) => ({
+  key,
+  value: navigator.language,
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+    checkWebWorker(navigator[key], worker),
+  ],
+});
+
+const getLanguages = (key, worker) => ({
+  key,
+  value: navigator.languages,
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+    checkWebWorker(navigator[key], worker),
+  ],
+});
+
+const getCookieEnabled = (key) => ({
+  key,
+  value: navigator.cookieEnabled ? 'True' : 'False',
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+  ],
+});
+
+const getDoNotTrack = (key) => ({
+  key,
+  value: navigator.doNotTrack ? 'True' : 'False',
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+  ],
+});
+
+const getWebDriver = (key) => ({
+  key,
+  value: navigator.webdriver ? 'True' : 'False',
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+  ],
+});
+
+const getPlugins = (key) => ({
+  key,
+  value: sortPlugins(navigator.plugins),
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+  ],
+});
+
+const getVendor = (key) => ({
+  key,
+  value: navigator.vendor,
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+  ],
+});
+
+// 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) => {
+  if (Object.getOwnPropertyDescriptor(navigator, key) !== undefined) {
+    return 'Failed undefined properties';
+  }
+  return null;
+};
+
+const checkNavigatorValue = (key) => {
+  if (
+    Object.getOwnPropertyDescriptor(Navigator.prototype, key).value !==
+    undefined
+  ) {
+    return 'Failed descriptor.value undefined';
+  }
+  return null;
+};
+
+const checkNavigatorPrototype = (key) => {
+  try {
+    // eslint-disable-next-line no-unused-vars
+    const check = Navigator.prototype[key];
+    return 'Failed Navigator.prototype';
+  } catch (err) {
+    // eslint-disable-next-line no-unused-vars
+    const check = '';
+  }
+  return null;
+};
+
+const getNavigator = (workerData) => [
+  getDeviceMemory('deviceMemory', workerData.deviceMemory),
+  getHardwareConcurrency('hardwareConcurrency', workerData.hardwareConcurrency),
+  getMaxTouchPoints('maxTouchPoints'),
+  getPlatform('platform', workerData.platform),
+  getUserAgent('userAgent', workerData.userAgent),
+  getAppVersion('appVersion', workerData.appVersion),
+  getLanguage('language', workerData.language),
+  getLanguages('languages', workerData.languages),
+  getCookieEnabled('cookieEnabled'),
+  getDoNotTrack('doNotTrack'),
+  getWebDriver('webdriver'),
+  getPlugins('plugins'),
+  getVendor('vendor'),
+];
+
+export default getNavigator;