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} |
-
-
-
- ))}
-
-
+
+ {data.map((item) => (
+
+
+ | {item.title} |
+ {item.value} |
+
+
+ ))}
+
+
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} |
-
-
- ))}
-
-
+
+ {data.map((item) => (
+
+
+
+ ))}
+
+
+ | {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;