diff --git a/frontend/src/components/Blocks.js b/frontend/src/components/Blocks.js
index 8bef219..7565a41 100644
--- a/frontend/src/components/Blocks.js
+++ b/frontend/src/components/Blocks.js
@@ -14,7 +14,7 @@ import FiltersBlock from './FiltersBlock';
// import FontsBlock from './FontsBlock';
import { fetchAPI, getWebWorker } from '../utils/common';
-const ScanBlocks = () => {
+const Blocks = () => {
const [workerData, setWorkerData] = useState();
const [connectionData, setConnectionData] = useState('');
@@ -44,7 +44,7 @@ const ScanBlocks = () => {
connectionData={connectionData}
/>
- {/* */}
+
>
) : (
@@ -56,4 +56,4 @@ const ScanBlocks = () => {
);
};
-export default ScanBlocks;
+export default Blocks;
diff --git a/frontend/src/components/ConnectionBlock.js b/frontend/src/components/ConnectionBlock.js
index d2bc433..479e3d7 100644
--- a/frontend/src/components/ConnectionBlock.js
+++ b/frontend/src/components/ConnectionBlock.js
@@ -1,16 +1,16 @@
-import ScanBlock from './Block';
+import Block from './Block';
import Table from './Table';
import { getConnection } from '../utils/connection';
const LocationBlock = ({ connectionData }) => (
-
+
Connection
Explanation: Your IP address reveals information about your
connection. Using a VPN or Tor will hide your connection info.
-
+
);
export default LocationBlock;
diff --git a/frontend/src/components/FiltersBlock.js b/frontend/src/components/FiltersBlock.js
index e00bea8..44ecf52 100644
--- a/frontend/src/components/FiltersBlock.js
+++ b/frontend/src/components/FiltersBlock.js
@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
-import ScanBlock from './Block';
+import Block from './Block';
import Table from './Table';
const FiltersBlock = () => {
@@ -24,7 +24,7 @@ const FiltersBlock = () => {
];
return (
-
+
Content Filters
@@ -32,7 +32,7 @@ const FiltersBlock = () => {
you against certain methods of tracking, it can also be used as another
identification metric.
-
+
);
};
diff --git a/frontend/src/components/FingerprintBlock.js b/frontend/src/components/FingerprintBlock.js
index 94dfbac..805487e 100644
--- a/frontend/src/components/FingerprintBlock.js
+++ b/frontend/src/components/FingerprintBlock.js
@@ -1,5 +1,5 @@
import { useState } from 'react';
-import ScanBlock from './Block';
+import Block from './Block';
import Table from './Table';
import {
getHardware,
@@ -18,7 +18,7 @@ const FingerprintBlock = () => {
const hash = getHash([...getHardware(), ...getWebGL(), ...getSoftware()]);
getName(hash, setName, setLoad);
return (
-
+
Fingerprint
{load && (
<>
@@ -49,7 +49,7 @@ const FingerprintBlock = () => {
)}
-
+
);
};
diff --git a/frontend/src/components/FontsBlock.js b/frontend/src/components/FontsBlock.js
index 1c85c35..ada90a2 100644
--- a/frontend/src/components/FontsBlock.js
+++ b/frontend/src/components/FontsBlock.js
@@ -1,5 +1,5 @@
import { useEffect } from 'react';
-import ScanBlock from './ScanBlock';
+import Block from './Block';
import fontList from '../fontList.json';
const FontsBlock = () => {
@@ -45,7 +45,7 @@ const FontsBlock = () => {
}, []);
return (
-
+
System Fonts
@@ -54,7 +54,7 @@ const FontsBlock = () => {
fonts that you have installed that aren't common for your system
can make you easily identifiable.
-
+
);
};
diff --git a/frontend/src/components/HardwareBlock.js b/frontend/src/components/HardwareBlock.js
index 12b68b6..bba5bf8 100644
--- a/frontend/src/components/HardwareBlock.js
+++ b/frontend/src/components/HardwareBlock.js
@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
-import ScanBlock from './Block';
+import Block from './Block';
import Table from './Table';
import { getHardware, getWebGL, getBattery } from './mainOld';
@@ -13,14 +13,14 @@ const HardwareBlock = () => {
}, []);
return (
-
+
Hardware
Explanation: JavaScript can be used to find information about
your hardware. This information can be used to create a fingerprint.
-
+
);
};
diff --git a/frontend/src/components/IntlBlock.js b/frontend/src/components/IntlBlock.js
index ba90f36..4614869 100644
--- a/frontend/src/components/IntlBlock.js
+++ b/frontend/src/components/IntlBlock.js
@@ -1,12 +1,12 @@
/* eslint-disable no-unused-vars */
import { useState, useEffect } from 'react';
-import ScanBlock from './Block';
+import Block from './Block';
import Table from './Table';
import { getIntl } from './main';
import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
const DateBlock = () => (
-
+
Intl
@@ -29,7 +29,7 @@ const DateBlock = () => (
Explanation: JavaScript can be used to find information about your
hardware. This information can be used to create a fingerprint.
-
+
);
export default DateBlock;
diff --git a/frontend/src/components/LocationBlock.js b/frontend/src/components/LocationBlock.js
index 9fb484f..d9ef891 100644
--- a/frontend/src/components/LocationBlock.js
+++ b/frontend/src/components/LocationBlock.js
@@ -1,9 +1,9 @@
-import ScanBlock from './Block';
+import Block from './Block';
import Table from './Table';
import { getMap, getLocation } from '../utils/connection';
const LocationBlock = ({ connectionData, workerData }) => (
-
+
Location
@@ -11,7 +11,7 @@ const LocationBlock = ({ connectionData, workerData }) => (
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/NavigatorBlock.js b/frontend/src/components/NavigatorBlock.js
index 84ccc52..401a977 100644
--- a/frontend/src/components/NavigatorBlock.js
+++ b/frontend/src/components/NavigatorBlock.js
@@ -1,16 +1,16 @@
-import ScanBlock from './Block';
+import Block from './Block';
import Table from './Table';
import getNavigator from '../utils/navigator';
const NavigatorBlock = ({ workerData }) => (
-
+
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/OtherBloc2.js b/frontend/src/components/OtherBloc2.js
new file mode 100644
index 0000000..b6cc975
--- /dev/null
+++ b/frontend/src/components/OtherBloc2.js
@@ -0,0 +1,77 @@
+/* eslint-disable arrow-body-style */
+/* eslint-disable no-unused-vars */
+import { useState, useEffect } from 'react';
+import Block from './Block';
+import { detectTor } from './main';
+
+const OtherBlock = () => {
+ const [adBlockDetected, setAdBlockDetected] = useState(false);
+ const [batteryLevel, setBatteryLevel] = useState();
+ const [batteryStatus, setBatteryStatus] = useState();
+
+ useEffect(() => {
+ fetch('https://www3.doubleclick.net', {
+ method: 'HEAD',
+ mode: 'no-cors',
+ cache: 'no-store',
+ }).catch(() => {
+ setAdBlockDetected(true);
+ });
+
+ navigator.getBattery().then((res) => {
+ setBatteryLevel(`${Math.round(res.level * 100)}%`);
+ setBatteryStatus(res.charging ? 'Charging' : 'Not charging');
+ });
+ }, []);
+
+ return (
+
+ Other
+
+
+
+
+ Brave browser
+ {navigator.brave ? 'True' : 'False'}
+
+
+
+
+ Tor Browser
+ {detectTor() ? 'True' : 'False'}
+
+
+
+
+ Adblock
+ {adBlockDetected ? 'True' : 'False'}
+
+
+
+
+ Timezone offset
+ {new Date().getTimezoneOffset()}
+
+
+
+
+ Battery level
+ {batteryLevel}
+
+
+
+
+ Battery status
+ {batteryStatus}
+
+
+
+
+
+ Explanation: JavaScript can be used to find information about
+ your hardware. This information can be used to create a fingerprint.
+
+
+ );
+};
+export default OtherBlock;
diff --git a/frontend/src/components/OtherBlock.js b/frontend/src/components/OtherBlock.js
index 69737bb..65914e0 100644
--- a/frontend/src/components/OtherBlock.js
+++ b/frontend/src/components/OtherBlock.js
@@ -1,77 +1,43 @@
-/* eslint-disable arrow-body-style */
/* eslint-disable no-unused-vars */
import { useState, useEffect } from 'react';
-import ScanBlock from './Block';
-import { detectTor } from './main';
-const OtherBlock = () => {
- const [adBlockDetected, setAdBlockDetected] = useState(false);
- const [batteryLevel, setBatteryLevel] = useState();
- const [batteryStatus, setBatteryStatus] = useState();
+import Block from './Block';
+import Table from './Table';
+import getOther from '../utils/other';
+
+const OtherBlock = ({ workerAgent }) => {
+ const [adBlock, setAdBlock] = useState();
+ const [battery, setBattery] = useState();
useEffect(() => {
fetch('https://www3.doubleclick.net', {
method: 'HEAD',
mode: 'no-cors',
cache: 'no-store',
- }).catch(() => {
- setAdBlockDetected(true);
- });
-
+ })
+ .then(() => {
+ setAdBlock(false);
+ })
+ .catch(() => {
+ setAdBlock(true);
+ });
navigator.getBattery().then((res) => {
- setBatteryLevel(`${Math.round(res.level * 100)}%`);
- setBatteryStatus(res.charging ? 'Charging' : 'Not charging');
+ setBattery(res);
});
}, []);
return (
-
+
Other
-
-
-
-
- Brave browser
- {navigator.brave ? 'True' : 'False'}
-
-
-
-
- Tor Browser
- {detectTor() ? 'True' : 'False'}
-
-
-
-
- Adblock
- {adBlockDetected ? 'True' : 'False'}
-
-
-
-
- Timezone offset
- {new Date().getTimezoneOffset()}
-
-
-
-
- Battery level
- {batteryLevel}
-
-
-
-
- Battery status
- {batteryStatus}
-
-
-
-
+ {battery && adBlock !== undefined && (
+
+ )}
Explanation: JavaScript can be used to find information about
your hardware. This information can be used to create a fingerprint.
-
+
);
};
+
export default OtherBlock;
diff --git a/frontend/src/components/ScreenBlock.js b/frontend/src/components/ScreenBlock.js
index 8504921..b5b2862 100644
--- a/frontend/src/components/ScreenBlock.js
+++ b/frontend/src/components/ScreenBlock.js
@@ -1,16 +1,16 @@
-import ScanBlock from './Block';
+import Block from './Block';
import Table from './Table';
import getScreen from '../utils/screen';
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/SoftwareBlock.js b/frontend/src/components/SoftwareBlock.js
index 7ecae12..89af4c7 100644
--- a/frontend/src/components/SoftwareBlock.js
+++ b/frontend/src/components/SoftwareBlock.js
@@ -1,16 +1,16 @@
-import ScanBlock from './Block';
+import Block from './Block';
import Table from './Table';
import { getSoftware } from './mainOld';
const SoftwareBlock = () => (
-
+
Software
Explanation: JavaScript can be used to find information about your
software. This information can be used to create a fingerprint.
-
+
);
export default SoftwareBlock;
diff --git a/frontend/src/components/StartBlock.js b/frontend/src/components/StartBlock.js
index 08db904..1e720d3 100644
--- a/frontend/src/components/StartBlock.js
+++ b/frontend/src/components/StartBlock.js
@@ -1,5 +1,5 @@
import ContentList from './ContentList';
-import ScanBlock from './ScanBlock';
+import Block from './Block';
const contentItems = [
{
@@ -20,7 +20,7 @@ const contentItems = [
];
const StartBlock = ({ setScan }) => (
-
+
About
Vytal shows you what traces your browser leaves behind while surfing the
@@ -34,7 +34,7 @@ const StartBlock = ({ setScan }) => (
id="scanButton"
value="Scan Browser"
/>
-
+
);
export default StartBlock;
diff --git a/frontend/src/components/UserAgentBlock.js b/frontend/src/components/UserAgentBlock.js
index 3101290..92d357a 100644
--- a/frontend/src/components/UserAgentBlock.js
+++ b/frontend/src/components/UserAgentBlock.js
@@ -1,17 +1,16 @@
-/* eslint-disable no-unused-vars */
-import ScanBlock from './Block';
+import Block from './Block';
import Table from './Table';
import getUserAgent from '../utils/userAgent';
const UserAgentBlock = ({ workerAgent }) => (
-
+
User Agent
Explanation: JavaScript can be used to find information about your
hardware. This information can be used to create a fingerprint.
-
+
);
export default UserAgentBlock;
diff --git a/frontend/src/utils/other.js b/frontend/src/utils/other.js
new file mode 100644
index 0000000..a7780ea
--- /dev/null
+++ b/frontend/src/utils/other.js
@@ -0,0 +1,66 @@
+/* eslint-disable no-unused-vars */
+import { checkWebWorker } from './common';
+
+const detectTor = () => {
+ const date = new Date();
+ if (
+ navigator.plugins.length === 0 &&
+ date.getTimezoneOffset() === 0 &&
+ window.outerWidth === window.screen.availWidth &&
+ window.outerHeight === window.screen.availHeight
+ ) {
+ return true;
+ }
+ return false;
+};
+
+const checkDatePrototype = () => {
+ if (!Date.prototype.setDate.toString().includes('[native code]')) {
+ return 'Failed Date.prototype.setDate.toString()';
+ }
+ return null;
+};
+
+// Returns object with location data
+const getOther = (battery, adBlock) => {
+ const workerAgentParsed = 1;
+ return [
+ {
+ key: 'Brave browser',
+ value: navigator.brave ? 'True' : 'False',
+ issues: [],
+ },
+ {
+ key: 'Tor browser',
+ value: detectTor() ? 'True' : 'False',
+ issues: [],
+ },
+ {
+ key: 'Adblock',
+ value: adBlock ? 'True' : 'False',
+ issues: [],
+ },
+ {
+ key: 'Date',
+ value: new Date().toString(),
+ issues: [checkDatePrototype()],
+ },
+ {
+ key: 'Timezone offset',
+ value: new Date().getTimezoneOffset(),
+ issues: [checkDatePrototype()],
+ },
+ {
+ key: 'Battery level',
+ value: `${Math.round(battery.level * 100)}%`,
+ issues: [],
+ },
+ {
+ key: 'Battery status',
+ value: battery.charging ? 'Charging' : 'Not charging',
+ issues: [],
+ },
+ ];
+};
+
+export default getOther;
diff --git a/frontend/src/utils/userAgent.js b/frontend/src/utils/userAgent.js
index 9b19b98..7e2994d 100644
--- a/frontend/src/utils/userAgent.js
+++ b/frontend/src/utils/userAgent.js
@@ -1,6 +1,3 @@
-/* eslint-disable no-unused-vars */
-/* eslint-disable import/prefer-default-export */
-
import Bowser from 'bowser';
import { checkWebWorker } from './common';
@@ -14,7 +11,6 @@ const getUserAgentData = (key, userAgent, workerAgent) => ({
const getUserAgent = (workerAgent) => {
const userAgentParsed = Bowser.parse(navigator.userAgent);
const workerAgentParsed = Bowser.parse(workerAgent);
- console.log(userAgentParsed, workerAgentParsed);
return [
getUserAgentData(
'Browser',