From 46236137a4fef6c2eb050bfab84fd92663ae2230 Mon Sep 17 00:00:00 2001 From: z0ccc Date: Fri, 3 Sep 2021 15:53:08 -0400 Subject: [PATCH] Added screen block --- frontend/public/worker.js | 2 - frontend/src/components/Issues.js | 23 ---- frontend/src/components/NavigatorBlock.js | 36 ++---- frontend/src/components/NewTable.js | 27 ---- frontend/src/components/OldTable.js | 16 +++ frontend/src/components/ScanBlocks.js | 2 + frontend/src/components/ScreenBlock.js | 16 +++ frontend/src/components/Table.js | 34 ++--- frontend/src/components/TableRow.js | 40 ++++++ frontend/src/components/navigator.js | 146 +++++++++++++++------- frontend/src/styles/App.css | 10 +- 11 files changed, 215 insertions(+), 137 deletions(-) delete mode 100644 frontend/src/components/Issues.js delete mode 100644 frontend/src/components/NewTable.js create mode 100644 frontend/src/components/OldTable.js create mode 100644 frontend/src/components/ScreenBlock.js create mode 100644 frontend/src/components/TableRow.js diff --git a/frontend/public/worker.js b/frontend/public/worker.js index 617e62f..cf665fc 100644 --- a/frontend/public/worker.js +++ b/frontend/public/worker.js @@ -1,5 +1,3 @@ -/* eslint-disable import/prefer-default-export */ onmessage = (e) => { - console.log(e.data, navigator[e.data]); postMessage(navigator[e.data]); }; diff --git a/frontend/src/components/Issues.js b/frontend/src/components/Issues.js deleted file mode 100644 index 746f786..0000000 --- a/frontend/src/components/Issues.js +++ /dev/null @@ -1,23 +0,0 @@ -/* eslint-disable no-unused-vars */ -import parse from 'html-react-parser'; -import { useState, useEffect } from 'react'; -import { checkUndefinedProperties, checkWebWorker } from './navigator'; - -const Issues = ({ item }) => { - const [workerData, setWorkerData] = useState(); - useEffect(() => { - checkWebWorker(item, setWorkerData); - }, []); - - return ( - - {parse(checkUndefinedProperties(item))} -
- <>{workerData} - - ); - - // return {parse(checkUndefinedProperties(item), workerData)}; -}; - -export default Issues; diff --git a/frontend/src/components/NavigatorBlock.js b/frontend/src/components/NavigatorBlock.js index d66d35a..8161572 100644 --- a/frontend/src/components/NavigatorBlock.js +++ b/frontend/src/components/NavigatorBlock.js @@ -1,30 +1,16 @@ -/* eslint-disable no-unused-vars */ -/* eslint-disable arrow-body-style */ -import { useState, useEffect } from 'react'; import ScanBlock from './ScanBlock'; -import NewTable from './NewTable'; -import { getHardware, getWebGL, getBattery } from './main'; +import Table from './Table'; import { getNavigator } from './navigator'; -const NavigatorBlock = () => { - // const [data, setData] = useState([]); - - // useEffect(() => { - // getBattery().then((batteryInfo) => { - // setData([...getHardware(), ...getWebGL(), ...batteryInfo]); - // }); - // }, []); - - return ( - -

Navigator

- -

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

- - ); -}; +const NavigatorBlock = () => ( + +

Navigator

+ +

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

+ +); export default NavigatorBlock; diff --git a/frontend/src/components/NewTable.js b/frontend/src/components/NewTable.js deleted file mode 100644 index cdb0608..0000000 --- a/frontend/src/components/NewTable.js +++ /dev/null @@ -1,27 +0,0 @@ -/* eslint-disable no-unused-vars */ -import parse from 'html-react-parser'; -import { useState, useEffect } from 'react'; -import { checkUndefinedProperties } from './navigator'; -import Issues from './Issues'; - -const Table = ({ data }) => { - const [workerData, setWorkerData] = useState(); - - return ( -
-
- {data.map((item) => ( - - - - - - - - ))} -
{item.title}{item.value}
- - ); -}; - -export default Table; diff --git a/frontend/src/components/OldTable.js b/frontend/src/components/OldTable.js new file mode 100644 index 0000000..cb8c3b4 --- /dev/null +++ b/frontend/src/components/OldTable.js @@ -0,0 +1,16 @@ +const Table = ({ data }) => ( +
+ + {data.map((item) => ( + + + + + + + ))} +
{item.title}{item.value}
+
+); + +export default Table; diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js index 9a92af2..997f6ec 100644 --- a/frontend/src/components/ScanBlocks.js +++ b/frontend/src/components/ScanBlocks.js @@ -1,5 +1,6 @@ /* eslint-disable no-unused-vars */ import NavigatorBlock from './NavigatorBlock'; +import ScreenBlock from './ScreenBlock'; import FingerprintBlock from './FingerprintBlock'; import LocationBlock from './LocationBlock'; import HardwareBlock from './HardwareBlock'; @@ -10,6 +11,7 @@ import FiltersBlock from './FiltersBlock'; const ScanBlocks = () => ( <> + {/* diff --git a/frontend/src/components/ScreenBlock.js b/frontend/src/components/ScreenBlock.js new file mode 100644 index 0000000..885cb4d --- /dev/null +++ b/frontend/src/components/ScreenBlock.js @@ -0,0 +1,16 @@ +import ScanBlock from './ScanBlock'; +import Table from './Table'; +import { getScreen } from './navigator'; + +const ScreenBlock = () => ( + +

Screen

+ +

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

+ +); + +export default ScreenBlock; diff --git a/frontend/src/components/Table.js b/frontend/src/components/Table.js index cb8c3b4..f4b97e7 100644 --- a/frontend/src/components/Table.js +++ b/frontend/src/components/Table.js @@ -1,16 +1,22 @@ -const Table = ({ data }) => ( -
-
- {data.map((item) => ( - - - - - - - ))} -
{item.title}{item.value}
- -); +/* eslint-disable no-unused-vars */ +import parse from 'html-react-parser'; +import { useState, useEffect } from 'react'; +import Issues from './TableRow'; + +const Table = ({ data }) => { + const [workerData, setWorkerData] = useState(); + + return ( +
+ + {data.map((item) => ( + + + + ))} +
+
+ ); +}; export default Table; diff --git a/frontend/src/components/TableRow.js b/frontend/src/components/TableRow.js new file mode 100644 index 0000000..9682ad4 --- /dev/null +++ b/frontend/src/components/TableRow.js @@ -0,0 +1,40 @@ +/* eslint-disable no-unused-vars */ +import parse from 'html-react-parser'; +import { useState, useEffect } from 'react'; +import { + checkNavigatorProperties, + checkWebWorker, + checkScreenProperties, +} from './navigator'; + +const TableRow = ({ item }) => { + const [workerData, setWorkerData] = useState(''); + const [issues, setIssues] = useState(false); + + useEffect(() => { + if (item.issues !== '' || workerData !== '') { + setIssues(true); + } + checkWebWorker(item, setWorkerData); + }, []); + + useEffect(() => { + if (workerData !== '') { + setIssues(true); + } + }, [workerData]); + + return ( + + {item.title} + {item.value} + {parse(item.issues || '')} + {/* */} + {/* <>{parse(properties)} */} + {/* <>{parse(workerData)} */} + {/* */} + + ); +}; + +export default TableRow; diff --git a/frontend/src/components/navigator.js b/frontend/src/components/navigator.js index 19bb444..2e09944 100644 --- a/frontend/src/components/navigator.js +++ b/frontend/src/components/navigator.js @@ -1,5 +1,11 @@ /* eslint-disable dot-notation */ -export { getNavigator, checkUndefinedProperties, checkWebWorker }; +export { + getNavigator, + checkNavigatorProperties, + checkWebWorker, + getScreen, + checkScreenProperties, +}; const getNavigator = () => { const data = [ @@ -7,100 +13,85 @@ const getNavigator = () => { key: 'deviceMemory', title: 'Device memory', value: navigator.deviceMemory, + issues: checkNavigatorProperties('deviceMemory'), }, { key: 'hardwareConcurrency', title: 'Hardware Concurrency', value: navigator.hardwareConcurrency, + issues: checkNavigatorProperties('hardwareConcurrency'), }, { key: 'maxTouchPoints', title: 'Max touchpoints', value: navigator.maxTouchPoints, + issues: checkNavigatorProperties('maxTouchPoints'), }, { key: 'platform', title: 'Platform', value: navigator.platform, + issues: checkNavigatorProperties('platform'), }, { key: 'userAgent', title: 'User agent', value: navigator.userAgent, + issues: checkNavigatorProperties('userAgent'), }, { key: 'language', title: 'Language', - value: navigator.language, + value: navigator.userAgent, + issues: checkNavigatorProperties('userAgent'), }, { key: 'languages', title: 'Languages', value: navigator.languages, + issues: checkNavigatorProperties('languages'), }, { key: 'cookieEnabled', title: 'Cookies enabled', value: navigator.cookieEnabled ? 'True' : 'False', + issues: checkNavigatorProperties('cookieEnabled'), }, { key: 'doNotTrack', title: 'Do not track header', value: navigator.doNotTrack ? 'True' : 'False', + issues: checkNavigatorProperties('doNotTrack'), }, { key: 'webdriver', title: 'Webdriver', value: navigator.webdriver ? 'True' : 'False', + issues: checkNavigatorProperties('webdriver'), }, { key: 'plugins', title: 'Plugins', value: sortPlugins(navigator.plugins), - }, - // { - // key: 'connection', - // title: 'Connection', - // value: JSON.stringify(navigator.connection), - // prototype: Navigator.prototype.hardwareConcurrency, - // }, - // { - // key: 'geolocation', - // title: 'Geolocation', - // value: navigator.geolocation, - // prototype: Navigator.prototype.hardwareConcurrency, - // }, - // { - // key: 'hid', - // title: 'Hid', - // value: navigator.hid, - // prototype: Navigator.prototype.hardwareConcurrency, - // }, - // { - // key: 'keyboard', - // title: 'Keyboard', - // value: navigator.keyboard, - // prototype: Navigator.prototype.hardwareConcurrency, - // }, - { - key: 'onLine', - title: 'Online', - value: navigator.onLine ? 'True' : 'False', + issues: checkNavigatorProperties('plugins'), }, { key: 'vendor', title: 'Vendor', value: navigator.vendor, + issues: checkNavigatorProperties('vendor'), }, { key: 'appVersion', title: 'App version', value: navigator.appVersion, + issues: checkNavigatorProperties('appVersion'), }, { key: 'productSub', title: 'Product sub', value: navigator.productSub, + issues: checkNavigatorProperties('productSub'), }, ]; return data; @@ -118,33 +109,25 @@ const sortPlugins = (data) => { return list; }; -const checkUndefinedProperties = (obj) => { +const checkNavigatorProperties = (key) => { const list = []; - if (Object.getOwnPropertyDescriptor(navigator, obj.key) !== undefined) { + if (Object.getOwnPropertyDescriptor(navigator, key) !== undefined) { list.push('Failed undefined properties'); } if ( - Object.getOwnPropertyDescriptor(Navigator.prototype, obj.key).value !== + Object.getOwnPropertyDescriptor(Navigator.prototype, key).value !== undefined ) { list.push('Failed descriptor.value undefined'); } try { // eslint-disable-next-line no-unused-vars - const check = Navigator.prototype[obj.key]; + const check = Navigator.prototype[key]; list.push('Failed Navigator.prototype'); } catch (err) { // eslint-disable-next-line no-unused-vars const check = ''; } - // let frame = document.getElementById('testFrame'); - // if (!frame) { - // frame = document.createElement('iframe'); - // frame.setAttribute('id', 'testFrame'); - // document.body.appendChild(frame); - // } - // console.log(navigator.hardwareConcurrency); - return list.toString().split(',').join('
'); }; @@ -159,8 +142,81 @@ const checkWebWorker = (obj, setWorkerData) => { event.data !== undefined && event.data.toString() !== navigator[obj.key].toString() ) { - console.log(event.data, navigator[obj.key]); - setWorkerData('Did not match web worker'); + setWorkerData('
Did not match web worker'); } }; }; + +const getScreen = () => { + const data = [ + { + key: 'width', + title: 'Width', + value: window.screen.width, + issues: checkScreenProperties('width'), + }, + // { + // key: 'outerWidth', + // title: 'Outer width', + // value: window.outerWidth, + // }, + { + key: 'availWidth', + title: 'Avail width', + value: window.screen.availWidth, + issues: checkScreenProperties('availWidth'), + }, + { + key: 'height', + title: 'Height', + value: window.screen.height, + issues: checkScreenProperties('height'), + }, + // { + // key: 'outerHeight', + // title: 'Outer height', + // value: window.outerHeight, + // }, + { + key: 'availHeight', + title: 'Avail height', + value: window.screen.availHeight, + issues: checkScreenProperties('availHeight'), + }, + { + key: 'pixelDepth', + title: 'Pixel depth', + value: window.screen.pixelDepth, + issues: checkScreenProperties('pixelDepth'), + }, + { + key: 'colorDepth', + title: 'Color depth', + value: window.screen.colorDepth, + issues: checkScreenProperties('colorDepth'), + }, + ]; + return data; +}; + +const checkScreenProperties = (key) => { + const list = []; + if (Object.getOwnPropertyDescriptor(window.screen, key) !== undefined) { + list.push('Failed undefined properties'); + } + if ( + Object.getOwnPropertyDescriptor(Screen.prototype, key).value !== undefined + ) { + list.push('Failed descriptor.value undefined'); + } + try { + // eslint-disable-next-line no-unused-vars + const check = Screen.prototype[key]; + list.push('Failed Navigator.prototype'); + } catch (err) { + // eslint-disable-next-line no-unused-vars + const check = ''; + } + + return list.toString().split(',').join('
'); +}; diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css index 2f7b94c..0d9b93d 100644 --- a/frontend/src/styles/App.css +++ b/frontend/src/styles/App.css @@ -3,6 +3,9 @@ --grey: #9fa6b2; --text: #4b5563; --border: #ddd; + --issueBackground: #f8d7da; + --issueBorder: #f5c6cb; + --issueText: #721c24; } .App { @@ -148,7 +151,6 @@ tr:hover { td { vertical-align: top; padding: 12px; - word-break: break-all; } td:first-child { @@ -205,6 +207,12 @@ input[type='text'] { background-color: var(--border); } +.issue { + background-color: var(--issueBackground); + color: var(--issueText); + border: 1px solid var(--issueBorder); +} + @media screen and (max-width: 500px) { .github { width: 24px;