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

Added screen block

Browse source
This commit is contained in:
z0ccc 2021-09-03 15:53:08 -04:00
parent 5b7a28fd61
commit 46236137a4
11 changed files with 215 additions and 137 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/public/worker.js
View file

@ -1,5 +1,3 @@
/* eslint-disable import/prefer-default-export */
onmessage = (e) => {
console.log(e.data, navigator[e.data]);
postMessage(navigator[e.data]);
};

23
frontend/src/components/Issues.js
View file

@ -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 (
<td>
{parse(checkUndefinedProperties(item))}
<br />
<>{workerData}</>
</td>
);
// return <td>{parse(checkUndefinedProperties(item), workerData)}</td>;
};
export default Issues;

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

@ -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 (
const NavigatorBlock = () => (
<ScanBlock>
<h1>Navigator</h1>
<NewTable data={getNavigator()} />
<Table type="navigator" data={getNavigator()} />
<p>
<b>Explanation:</b> JavaScript can be used to find information about
your hardware. This information can be used to create a fingerprint.
<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 NavigatorBlock;

27
frontend/src/components/NewTable.js
View file

@ -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 (
<div className="tableWrap">
<table>
{data.map((item) => (
<tbody key={item.key}>
<tr>
<td>{item.title}</td>
<td>{item.value}</td>
<Issues item={item} />
</tr>
</tbody>
))}
</table>
</div>
);
};
export default Table;

16
frontend/src/components/OldTable.js Normal file
View file

@ -0,0 +1,16 @@
const Table = ({ data }) => (
<div className="tableWrap">
<table>
{data.map((item) => (
<tbody key={item.title}>
<tr>
<td>{item.title}</td>
<td>{item.value}</td>
</tr>
</tbody>
))}
</table>
</div>
);
export default Table;

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

@ -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 = () => (
<>
<ScreenBlock />
<NavigatorBlock />
{/* <FingerprintBlock />
<LocationBlock />

16
frontend/src/components/ScreenBlock.js Normal file
View file

@ -0,0 +1,16 @@
import ScanBlock from './ScanBlock';
import Table from './Table';
import { getScreen } from './navigator';
const ScreenBlock = () => (
<ScanBlock>
<h1>Screen</h1>
<Table type="screen" data={getScreen()} />
<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 ScreenBlock;

18
frontend/src/components/Table.js
View file

@ -1,16 +1,22 @@
const Table = ({ data }) => (
/* 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 (
<div className="tableWrap">
<table>
{data.map((item) => (
<tbody key={item.title}>
<tr>
<td>{item.title}</td>
<td>{item.value}</td>
</tr>
<tbody key={item.key}>
<Issues item={item} />
</tbody>
))}
</table>
</div>
);
};
export default Table;

40
frontend/src/components/TableRow.js Normal file
View file

@ -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 (
<tr className={issues ? 'issue' : ''}>
<td>{item.title}</td>
<td>{item.value}</td>
<td>{parse(item.issues || '')}</td>
{/* <td> */}
{/* <>{parse(properties)}</> */}
{/* <>{parse(workerData)}</> */}
{/* </td> */}
</tr>
);
};
export default TableRow;

146
frontend/src/components/navigator.js
View file

@ -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('<br />');
};
@ -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('<br />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('<br />');
};

10
frontend/src/styles/App.css
View file

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