Added screen block

frontend/public/worker.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 onmessage = (e) => {
-  console.log(e.data, navigator[e.data]);
   postMessage(navigator[e.data]);
 };

frontend/src/components/Issues.js

@@ -1,23 +0,0 @@
-/* eslint-disable no-unused-vars */
-import parse from 'html-react-parser';
-import { useState, useEffect } from 'react';
-import { checkUndefinedProperties, checkWebWorker } from './navigator';
-
-const Issues = ({ item }) => {
-  const [workerData, setWorkerData] = useState();
-  useEffect(() => {
-    checkWebWorker(item, setWorkerData);
-  }, []);
-
-  return (
-    <td>
-      {parse(checkUndefinedProperties(item))}
-      <br />
-      <>{workerData}</>
-    </td>
-  );
-
-  // return <td>{parse(checkUndefinedProperties(item), workerData)}</td>;
-};
-
-export default Issues;

frontend/src/components/NavigatorBlock.js

@@ -1,30 +1,16 @@
-/* eslint-disable no-unused-vars */
-/* eslint-disable arrow-body-style */
-import { useState, useEffect } from 'react';
 import ScanBlock from './ScanBlock';
-import NewTable from './NewTable';
+import Table from './Table';
-import { getHardware, getWebGL, getBattery } from './main';
 import { getNavigator } from './navigator';
 
-const NavigatorBlock = () => {
+const NavigatorBlock = () => (
-  // const [data, setData] = useState([]);
+  <ScanBlock>
-
+    <h1>Navigator</h1>
-  // useEffect(() => {
+    <Table type="navigator" data={getNavigator()} />
-  //   getBattery().then((batteryInfo) => {
+    <p>
-  //     setData([...getHardware(), ...getWebGL(), ...batteryInfo]);
+      <b>Explanation:</b> JavaScript can be used to find information about your
-  //   });
+      hardware. This information can be used to create a fingerprint.
-  // }, []);
+    </p>
-
+  </ScanBlock>
-  return (
+);
-    <ScanBlock>
-      <h1>Navigator</h1>
-      <NewTable data={getNavigator()} />
-      <p>
-        <b>Explanation:</b> JavaScript can be used to find information about
-        your hardware. This information can be used to create a fingerprint.
-      </p>
-    </ScanBlock>
-  );
-};
 
 export default NavigatorBlock;

frontend/src/components/NewTable.js

@@ -1,27 +0,0 @@
-/* eslint-disable no-unused-vars */
-import parse from 'html-react-parser';
-import { useState, useEffect } from 'react';
-import { checkUndefinedProperties } from './navigator';
-import Issues from './Issues';
-
-const Table = ({ data }) => {
-  const [workerData, setWorkerData] = useState();
-
-  return (
-    <div className="tableWrap">
-      <table>
-        {data.map((item) => (
-          <tbody key={item.key}>
-            <tr>
-              <td>{item.title}</td>
-              <td>{item.value}</td>
-              <Issues item={item} />
-            </tr>
-          </tbody>
-        ))}
-      </table>
-    </div>
-  );
-};
-
-export default Table;

frontend/src/components/OldTable.js

@@ -0,0 +1,16 @@
+const Table = ({ data }) => (
+  <div className="tableWrap">
+    <table>
+      {data.map((item) => (
+        <tbody key={item.title}>
+          <tr>
+            <td>{item.title}</td>
+            <td>{item.value}</td>
+          </tr>
+        </tbody>
+      ))}
+    </table>
+  </div>
+);
+
+export default Table;

frontend/src/components/ScanBlocks.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-unused-vars */
 import NavigatorBlock from './NavigatorBlock';
+import ScreenBlock from './ScreenBlock';
 import FingerprintBlock from './FingerprintBlock';
 import LocationBlock from './LocationBlock';
 import HardwareBlock from './HardwareBlock';
@@ -10,6 +11,7 @@ import FiltersBlock from './FiltersBlock';
 
 const ScanBlocks = () => (
   <>
+    <ScreenBlock />
     <NavigatorBlock />
     {/* <FingerprintBlock />
     <LocationBlock />

frontend/src/components/ScreenBlock.js

@@ -0,0 +1,16 @@
+import ScanBlock from './ScanBlock';
+import Table from './Table';
+import { getScreen } from './navigator';
+
+const ScreenBlock = () => (
+  <ScanBlock>
+    <h1>Screen</h1>
+    <Table type="screen" data={getScreen()} />
+    <p>
+      <b>Explanation:</b> JavaScript can be used to find information about your
+      hardware. This information can be used to create a fingerprint.
+    </p>
+  </ScanBlock>
+);
+
+export default ScreenBlock;

frontend/src/components/Table.js

@@ -1,16 +1,22 @@
-const Table = ({ data }) => (
+/* eslint-disable no-unused-vars */
-  <div className="tableWrap">
+import parse from 'html-react-parser';
-    <table>
+import { useState, useEffect } from 'react';
-      {data.map((item) => (
+import Issues from './TableRow';
-        <tbody key={item.title}>
+
-          <tr>
+const Table = ({ data }) => {
-            <td>{item.title}</td>
+  const [workerData, setWorkerData] = useState();
-            <td>{item.value}</td>
+
-          </tr>
+  return (
-        </tbody>
+    <div className="tableWrap">
-      ))}
+      <table>
-    </table>
+        {data.map((item) => (
-  </div>
+          <tbody key={item.key}>
-);
+            <Issues item={item} />
+          </tbody>
+        ))}
+      </table>
+    </div>
+  );
+};
 
 export default Table;

frontend/src/components/TableRow.js

@@ -0,0 +1,40 @@
+/* eslint-disable no-unused-vars */
+import parse from 'html-react-parser';
+import { useState, useEffect } from 'react';
+import {
+  checkNavigatorProperties,
+  checkWebWorker,
+  checkScreenProperties,
+} from './navigator';
+
+const TableRow = ({ item }) => {
+  const [workerData, setWorkerData] = useState('');
+  const [issues, setIssues] = useState(false);
+
+  useEffect(() => {
+    if (item.issues !== '' || workerData !== '') {
+      setIssues(true);
+    }
+    checkWebWorker(item, setWorkerData);
+  }, []);
+
+  useEffect(() => {
+    if (workerData !== '') {
+      setIssues(true);
+    }
+  }, [workerData]);
+
+  return (
+    <tr className={issues ? 'issue' : ''}>
+      <td>{item.title}</td>
+      <td>{item.value}</td>
+      <td>{parse(item.issues || '')}</td>
+      {/* <td> */}
+      {/* <>{parse(properties)}</> */}
+      {/* <>{parse(workerData)}</> */}
+      {/* </td> */}
+    </tr>
+  );
+};
+
+export default TableRow;

frontend/src/components/navigator.js

@@ -1,5 +1,11 @@
 /* eslint-disable dot-notation */
-export { getNavigator, checkUndefinedProperties, checkWebWorker };
+export {
+  getNavigator,
+  checkNavigatorProperties,
+  checkWebWorker,
+  getScreen,
+  checkScreenProperties,
+};
 
 const getNavigator = () => {
   const data = [
@@ -7,100 +13,85 @@ const getNavigator = () => {
       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.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: 'connection',
-    //   title: 'Connection',
-    //   value: JSON.stringify(navigator.connection),
-    //       prototype: Navigator.prototype.hardwareConcurrency,
-    // },
-    // {
-    //   key: 'geolocation',
-    //   title: 'Geolocation',
-    //   value: navigator.geolocation,
-    //       prototype: Navigator.prototype.hardwareConcurrency,
-    // },
-    // {
-    //   key: 'hid',
-    //   title: 'Hid',
-    //   value: navigator.hid,
-    //       prototype: Navigator.prototype.hardwareConcurrency,
-    // },
-    // {
-    //   key: 'keyboard',
-    //   title: 'Keyboard',
-    //   value: navigator.keyboard,
-    //       prototype: Navigator.prototype.hardwareConcurrency,
-    // },
-    {
-      key: 'onLine',
-      title: 'Online',
-      value: navigator.onLine ? 'True' : 'False',
     },
     {
       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;
@@ -118,33 +109,25 @@ const sortPlugins = (data) => {
   return list;
 };
 
-const checkUndefinedProperties = (obj) => {
+const checkNavigatorProperties = (key) => {
   const list = [];
-  if (Object.getOwnPropertyDescriptor(navigator, obj.key) !== undefined) {
+  if (Object.getOwnPropertyDescriptor(navigator, key) !== undefined) {
     list.push('Failed undefined properties');
   }
   if (
-    Object.getOwnPropertyDescriptor(Navigator.prototype, obj.key).value !==
+    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[obj.key];
+    const check = Navigator.prototype[key];
     list.push('Failed Navigator.prototype');
   } catch (err) {
     // eslint-disable-next-line no-unused-vars
     const check = '';
   }
-  // let frame = document.getElementById('testFrame');
-  // if (!frame) {
-  //   frame = document.createElement('iframe');
-  //   frame.setAttribute('id', 'testFrame');
-  //   document.body.appendChild(frame);
-  // }
-  // console.log(navigator.hardwareConcurrency);
-
   return list.toString().split(',').join('<br />');
 };
 
@@ -159,8 +142,81 @@ const checkWebWorker = (obj, setWorkerData) => {
       event.data !== undefined &&
       event.data.toString() !== navigator[obj.key].toString()
     ) {
-      console.log(event.data, navigator[obj.key]);
+      setWorkerData('<br />Did not match web worker');
-      setWorkerData('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 />');
+};

frontend/src/styles/App.css

@@ -3,6 +3,9 @@
   --grey: #9fa6b2;
   --text: #4b5563;
   --border: #ddd;
+  --issueBackground: #f8d7da;
+  --issueBorder: #f5c6cb;
+  --issueText: #721c24;
 }
 
 .App {
@@ -148,7 +151,6 @@ tr:hover {
 td {
   vertical-align: top;
   padding: 12px;
-  word-break: break-all;
 }
 
 td:first-child {
@@ -205,6 +207,12 @@ input[type='text'] {
   background-color: var(--border);
 }
 
+.issue {
+  background-color: var(--issueBackground);
+  color: var(--issueText);
+  border: 1px solid var(--issueBorder);
+}
+
 @media screen and (max-width: 500px) {
   .github {
     width: 24px;