diff --git a/frontend/src/components/ConnectionBlock.js b/frontend/src/components/ConnectionBlock.js index c75e11a..64de5ea 100644 --- a/frontend/src/components/ConnectionBlock.js +++ b/frontend/src/components/ConnectionBlock.js @@ -1,6 +1,6 @@ import { useState, useEffect } from 'react'; import ScanBlock from './ScanBlock'; -import Table from './Table'; +import Table from './OldTable'; import { fetchAPI, getConnection } from './mainOld'; const ConnectionBlock = () => { diff --git a/frontend/src/components/LocationBlock.js b/frontend/src/components/LocationBlock.js index 53da3c9..d03077e 100644 --- a/frontend/src/components/LocationBlock.js +++ b/frontend/src/components/LocationBlock.js @@ -1,6 +1,6 @@ import { useState, useEffect } from 'react'; import ScanBlock from './ScanBlock'; -import Table from './Table'; +import Table from './OldTable'; import { fetchAPI, getLocation, getMap } from './mainOld'; const LocationBlock = () => { diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js index b8aa7d2..4f45389 100644 --- a/frontend/src/components/ScanBlocks.js +++ b/frontend/src/components/ScanBlocks.js @@ -1,4 +1,5 @@ /* eslint-disable no-unused-vars */ +import UserAgentBlock from './UserAgentBlock'; import OtherBlock from './OtherBlock'; import NavigatorBlock from './NavigatorBlock'; import ScreenBlock from './ScreenBlock'; @@ -12,11 +13,12 @@ import FiltersBlock from './FiltersBlock'; const ScanBlocks = () => ( <> + - {/* - */} + + {/* diff --git a/frontend/src/components/Table.js b/frontend/src/components/Table.js index f4b97e7..1295b6a 100644 --- a/frontend/src/components/Table.js +++ b/frontend/src/components/Table.js @@ -1,7 +1,7 @@ /* eslint-disable no-unused-vars */ import parse from 'html-react-parser'; import { useState, useEffect } from 'react'; -import Issues from './TableRow'; +import TableRow from './TableRow'; const Table = ({ data }) => { const [workerData, setWorkerData] = useState(); @@ -11,7 +11,7 @@ const Table = ({ data }) => { {data.map((item) => ( - + ))}
diff --git a/frontend/src/components/UserAgentBlock.js b/frontend/src/components/UserAgentBlock.js new file mode 100644 index 0000000..707ca78 --- /dev/null +++ b/frontend/src/components/UserAgentBlock.js @@ -0,0 +1,87 @@ +/* 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, + getUserAgentData, +} from './main'; + +const UserAgentBlock = () => { + 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 ( + +

User Agent

+ {userAgent && ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Browser{userAgent.browser.name}
Browser version{userAgent.browser.version}
OS + {userAgent.os.name} {userAgent.os.versionName} +
OS version{userAgent.os.version}
Engine + {userAgent.engine.name} {userAgent.engine.version} +
Platform type{userAgent.platform.type}
+
+ )} +

+ Explanation: JavaScript can be used to find information about + your hardware. This information can be used to create a fingerprint. +

+
+ ); +}; + +export default UserAgentBlock; diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js index 125affc..bc8b584 100644 --- a/frontend/src/components/main.js +++ b/frontend/src/components/main.js @@ -279,7 +279,24 @@ const getScreen = () => [ getColorDepth(), ]; -const getUserAgentData = () => [getBrowser()]; +const getUserAgentData = (userAgent) => { + // getBrowser(); + console.log(userAgent); +}; + +// const getBrowser = (userAgent) => { +// if (navigator.brave) { +// return 'Brave'; +// } +// return userAgent; +// }; + +const getBrowser = () => ({ + key: 'Browser', + title: 'Color depth', + value: window.screen.colorDepth, + issues: [], +}); // sorts plugins object into comma separated list const sortPlugins = (data) => { @@ -380,9 +397,9 @@ const checkWebWorker = (key, setWorkerData) => { }; }; -const getBrowser = (userAgent) => { - if (navigator.brave) { - return 'Brave'; - } - return userAgent; -}; +// const getBrowser = (userAgent) => { +// if (navigator.brave) { +// return 'Brave'; +// } +// return userAgent; +// };