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

Map of current 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',