Added code data on row hover

frontend/src/components/FingerprintBlock.js

@@ -35,10 +35,9 @@ const FingerprintBlock = ({ workerData }) => {
         </>
       )}
       <p>
-        <b>Explanation:</b> This is a unique identifier that can be used to
+        <b>Explanation:</b> This hash is calculated from your device data. Even
-        follow you around the web. Even if you clear cookies, change your IP or
+        if you clear cookies, change your IP or use private mode the hash will
-        use private mode the hash will stay the same. Enter your name below and
+        stay the same. Enter a signature and turn on a VPN to test it out.
-        reload the page in private mode to test it out.
       </p>
       <form onSubmit={(e) => postSignature(hash, e.target[0].value)}>
         <input

frontend/src/components/NavigatorBlock.js

@@ -7,8 +7,8 @@ const NavigatorBlock = ({ workerData }) => (
     <h1>Navigator</h1>
     <Table data={getNavigator(workerData)} />
     <p>
-      <b>Explanation:</b> JavaScript can be used to find information about your
+      <b>Explanation:</b> The Navigator interface exposes info about your
-      hardware. This information can be used to create a fingerprint.
+      computer.
     </p>
   </Block>
 );

frontend/src/components/UserAgentBlock.js

@@ -7,8 +7,17 @@ const UserAgentBlock = ({ workerAgent }) => (
     <h1>User Agent</h1>
     <Table data={getUserAgent(workerAgent)} />
     <p>
-      <b>Explanation:</b> JavaScript can be used to find information about your
+      <b>Explanation:</b> Your user agent can be parsed to determine information
-      hardware. This information can be used to create a fingerprint.
+      about your browser or operating system.{' '}
+      <a
+        className="link"
+        target="_blank"
+        rel="noreferrer"
+        alt="Read more about user agent"
+        href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent"
+      >
+        Read more
+      </a>
     </p>
   </Block>
 );

frontend/src/utils/intl.js

@@ -2,6 +2,7 @@ import { checkWebWorker } from './common';
 
 const getLocale = (locale) => ({
   key: 'Locale',
+  code: 'Intl.DateTimeFormat().resolvedOptions().locale',
   value: Intl.DateTimeFormat().resolvedOptions().locale,
   issues: [
     checkWebWorker(Intl.DateTimeFormat().resolvedOptions().locale, locale),
@@ -10,6 +11,7 @@ const getLocale = (locale) => ({
 
 const getTimezone = (timeZone) => ({
   key: 'Timezone',
+  code: 'Intl.DateTimeFormat().resolvedOptions().timeZone',
   value: Intl.DateTimeFormat().resolvedOptions().timeZone,
   issues: [
     checkWebWorker(Intl.DateTimeFormat().resolvedOptions().timeZone, timeZone),

frontend/src/utils/other.js

@@ -30,6 +30,7 @@ const getOther = (battery, adBlock, workerData) => {
   return [
     {
       key: 'Brave browser',
+      code: 'navigator.brave',
       value: navigator.brave ? 'True' : 'False',
       issues: [],
     },
@@ -45,11 +46,13 @@ const getOther = (battery, adBlock, workerData) => {
     },
     {
       key: 'Date',
+      code: 'new Date().toString()',
       value: new Date().toString(),
       issues: [checkDatePrototype()],
     },
     {
       key: 'Timezone offset',
+      code: 'new Date().getTimezoneOffset()',
       value: new Date().getTimezoneOffset(),
       issues: [
         checkDatePrototype(),

frontend/src/utils/screen.js

@@ -1,6 +1,7 @@
-const getWidth = () => ({
+const getWidth = (key) => ({
-  key: 'width',
+  key: 'Width',
-  value: window.screen.width,
+  code: `window.screen.${key}`,
+  value: window.screen[key],
   issues: [
     checkScreenProperties('width'),
     checkScreenValue('width'),
@@ -9,16 +10,10 @@ const getWidth = () => ({
   ],
 });
 
-const getOuterWidth = () => ({
+const getAvailWidth = (key) => ({
-  key: 'outerWidth',
+  key: 'Avail width',
-  value: window.outerWidth,
+  code: `window.screen.${key}`,
-  // issues: checkWindowProperties('outerWidth'),
+  value: window.screen[key],
-  issues: [],
-});
-
-const getAvailWidth = () => ({
-  key: 'availWidth',
-  value: window.screen.availWidth,
   issues: [
     checkScreenProperties('availWidth'),
     checkScreenValue('availWidth'),
@@ -27,9 +22,17 @@ const getAvailWidth = () => ({
   ],
 });
 
-const getHeight = () => ({
+const getOuterWidth = (key) => ({
-  key: 'height',
+  key: 'Outer width',
-  value: window.screen.height,
+  code: `window.${key}`,
+  value: window[key],
+  issues: [],
+});
+
+const getHeight = (key) => ({
+  key: 'Height',
+  code: `window.screen.${key}`,
+  value: window.screen[key],
   issues: [
     checkScreenProperties('height'),
     checkScreenValue('height'),
@@ -37,16 +40,10 @@ const getHeight = () => ({
   ],
 });
 
-const getOuterHeight = () => ({
+const getAvailHeight = (key) => ({
-  key: 'outerHeight',
+  key: 'Avail height',
-  value: window.outerHeight,
+  code: `window.screen.${key}`,
-  // issues: checkWindowProperties('outerHeight'),
+  value: window.screen[key],
-  issues: [],
-});
-
-const getAvailHeight = () => ({
-  key: 'availHeight',
-  value: window.screen.availHeight,
   issues: [
     checkScreenProperties('availHeight'),
     checkScreenValue('availHeight'),
@@ -55,9 +52,17 @@ const getAvailHeight = () => ({
   ],
 });
 
-const getPixelDepth = () => ({
+const getOuterHeight = (key) => ({
-  key: 'pixelDepth',
+  key: 'Outer height',
-  value: window.screen.pixelDepth,
+  code: `window.${key}`,
+  value: window[key],
+  issues: [],
+});
+
+const getPixelDepth = (key) => ({
+  key: 'Pixel depth',
+  code: `window.screen.${key}`,
+  value: window.screen[key],
   issues: [
     checkScreenProperties('pixelDepth'),
     checkScreenValue('pixelDepth'),
@@ -65,9 +70,10 @@ const getPixelDepth = () => ({
   ],
 });
 
-const getColorDepth = () => ({
+const getColorDepth = (key) => ({
-  key: 'colorDepth',
+  key: 'Color depth',
-  value: window.screen.colorDepth,
+  code: `window.screen.${key}`,
+  value: window.screen[key],
   issues: [
     checkScreenProperties('colorDepth'),
     checkScreenValue('colorDepth'),
@@ -118,14 +124,14 @@ const checkScreenProperties = (key) => {
 };
 
 const getScreen = () => [
-  getWidth(),
+  getWidth('width'),
-  getAvailWidth(),
+  getAvailWidth('availWidth'),
-  getOuterWidth(),
+  getOuterWidth('outerWidth'),
-  getHeight(),
+  getHeight('height'),
-  getAvailHeight(),
+  getAvailHeight('availHeight'),
-  getOuterHeight(),
+  getOuterHeight('outerHeight'),
-  getPixelDepth(),
+  getPixelDepth('pixelDepth'),
-  getColorDepth(),
+  getColorDepth('colorDepth'),
 ];
 
 export default getScreen;