From 1ae29ac2a088830060733a819bf0c3823f0c7aea Mon Sep 17 00:00:00 2001 From: z0ccc Date: Mon, 27 Sep 2021 22:40:09 -0400 Subject: [PATCH] Added useragent block --- frontend/src/components/Blocks.js | 4 +- frontend/src/components/ConnectionBlock.js | 2 +- frontend/src/components/LocationBlock.js | 2 +- frontend/src/components/NavigatorBlock.js | 2 +- frontend/src/components/UserAgentBlock.js | 118 +++--------------- frontend/src/utils/common.js | 2 +- .../utils/{conenction.js => connection.js} | 0 frontend/src/utils/userAgent.js | 53 ++++++++ 8 files changed, 74 insertions(+), 109 deletions(-) rename frontend/src/utils/{conenction.js => connection.js} (100%) create mode 100644 frontend/src/utils/userAgent.js diff --git a/frontend/src/components/Blocks.js b/frontend/src/components/Blocks.js index 1856a0b..8bef219 100644 --- a/frontend/src/components/Blocks.js +++ b/frontend/src/components/Blocks.js @@ -31,8 +31,8 @@ const ScanBlocks = () => {
{/* */} - {/* - */} + + {/* */}
( diff --git a/frontend/src/components/LocationBlock.js b/frontend/src/components/LocationBlock.js index f00a23e..9fb484f 100644 --- a/frontend/src/components/LocationBlock.js +++ b/frontend/src/components/LocationBlock.js @@ -1,6 +1,6 @@ import ScanBlock from './Block'; import Table from './Table'; -import { getMap, getLocation } from '../utils/conenction'; +import { getMap, getLocation } from '../utils/connection'; const LocationBlock = ({ connectionData, workerData }) => ( diff --git a/frontend/src/components/NavigatorBlock.js b/frontend/src/components/NavigatorBlock.js index 5041b18..84ccc52 100644 --- a/frontend/src/components/NavigatorBlock.js +++ b/frontend/src/components/NavigatorBlock.js @@ -5,7 +5,7 @@ import getNavigator from '../utils/navigator'; const NavigatorBlock = ({ workerData }) => (

Navigator

- +

Explanation: JavaScript can be used to find information about your hardware. This information can be used to create a fingerprint. diff --git a/frontend/src/components/UserAgentBlock.js b/frontend/src/components/UserAgentBlock.js index 271f437..3101290 100644 --- a/frontend/src/components/UserAgentBlock.js +++ b/frontend/src/components/UserAgentBlock.js @@ -1,105 +1,17 @@ -// /* eslint-disable no-unused-vars */ -// import { useState, useEffect } from 'react'; -// import Bowser from 'bowser'; -// import ScanBlock from './Block'; -// import Table from './Table'; -// import { -// checkNavigatorProperties, -// checkWebWorker, -// checkScreenProperties, -// } from './main'; -// import { ReactComponent as CheckCircle } from '../images/checkCircle.svg'; +/* eslint-disable no-unused-vars */ +import ScanBlock from './Block'; +import Table from './Table'; +import getUserAgent from '../utils/userAgent'; -// const UserAgentBlock = () => { -// const [firstRender, setfirstRender] = useState(true); -// const [workerData, setWorkerData] = useState(''); -// const [userAgent, setUserAgent] = useState(); +const UserAgentBlock = ({ workerAgent }) => ( + +

User Agent

+
+

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

+ +); -// 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; +export default UserAgentBlock; diff --git a/frontend/src/utils/common.js b/frontend/src/utils/common.js index 6333e17..a72cc3a 100644 --- a/frontend/src/utils/common.js +++ b/frontend/src/utils/common.js @@ -10,7 +10,7 @@ const fetchAPI = (setData) => { }; const checkWebWorker = (key, worker) => { - if (key.toString() !== worker.toString()) { + if (`${key}` !== `${worker}`) { return `Did not match web worker (${worker})`; } return null; diff --git a/frontend/src/utils/conenction.js b/frontend/src/utils/connection.js similarity index 100% rename from frontend/src/utils/conenction.js rename to frontend/src/utils/connection.js diff --git a/frontend/src/utils/userAgent.js b/frontend/src/utils/userAgent.js new file mode 100644 index 0000000..9b19b98 --- /dev/null +++ b/frontend/src/utils/userAgent.js @@ -0,0 +1,53 @@ +/* eslint-disable no-unused-vars */ +/* eslint-disable import/prefer-default-export */ + +import Bowser from 'bowser'; +import { checkWebWorker } from './common'; + +const getUserAgentData = (key, userAgent, workerAgent) => ({ + key, + value: userAgent || 'N/A', + issues: [checkWebWorker(userAgent, workerAgent)], +}); + +// Returns object with location data +const getUserAgent = (workerAgent) => { + const userAgentParsed = Bowser.parse(navigator.userAgent); + const workerAgentParsed = Bowser.parse(workerAgent); + console.log(userAgentParsed, workerAgentParsed); + return [ + getUserAgentData( + 'Browser', + userAgentParsed.browser.name, + workerAgentParsed.browser.name + ), + getUserAgentData( + 'Browser version', + userAgentParsed.browser.version, + workerAgentParsed.browser.version + ), + getUserAgentData('OS', userAgentParsed.os.name, workerAgentParsed.os.name), + getUserAgentData( + 'OS version', + userAgentParsed.os.versionName, + workerAgentParsed.os.versionName + ), + getUserAgentData( + 'Engine', + userAgentParsed.engine.name, + workerAgentParsed.engine.name + ), + getUserAgentData( + 'Engine version', + userAgentParsed.engine.version, + workerAgentParsed.engine.version + ), + getUserAgentData( + 'Platform type', + userAgentParsed.platform.type, + workerAgentParsed.platform.type + ), + ]; +}; + +export default getUserAgent;