Detecting tor browser

frontend/src/components/DataBlock.js

@@ -0,0 +1,46 @@
+/* eslint-disable no-unused-vars */
+import { useState, useEffect } from 'react';
+import Bowser from 'bowser';
+import ScanBlock from './ScanBlock';
+import Table from './Table';
+import {
+  checkNavigatorProperties,
+  checkWebWorker,
+  checkScreenProperties,
+  getBrowser,
+} from './main';
+
+const NavigatorBlock = () => {
+  const [firstRender, setfirstRender] = useState(true);
+  const [workerData, setWorkerData] = useState('');
+  const [userAgent, setUserAgent] = useState();
+
+  useEffect(() => {
+    checkWebWorker('userAgent', setWorkerData);
+  }, []);
+
+  useEffect(() => {
+    if (!workerData) {
+      setUserAgent(Bowser.parse(navigator.userAgent));
+    } else {
+      setUserAgent(Bowser.parse(workerData));
+    }
+  }, [workerData]);
+
+  return (
+    <ScanBlock>
+      <h1>Data</h1>
+      {userAgent && (
+        <div className="boxWrap">
+          {getBrowser(userAgent.browser.name)} {userAgent.browser.version}
+        </div>
+      )}
+      <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/ScanBlocks.js

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

frontend/src/components/TableRow.js

@@ -34,7 +34,9 @@ const TableRow = ({ item }) => {
             {ele}
           </div>
         ))}
-        <div className="newline">{workerData}</div>
+        <div className="newline">
+          {workerData && <>{`Did not match web worker (${workerData})`}</>}
+        </div>
       </td>
     </tr>
   );

frontend/src/components/main.js

@@ -1,11 +1,14 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable dot-notation */
+// import Bowser from 'bowser';
+
 export {
   getNavigator,
   checkNavigatorProperties,
   checkWebWorker,
   getScreen,
   checkScreenProperties,
+  getBrowser,
 };
 
 const getDeviceMemory = () => ({
@@ -344,25 +347,6 @@ const checkScreenPrototype = (key) => {
   return null;
 };
 
-// const checkWindowProperties = (key) => {
-//   const list = [];
-//   if (
-//     Object.getOwnPropertyDescriptor(Window.prototype, key).value !== undefined
-//   ) {
-//     list.push('Failed descriptor.value undefined');
-//   }
-//   // try {
-//   //   // eslint-disable-next-line no-unused-vars
-//   //   const check = Window.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 checkWidth = () => {
   if (window.screen.availWidth > window.screen.width) {
     return 'Avail width is wider then width';
@@ -388,7 +372,14 @@ const checkWebWorker = (key, setWorkerData) => {
       event.data !== undefined &&
       event.data.toString() !== navigator[key].toString()
     ) {
-      setWorkerData(`Did not match web worker (${event.data.toString()})`);
+      setWorkerData(event.data.toString());
     }
   };
 };
+
+const getBrowser = (userAgent) => {
+  if (navigator.brave) {
+    return 'Brave';
+  }
+  return userAgent;
+};