me/vytal-redux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added useragent block

Browse source
This commit is contained in:
z0ccc 2021-09-27 22:40:09 -04:00
parent e52a895d55
commit 1ae29ac2a0
8 changed files with 74 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/components/Blocks.js
View file

@ -31,8 +31,8 @@ const ScanBlocks = () => {
<div className="centerBlockInner">
{/* <FingerprintBlock /> */}
<NavigatorBlock workerData={workerData} />
{/* <UserAgentBlock />
<IntlBlock /> */}
<UserAgentBlock workerAgent={workerData.userAgent} />
{/* <IntlBlock /> */}
</div>
<div className="centerBlockInner">
<LocationBlock

2
frontend/src/components/ConnectionBlock.js
View file

@ -1,6 +1,6 @@
import ScanBlock from './Block';
import Table from './Table';
import { getConnection } from '../utils/conenction';
import { getConnection } from '../utils/connection';
const LocationBlock = ({ connectionData }) => (
<ScanBlock>

2
frontend/src/components/LocationBlock.js
View file

@ -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 }) => (
<ScanBlock>

2
frontend/src/components/NavigatorBlock.js
View file

@ -5,7 +5,7 @@ import getNavigator from '../utils/navigator';
const NavigatorBlock = ({ workerData }) => (
<ScanBlock>
<h1>Navigator</h1>
<Table type="navigator" data={getNavigator(workerData)} />
<Table 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.

118
frontend/src/components/UserAgentBlock.js
View file

@ -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 }) => (
<ScanBlock>
<h1>User Agent</h1>
<Table data={getUserAgent(workerAgent)} />
<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>
);
// useEffect(() => {
// checkWebWorker('userAgent', setWorkerData);
// }, []);
// useEffect(() => {
// if (!workerData) {
// setUserAgent(Bowser.parse(navigator.userAgent));
// } else {
// setUserAgent(Bowser.parse(workerData));
// }
// }, [workerData]);
// return (
// <ScanBlock>
// <h1>User Agent</h1>
// {userAgent && (
// <div className="tableWrap">
// <table>
// <tbody>
// <tr>
// <td>Browser</td>
// <td>{userAgent.browser.name}</td>
// <td>
// <CheckCircle className="circleButton" />
// </td>
// </tr>
// </tbody>
// <tbody>
// <tr>
// <td>Browser version</td>
// <td>{userAgent.browser.version}</td>
// <td>
// <CheckCircle className="circleButton" />
// </td>
// </tr>
// </tbody>
// <tbody>
// <tr>
// <td>OS</td>
// <td>
// {userAgent.os.name} {userAgent.os.versionName}
// </td>
// <td>
// <CheckCircle className="circleButton" />
// </td>
// </tr>
// </tbody>
// <tbody>
// <tr>
// <td>OS version</td>
// <td>{userAgent.os.version}</td>
// <td>
// <CheckCircle className="circleButton" />
// </td>
// </tr>
// </tbody>
// <tbody>
// <tr>
// <td>Engine</td>
// <td>
// {userAgent.engine.name} {userAgent.engine.version}
// </td>
// <td>
// <CheckCircle className="circleButton" />
// </td>
// </tr>
// </tbody>
// <tbody>
// <tr>
// <td>Platform type</td>
// <td>{userAgent.platform.type}</td>
// <td>
// <CheckCircle className="circleButton" />
// </td>
// </tr>
// </tbody>
// </table>
// </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 UserAgentBlock;
export default UserAgentBlock;

2
frontend/src/utils/common.js
View file

@ -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;

0
frontend/src/utils/conenction.js → frontend/src/utils/connection.js
View file

53
frontend/src/utils/userAgent.js Normal file
View file

@ -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;