From 780eac5aac8b3d0cac2e1a56ade01a2b1bb0d444 Mon Sep 17 00:00:00 2001 From: z0ccc Date: Mon, 27 Sep 2021 16:10:40 -0400 Subject: [PATCH] Added connection block --- frontend/public/worker.js | 11 ++- frontend/src/components/ConnectionBlock.js | 42 ++++------ frontend/src/components/LocationBlock.js | 46 ++++------- frontend/src/components/ScanBlocks.js | 66 ++++++++++------ frontend/src/components/Table.js | 29 +++---- frontend/src/components/TableRow.js | 86 +++++++-------------- frontend/src/images/x.svg | 1 + frontend/src/utils/common.js | 18 +++++ frontend/src/utils/conenction.js | 89 ++++++++++++++++++++++ 9 files changed, 225 insertions(+), 163 deletions(-) create mode 100644 frontend/src/images/x.svg create mode 100644 frontend/src/utils/common.js create mode 100644 frontend/src/utils/conenction.js diff --git a/frontend/public/worker.js b/frontend/public/worker.js index cf665fc..93b3fce 100644 --- a/frontend/public/worker.js +++ b/frontend/public/worker.js @@ -1,3 +1,10 @@ -onmessage = (e) => { - postMessage(navigator[e.data]); +const data = { + locale: Intl.DateTimeFormat().resolvedOptions().locale, + timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone, + timezoneOffset: new Date().getTimezoneOffset(), + date: new Date().toString(), + language: navigator.language, + languages: navigator.languages, }; + +postMessage(data); diff --git a/frontend/src/components/ConnectionBlock.js b/frontend/src/components/ConnectionBlock.js index 64de5ea..aa0b993 100644 --- a/frontend/src/components/ConnectionBlock.js +++ b/frontend/src/components/ConnectionBlock.js @@ -1,32 +1,16 @@ -import { useState, useEffect } from 'react'; import ScanBlock from './ScanBlock'; -import Table from './OldTable'; -import { fetchAPI, getConnection } from './mainOld'; +import Table from './Table'; +import { getConnection } from '../utils/conenction'; -const ConnectionBlock = () => { - const [data, setData] = useState(''); - const [display, setDisplay] = useState(''); +const LocationBlock = ({ connectionData }) => ( + +

Connection

+ +

+ Explanation: Your IP address reveals information about your + connection. Using a VPN or Tor will hide your connection info. +

+ +); - useEffect(() => { - fetchAPI(setData, setDisplay); - }, []); - - return ( - -

Connection

- {display === 1 &&
} - {display === 0 && ( -
- Unable to fetch info. Adblock or content filter may have prevented - data from loading. -
- )} -

- Explanation: Your IP address reveals information about your - connection. Using a VPN or Tor will hide your connection info. -

- - ); -}; - -export default ConnectionBlock; +export default LocationBlock; diff --git a/frontend/src/components/LocationBlock.js b/frontend/src/components/LocationBlock.js index d03077e..46d090f 100644 --- a/frontend/src/components/LocationBlock.js +++ b/frontend/src/components/LocationBlock.js @@ -1,37 +1,17 @@ -import { useState, useEffect } from 'react'; import ScanBlock from './ScanBlock'; -import Table from './OldTable'; -import { fetchAPI, getLocation, getMap } from './mainOld'; +import Table from './Table'; +import { getMap, getLocation } from '../utils/conenction'; -const LocationBlock = () => { - const [data, setData] = useState([]); - const [display, setDisplay] = useState(''); - - useEffect(() => { - fetchAPI(setData, setDisplay); - }, []); - - return ( - -

Location

- {display === 1 && ( - <> - Map of current location -
- - )} - {display === 0 && ( -
- Unable to fetch info. Adblock or content filter may have prevented - data from loading. -
- )} -

- Explanation: Your IP address can be used to determine your - location. Using a VPN or Tor will hide your true location. -

- - ); -}; +const LocationBlock = ({ connectionData, workerData }) => ( + +

Location

+ Map of current location +
+

+ Explanation: Your IP address can be used to determine your + location. Using a VPN or Tor will hide your true location. +

+ +); export default LocationBlock; diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js index 3a7b834..f218d83 100644 --- a/frontend/src/components/ScanBlocks.js +++ b/frontend/src/components/ScanBlocks.js @@ -1,4 +1,5 @@ /* eslint-disable no-unused-vars */ +import { useState, useEffect } from 'react'; import UserAgentBlock from './UserAgentBlock'; import IntlBlock from './IntlBlock'; import OtherBlock from './OtherBlock'; @@ -11,29 +12,48 @@ import SoftwareBlock from './SoftwareBlock'; import ConnectionBlock from './ConnectionBlock'; import FiltersBlock from './FiltersBlock'; // import FontsBlock from './FontsBlock'; +import { fetchAPI, getWebWorker } from '../utils/common'; -const ScanBlocks = () => ( - <> -
- - - - -
-
- - - - -
- {/* - - - - - */} - {/* */} - -); +const ScanBlocks = () => { + const [workerData, setWorkerData] = useState(); + const [connectionData, setConnectionData] = useState(''); + + useEffect(() => { + getWebWorker().onmessage = (event) => { + setWorkerData(event.data); + fetchAPI(setConnectionData); + }; + }, []); + return ( + <> + {connectionData ? ( + <> +
+ {/* + + + */} +
+
+ + + {/* + */} +
+ + ) : ( +
+
Loading...
+
+ )} + + ); +}; export default ScanBlocks; diff --git a/frontend/src/components/Table.js b/frontend/src/components/Table.js index 1295b6a..f0b5402 100644 --- a/frontend/src/components/Table.js +++ b/frontend/src/components/Table.js @@ -1,22 +1,15 @@ -/* eslint-disable no-unused-vars */ -import parse from 'html-react-parser'; -import { useState, useEffect } from 'react'; import TableRow from './TableRow'; -const Table = ({ data }) => { - const [workerData, setWorkerData] = useState(); - - return ( -
-
- {data.map((item) => ( - - - - ))} -
- - ); -}; +const Table = ({ data }) => ( +
+ + {data.map((item) => ( + + + + ))} +
+
+); export default Table; diff --git a/frontend/src/components/TableRow.js b/frontend/src/components/TableRow.js index 39a5414..63cc417 100644 --- a/frontend/src/components/TableRow.js +++ b/frontend/src/components/TableRow.js @@ -1,19 +1,10 @@ -/* eslint-disable react/button-has-type */ -/* eslint-disable react/jsx-indent-props */ -/* eslint-disable no-return-assign */ -/* eslint-disable no-unused-vars */ -import parse from 'html-react-parser'; -import { useState, useEffect } from 'react'; import Modal from 'react-modal'; -import { - checkNavigatorProperties, - checkWebWorker, - checkScreenProperties, -} from './main'; +import { useState } from 'react'; import { ReactComponent as XCircle } from '../images/xCircle.svg'; import { ReactComponent as CheckCircle } from '../images/checkCircle.svg'; +import { ReactComponent as X } from '../images/x.svg'; -const customStyles = { +const modalStyles = { content: { top: '50%', left: '50%', @@ -21,74 +12,53 @@ const customStyles = { bottom: 'auto', marginRight: '-50%', transform: 'translate(-50%, -50%)', + padding: '18px', + border: '1px solid var(--border)', + borderRadius: '6px', }, }; Modal.setAppElement('#root'); const TableRow = ({ item }) => { - const [workerData, setWorkerData] = useState(''); - const [issues, setIssues] = useState(false); + const issues = item.issues.filter(Boolean).length !== 0; const [modalIsOpen, setIsOpen] = useState(false); const openModal = () => { if (issues) setIsOpen(true); }; - const afterOpenModal = () => {}; - const closeModal = () => { setIsOpen(false); }; - - useEffect(() => { - if (item.issues.filter(Boolean).length !== 0) { - setIssues(true); - } - checkWebWorker(item.key, setWorkerData); - }, []); - - useEffect(() => { - if (workerData !== '') { - setIssues(true); - } - }, [workerData]); - return ( - <> - - {item.key} - {item.value} - - {issues ? ( - <> - - - ) : ( - - )} - - + + {item.key} + {item.value} + + {issues ? ( + + ) : ( + + )} + - - <> - {item.issues.map((ele, index) => ( -
- {ele} -
+
+
{item.key} issues
+ +
+
    + {item.issues.filter(Boolean).map((ele, index) => ( +
  • {ele}
    • ))} -
    - {workerData && <>{`Did not match web worker (${workerData})`}} -
    - +
- + ); }; diff --git a/frontend/src/images/x.svg b/frontend/src/images/x.svg new file mode 100644 index 0000000..c528bcd --- /dev/null +++ b/frontend/src/images/x.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/utils/common.js b/frontend/src/utils/common.js new file mode 100644 index 0000000..b2b2473 --- /dev/null +++ b/frontend/src/utils/common.js @@ -0,0 +1,18 @@ +export { fetchAPI, getWebWorker }; + +// Gets location values +const fetchAPI = (setData) => { + fetch('https://api.vytal.io/ip/') + .then((response) => response.json()) + .then((json) => { + setData(json); + }); +}; + +const getWebWorker = () => { + let w; + if (typeof w === 'undefined') { + w = new Worker('worker.js'); + } + return w; +}; diff --git a/frontend/src/utils/conenction.js b/frontend/src/utils/conenction.js new file mode 100644 index 0000000..32a1699 --- /dev/null +++ b/frontend/src/utils/conenction.js @@ -0,0 +1,89 @@ +export { getMap, getConnection, getLocation }; + +const getMap = (data) => + `https://maps.googleapis.com/maps/api/staticmap?center=${data.lat},${data.lon}&markers=color:red%7Clabel:%7C${data.lat},${data.lon}&size=500x200&zoom=10&key=AIzaSyB-YN-X8PGBSPd7NOaQu4csVhgJUnF3ZGk`; + +const compareTimeZone = (locationTimeZone, workerTimeZone) => { + if (locationTimeZone !== workerTimeZone) { + return "Location data doesn't match system data"; + } + return null; +}; + +const checkProxy = (proxy) => { + if (proxy) { + return 'VPN/proxy has been detected'; + } + return null; +}; + +// Returns object with location data +const getLocation = (data, workerData) => { + const timeZoneIssue = compareTimeZone(data.timezone, workerData.timeZone); + const isProxy = checkProxy(data.proxy); + return [ + { + key: 'Country', + value: data.country, + issues: [timeZoneIssue, isProxy], + }, + { + key: 'Region', + value: data.regionName, + issues: [timeZoneIssue, isProxy], + }, + { + key: 'City', + value: data.city, + issues: [timeZoneIssue, isProxy], + }, + { + key: 'Time zone', + value: data.timezone, + issues: [timeZoneIssue, isProxy], + }, + { + key: 'Zip code', + value: data.zip, + issues: [timeZoneIssue, isProxy], + }, + { + key: 'Latitude', + value: data.lat, + issues: [timeZoneIssue, isProxy], + }, + { + key: 'Longitude', + value: data.lon, + issues: [timeZoneIssue, isProxy], + }, + ]; +}; + +// Returns object with location data +const getConnection = (data) => { + console.log(data); + const isProxy = checkProxy(data.proxy); + return [ + { + key: 'IP address', + value: data.query, + issues: [isProxy], + }, + { + key: 'ISP', + value: data.isp, + issues: [isProxy], + }, + { + key: 'Organization', + value: data.org, + issues: [isProxy], + }, + { + key: 'ASN', + value: data.as, + issues: [isProxy], + }, + ]; +};