From 171e265713344158e71d987864b760cdd22bc7a2 Mon Sep 17 00:00:00 2001
From: jason5ng32 <jason5ng32@gmail.com>
Date: Thu, 26 Sep 2024 00:19:26 +0800
Subject: [PATCH] Add Browser Infos

---
 frontend/App.vue                              |  11 +-
 frontend/components/Advanced.vue              |   7 +-
 frontend/components/IpInfos.vue               |   2 +-
 .../components/advanced-tools/BrowserInfo.vue | 344 ++++++++++++++++++
 frontend/locales/en.json                      |  68 +++-
 frontend/locales/fr.json                      |  70 +++-
 frontend/locales/zh.json                      |  68 +++-
 frontend/router/index.js                      |   2 +
 package.json                                  |  17 +-
 9 files changed, 572 insertions(+), 17 deletions(-)
 create mode 100644 frontend/components/advanced-tools/BrowserInfo.vue

diff --git a/frontend/App.vue b/frontend/App.vue
index e142f8f8..e92fec79 100644
--- a/frontend/App.vue
+++ b/frontend/App.vue
@@ -404,7 +404,7 @@ const ShortcutKeys = (isOriginalSite) => {
       description: t('shortcutKeys.DNSResolver'),
     },
     {
-      keys: "b",
+      keys: "C",
       action: () => {
         scrollToElement("AdvancedTools", 80);
         advancedToolsRef.value.navigateAndToggleOffcanvas('/censorshipcheck');
@@ -412,6 +412,15 @@ const ShortcutKeys = (isOriginalSite) => {
       },
       description: t('shortcutKeys.CensorshipCheck'),
     },
+    {
+      keys: "b",
+      action: () => {
+        scrollToElement("AdvancedTools", 80);
+        advancedToolsRef.value.navigateAndToggleOffcanvas('/browserinfo');
+        trackEvent('Nav', 'NavClick', 'BrowserInfo');
+      },
+      description: t('shortcutKeys.BrowserInfo'),
+    },
     {
       keys: "W",
       action: () => {
diff --git a/frontend/components/Advanced.vue b/frontend/components/Advanced.vue
index f71e13f3..9466feea 100644
--- a/frontend/components/Advanced.vue
+++ b/frontend/components/Advanced.vue
@@ -76,6 +76,7 @@ const cards = reactive([
     { path: '/censorshipcheck', icon: '🚧', titleKey: 'censorshipcheck.Title', noteKey: 'advancedtools.CensorshipCheck' },
     { path: '/whois', icon: '📓', titleKey: 'whois.Title', noteKey: 'advancedtools.Whois' },
     { path: '/macchecker', icon: '🗄️', titleKey: 'macchecker.Title', noteKey: 'advancedtools.MacChecker' },
+    { path: '/browserinfo', icon: '🖥️', titleKey: 'browserinfo.Title', noteKey: 'advancedtools.BrowserInfo' },
 ]);
 
 const cardInvisibilityTest = { path: '/invisibilitytest', icon: '🫣', titleKey: 'invisibilitytest.Title', noteKey: 'advancedtools.InvisibilityTest' };
@@ -126,9 +127,13 @@ const navigateAndToggleOffcanvas = (routePath) => {
             trackEvent('Nav', 'NavClick', 'MacChecker');
             openedCard.value = 6;
             break;
+        case '/browserinfo':
+            trackEvent('Nav', 'NavClick', 'BrowserInfo');
+            openedCard.value = 7;
+            break;
         case '/invisibilitytest':
             trackEvent('Nav', 'NavClick', 'InvisibilityTest');
-            openedCard.value = 7;
+            openedCard.value = 8;
             break;
     }
     var offcanvas = new Offcanvas(document.getElementById('offcanvasTools'));
diff --git a/frontend/components/IpInfos.vue b/frontend/components/IpInfos.vue
index 283f34b4..01ea05e9 100644
--- a/frontend/components/IpInfos.vue
+++ b/frontend/components/IpInfos.vue
@@ -302,7 +302,7 @@ const fetchIP = async (cardID, getFromSource) => {
     ipDataCards[cardID].source = source;
     IPArray.value = [...IPArray.value, ip];
     await fetchIPDetails(cardID, ip);
-  } else if (cardID === 3 || cardID === 5) {
+  } else if (cardID === 2 || cardID === 5) {
     ipDataCards[cardID].ip = t('ipInfos.IPv6Error');
   } else {
     ipDataCards[cardID].ip = t('ipInfos.IPv4Error');
diff --git a/frontend/components/advanced-tools/BrowserInfo.vue b/frontend/components/advanced-tools/BrowserInfo.vue
new file mode 100644
index 00000000..15de1123
--- /dev/null
+++ b/frontend/components/advanced-tools/BrowserInfo.vue
@@ -0,0 +1,344 @@
+<template>
+    <!-- Browser Info -->
+    <div class="browser-info-section mb-4">
+        <div class="jn-title2">
+            <h2 id="BrowserInfo" :class="{ 'mobile-h2': isMobile }">🖥️ {{ t('browserinfo.Title') }}</h2>
+        </div>
+        <div class="text-secondary">
+            <p>{{ t('browserinfo.Note') }}</p>
+            <p>{{ t('browserinfo.Note2') }}</p>
+        </div>
+        <div class="row">
+            <div class="col-12 mb-3">
+                <div class="card jn-card" :class="{ 'dark-mode dark-mode-border': isDarkMode }">
+                    <div class="card-body">
+                        <div id="browserInfoResult" class="row" v-if="checkingStatus === 'finished'">
+                            <div class="col-lg-8 col-md-8 col-12 mb-4">
+                                <div class="card h-100" :class="{ 'dark-mode dark-mode-border': isDarkMode }">
+
+                                    <div class="card-body row">
+                                        <h3 class="mb-4">{{ t('browserinfo.browser.Infos') }} <i
+                                                class="bi bi-person-workspace"></i></h3>
+                                        <div class="jn-ua-box w-100">
+                                            <div class="alert alert-success jn-ua-box">
+                                                <span class="mb-1 badge text-bg-success">User Agent</span>
+                                                <span><span class="jn-code-font ">{{ userAgent.ua }}</span> <i
+                                                        :class="copiedStatus ? 'bi bi-clipboard-check-fill' : 'bi bi-clipboard-plus'"
+                                                        @click="copyToClipboard(userAgent.ua)" role="button"
+                                                        aria-label="Copy UA"></i></span>
+                                            </div>
+                                        </div>
+
+                                        <div class="col-lg-6 col-md-6 col-12">
+                                            <div class="jn-detail">
+                                                <span>
+                                                    {{ t('browserinfo.browser.browserName') }}
+                                                </span>
+                                                <span class="jn-con-title card-title mt-1">
+                                                    {{ userAgent.browser.name }} {{ userAgent.browser.version }}
+                                                </span>
+                                            </div>
+                                            <div class="jn-detail">
+                                                <span>
+                                                    {{ t('browserinfo.browser.engineName') }}
+                                                </span>
+                                                <span class="jn-con-title card-title mt-1">
+                                                    {{ userAgent.engine.name }} {{ userAgent.engine.version }}
+                                                </span>
+                                            </div>
+                                            <div class="jn-detail">
+                                                <span>
+                                                    {{ t('browserinfo.browser.osName') }}
+                                                </span>
+                                                <span class="jn-con-title card-title mt-1">
+                                                    {{ userAgent.os.name }} {{ userAgent.os.version }}
+                                                </span>
+                                            </div>
+                                            <div class="jn-detail">
+                                                <span>
+                                                    {{ t('browserinfo.browser.language') }}
+                                                </span>
+                                                <span class="jn-con-title card-title mt-1">
+                                                    {{ otherInfos.browserLanguage }}
+                                                </span>
+                                            </div>
+                                            <div class="jn-detail">
+                                                <span>
+                                                    {{ t('browserinfo.browser.cookieEnabled') }}
+                                                </span>
+                                                <span class="jn-con-title card-title mt-1">
+                                                    {{ otherInfos.cookieEnabled?
+                                                    t('browserinfo.browser.cookieEnabledTrue'):t('browserinfo.browser.cookieEnabledFalse')
+                                                    }}
+                                                </span>
+                                            </div>
+                                        </div>
+
+                                        <div class="col-lg-6 col-md-6 col-12">
+                                            <div class="jn-detail">
+                                                <span>
+                                                    {{ t('browserinfo.browser.deviceVendor') }}
+                                                </span>
+                                                <span class="jn-con-title card-title mt-1">
+                                                    {{ userAgent.device.vendor }} {{ userAgent.device.model }}
+                                                </span>
+                                            </div>
+                                            <div class="jn-detail">
+                                                <span>
+                                                    {{ t('browserinfo.browser.cpuArchitecture') }}
+                                                </span>
+                                                <span class="jn-con-title card-title mt-1">
+                                                    {{ userAgent.device.cpu ? userAgent.device.cpu.architecture : 'N/A'
+                                                    }}
+                                                </span>
+                                            </div>
+                                            <div class="jn-detail">
+                                                <span>
+                                                    {{ t('browserinfo.browser.gpu') }}
+                                                </span>
+                                                <span class="jn-con-title card-title mt-1">
+                                                    {{ gpu }}
+                                                </span>
+                                            </div>
+                                            <div class="jn-detail">
+                                                <span>
+                                                    {{ t('browserinfo.browser.cpuCores') }}
+                                                </span>
+                                                <span class="jn-con-title card-title mt-1">
+                                                    {{ otherInfos.cpucores }}
+                                                </span>
+                                            </div>
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="col-lg-4 col-md-4 col-12 mb-4">
+                                <div class="card h-100" :class="{ 'dark-mode dark-mode-border': isDarkMode}">
+                                    <div class="card-body">
+                                        <h3 class="mb-4">{{ t('browserinfo.fingerprint.Infos') }} <i
+                                                class="bi bi-fingerprint"></i></h3>
+                                        <div class="jn-ua-box w-100">
+                                            <div class="alert alert-primary jn-ua-box">
+                                                <span class="mb-1 badge text-bg-primary">{{
+                                                    t('browserinfo.fingerprint.fingerprint') }}</span>
+                                                <span class="jn-code-font ">{{ fingerprint }}</span>
+                                            </div>
+                                        </div>
+
+                                        <p>{{ t('browserinfo.fingerprint.changeOption') }}</p>
+
+                                        <div class="row g-1 m-1">
+                                            <div v-for="(value, key) in excludeOptions" :key="key"
+                                                class="form-check form-switch col-6">
+                                                <input class="form-check-input" type="checkbox" :id="key"
+                                                    v-model="excludeOptions[key]" />
+                                                <label class="form-check-label" :for="key">
+                                                    {{ t(`browserinfo.options.${key}`) }}
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="alert alert-light opacity-75" role="alert">
+                                            {{ t('browserinfo.fingerprint.browserTips') }}
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+                        <div v-else class="jn-placeholder ">
+                            <span v-if="checkingStatus === 'running'">
+                                <span class="spinner-grow spinner-grow-sm text-success" aria-hidden="true"></span>
+                                <span class="text-success">&nbsp;{{ t('browserinfo.calculating') }}</span>
+                            </span>
+                            <p v-if="checkingStatus === 'error'" class="text-danger">{{ errorMsg }}</p>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, reactive, onMounted } from 'vue';
+import { useMainStore } from '@/store';
+import { useI18n } from 'vue-i18n';
+import { trackEvent } from '@/utils/use-analytics';
+import { UAParser } from 'ua-parser-js';
+import { getFingerprint as calFingerPrint, setOption as setFingerPrintOption } from '@thumbmarkjs/thumbmarkjs';
+import { getGPUTier } from 'detect-gpu';
+
+const { t } = useI18n();
+
+const store = useMainStore();
+const isDarkMode = computed(() => store.isDarkMode);
+const isMobile = computed(() => store.isMobile);
+const lang = computed(() => store.lang);
+
+const fingerprint = ref('');
+const excludeOptions = ref({
+    'audio': true,
+    'canvas': true,
+    'fonts': true,
+    'hardware': true,
+    'locales': true,
+    'permissions': true,
+    'plugins': true,
+    'screen': true,
+    'system': true,
+    'webgl': true,
+    'math': true,
+});
+const errorMsg = ref('');
+const checkingStatus = ref('idle');
+const copiedStatus = ref(false);
+
+const userAgent = ref('');
+const fullFPDatas = ref();
+const gpu = ref('');
+const otherInfos = ref({});
+
+// 获取 GPU 信息
+const getGPU = async () => {
+    try {
+        const gpuTier = await getGPUTier();
+        if (gpuTier && gpuTier.gpu) {
+            gpu.value = gpuTier.gpu.toLowerCase().replace(/(^\w|\s\w)/g, m => m.toUpperCase());
+        } else {
+            gpu.value = 'N/A';
+        }
+    } catch (error) {
+        console.error('Error getting GPU info:', error);
+        throw error;
+    }
+}
+
+// 获取 UA
+const getUA = async () => {
+    try {
+        const parser = new UAParser();
+        parser.setUA(parser.getUA());
+        userAgent.value = parser.getResult();
+    } catch (error) {
+        console.error('Error getting user agent:', error);
+        throw error;
+    }
+};
+
+// 获取其他信息
+const getOtherBrowserInfo = async () => {
+    try {
+        otherInfos.value.browserLanguage = navigator.language;
+        otherInfos.value.cookieEnabled = navigator.cookieEnabled;
+        otherInfos.value.cpucores = navigator.hardwareConcurrency;
+    } catch (error) {
+        console.error('Error getting other browser info:', error);
+        throw error;
+    }
+};
+
+// 获取指纹计算的排除选项
+const getExcludeOptions = async () => {
+    const results = [];
+    const checkOptions = (options, prefix = '') => {
+        for (const key in options) {
+            const value = options[key];
+            const fullPath = prefix ? `${prefix}.${key}` : key;
+            if (typeof value === 'object') {
+                checkOptions(value, fullPath);
+            } else if (!value) {
+                results.push(fullPath);
+            }
+        }
+    };
+
+    checkOptions(excludeOptions.value);
+    return results;
+};
+
+// 获取指纹
+const getFingerPrint = async () => {
+    fingerprint.value = t('browserinfo.calculating');
+    try {
+        let excludes = await getExcludeOptions();
+        await setFingerPrintOption('exclude', excludes);
+        const getFP = await calFingerPrint();
+        fingerprint.value = getFP;
+    } catch (error) {
+        console.error('Error getting fingerprint:', error);
+        throw error;
+    }
+};
+
+// 获取全部
+const getAll = async () => {
+    checkingStatus.value = 'running';
+    try {
+        await getUA();
+        await getFingerPrint();
+        await getGPU();
+        await getOtherBrowserInfo();
+        checkingStatus.value = 'finished';
+    } catch (error) {
+        console.error('Error during checks:', error);
+        checkingStatus.value = 'error';
+        errorMsg.value = t('browserinfo.calError');
+    }
+}
+
+// 复制
+const copyToClipboard = (ua) => {
+    navigator.clipboard.writeText(ua).then(() => {
+        copiedStatus.value = true;
+        setTimeout(() => {
+            copiedStatus.value = false;
+        }, 5000);
+    }).catch(err => {
+        console.error('Copy error', err);
+    });
+};
+
+onMounted(() => {
+    getAll();
+});
+
+// 监控排除选项
+watch(excludeOptions, (newVal, oldVal) => {
+    getFingerPrint();
+}, { immediate: true, deep: true });
+
+</script>
+
+<style scoped>
+.jn-placeholder {
+    height: 16pt;
+}
+
+.jn-ua-box {
+    height: fit-content;
+    display: flex;
+    flex-direction: column;
+}
+
+.jn-ua-box .badge {
+    width: fit-content;
+}
+
+.jn-code-font {
+    font-family: "IntelOne Mono", "Courier New", "Courier", "monospace";
+    font-weight: 400;
+}
+
+.jn-detail {
+    display: flex;
+    flex-direction: column;
+    align-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    margin-bottom: 10pt;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index b8fc8f06..19ac6981 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -35,6 +35,50 @@
       "ipDBTips": "You can select the default IP geolocation source to use. If the selected source is unavailable, the system will use the subsequent sources in order."
     }
   },
+  "browserinfo": {
+    "Title": "Browser Information",
+    "Note": "This page displays two types of browser information: basic information derived from the browser's User Agent, and a browser fingerprint calculated through various data metrics. Browser fingerprints are akin to the fingerprints on your palm; the more information your browser exposes, the higher your uniqueness to websites, making you more easily trackable. Sometimes, even switching to incognito mode or changing browsers may not alter your fingerprint.",
+    "Note2": "The methods for calculating browser fingerprints are diverse, and different technical approaches may lead to inconsistent results. Here, we use a relatively simple method for calculation.",
+    "browser": {
+      "Infos": "Browser Information",
+      "browserName": "Browser Name",
+      "browserVersion": "Version",
+      "engineName": "Engine",
+      "engineVersion": "Version",
+      "osName": "Operating System",
+      "osVersion": "Version",
+      "deviceModel": "Model",
+      "deviceVendor": "Manufacturer",
+      "cpuArchitecture": "CPU Architecture",
+      "gpu": "GPU",
+      "cpuCores": "CPU Cores",
+      "language": "Language Code",
+      "cookieEnabled": "Cookies Enabled",
+      "cookieEnabledTrue": "Yes",
+      "cookieEnabledFalse": "No"
+    },
+    "fingerprint": {
+      "Infos": "Fingerprint Information",
+      "fingerprint": "Fingerprint Code",
+      "changeOption": "You can try changing the data used to calculate the browser fingerprint to observe variations (remember to compare it in incognito mode).",
+      "browserTips": "Some browsers, such as Safari, protect users from tracking by generating different fingerprint values each time, even when the same data is selected."
+    },
+    "options": {
+      "audio": "Audio",
+      "canvas": "Canvas",
+      "fonts": "Fonts",
+      "hardware": "Hardware",
+      "locales": "Languages",
+      "permissions": "Permissions",
+      "plugins": "Plugins",
+      "screen": "Screen",
+      "system": "Browser Version",
+      "webgl": "WebGL",
+      "math": "Math"
+    },
+    "calError": "Failed to calculate browser information, please refresh and try again.",
+    "calculating": "Calculating..."
+  },
   "censorshipcheck": {
     "Title": "Censorship Check",
     "Note": "Checks the availability of target websites in four regions known for rigorous internet censorship, including: Mainland China, Saudi Arabia, Russia, and Turkey. Tests are also conducted from regions with relatively free internet as a control group for verification. Some regions have clear legal provisions for internet censorship, while others are more vague.",
@@ -140,7 +184,8 @@
     "CensorshipCheck": "Check if a website is blocked in some countries",
     "Whois": "Search for domain/IP registration information",
     "InvisibilityTest": "Check if you are using a proxy or VPN",
-    "MacChecker": "Query information of a physical address"
+    "MacChecker": "Query information of a physical address",
+    "BrowserInfo": "Check browser information and fingerprint"
   },
   "macchecker": {
     "Title": "MAC Lookup",
@@ -397,7 +442,8 @@
     "About": "Open About panel",
     "Whois": "Open Whois Search panel",
     "InvisibilityTest": "Open Invisibility Test panel",
-    "MacChecker": "Open MAC lookup panel"
+    "MacChecker": "Open MAC lookup panel",
+    "BrowserInfo": "Open Browser Info panel"
   },
   "page": {
     "title": "IPCheck.ing - Check My IP Address and Geolocation - Check WebRTC Connection IP - DNS Leak Test - Speed Test - Jason Ng Open Source",
@@ -787,6 +833,24 @@
             "change": "Optimized numerous details"
           }
         ]
+      },
+      {
+        "version": "v4.2",
+        "date": "Sept 25, 2024",
+        "content": [
+          {
+            "type": "add",
+            "change": "Added browser information query feature"
+          },
+          {
+            "type": "add",
+            "change": "Added MaxMind GeoIP database"
+          },
+          {
+            "type": "improve",
+            "change": "Multiple experience enhancements"
+          }
+        ]
       }
     ]
   }
diff --git a/frontend/locales/fr.json b/frontend/locales/fr.json
index 0190b82a..25ad66dc 100644
--- a/frontend/locales/fr.json
+++ b/frontend/locales/fr.json
@@ -35,6 +35,50 @@
             "ipDBTips": "Vous pouvez sélectionner la source de données de géolocalisation IP par défaut. Si la source sélectionnée n'est pas disponible, le système utilisera les sources suivantes."
         }
     },
+    "browserinfo": {
+        "Title": "Informations du Navigateur",
+        "Note": "Cette page affiche deux types d'informations sur le navigateur : les informations de base extraites de l'agent utilisateur du navigateur et une empreinte numérique du navigateur calculée à travers diverses métriques de données. Les empreintes numériques du navigateur sont similaires aux empreintes palmaires ; plus votre navigateur expose d'informations, plus votre unicité sur les sites web est élevée, ce qui vous rend plus facilement traçable. Parfois, même en passant en mode privé ou en changeant de navigateur, l'empreinte peut ne pas changer.",
+        "Note2": "Les méthodes de calcul des empreintes numériques des navigateurs sont variées, et différentes approches techniques peuvent conduire à des résultats incohérents. Ici, nous utilisons une méthode relativement simple pour le calcul.",
+        "browser": {
+            "Infos": "Informations du Navigateur",
+            "browserName": "Nom du Navigateur",
+            "browserVersion": "Version",
+            "engineName": "Moteur",
+            "engineVersion": "Version",
+            "osName": "Système d'Exploitation",
+            "osVersion": "Version",
+            "deviceModel": "Modèle",
+            "deviceVendor": "Fabricant",
+            "cpuArchitecture": "Architecture CPU",
+            "gpu": "GPU",
+            "cpuCores": "Cœurs CPU",
+            "language": "Code Langue",
+            "cookieEnabled": "Cookies Activés",
+            "cookieEnabledTrue": "Oui",
+            "cookieEnabledFalse": "Non"
+        },
+        "fingerprint": {
+            "Infos": "Informations sur l'Empreinte",
+            "fingerprint": "Code d'Empreinte",
+            "changeOption": "Vous pouvez essayer de modifier les données utilisées pour calculer l'empreinte du navigateur afin d'observer les variations (n'oubliez pas de vérifier en mode privé).",
+            "browserTips": "Certains navigateurs, comme Safari, protègent les utilisateurs contre le pistage en générant des valeurs d'empreinte différentes à chaque calcul, même lorsque les mêmes données sont sélectionnées."
+        },
+        "options": {
+            "audio": "Audio",
+            "canvas": "Canvas",
+            "fonts": "Polices",
+            "hardware": "Matériel",
+            "locales": "Langues",
+            "permissions": "Permissions",
+            "plugins": "Plugins",
+            "screen": "Écran",
+            "system": "Version du Navigateur",
+            "webgl": "WebGL",
+            "math": "Mathématiques"
+        },
+        "calError": "Échec du calcul des informations du navigateur, veuillez rafraîchir et réessayer.",
+        "calculating": "Calcul en cours..."
+    },
     "invisibilitytest": {
         "Title": "Test d'invisibilité",
         "Note": "Lorsque vous utilisez un proxy ou un VPN, les sites que vous visitez ne savent-ils vraiment pas que vous utilisez un proxy ? Êtes-vous réellement invisible ? Nous utiliserons plusieurs méthodes pour essayer de détecter les failles de votre anonymat et trouver des preuves de l'utilisation d'un proxy. Bien que certains résultats de test puissent ne pas être entièrement précis, ce test reste très instructif.",
@@ -140,7 +184,8 @@
         "CensorshipCheck": "Vérifier si un site est bloqué dans certains pays",
         "Whois": "Recherche d'informations sur l'enregistrement de domaine/IP",
         "InvisibilityTest": "Vérifiez si vous utilisez un proxy ou un VPN",
-        "MacChecker": "Requête d'informations d'une adresse physique"
+        "MacChecker": "Requête d'informations d'une adresse physique",
+        "BrowserInfo": "Vérifier les informations du navigateur et l'empreinte digitale"
     },
     "macchecker": {
         "Title": "Recherche MAC",
@@ -386,7 +431,7 @@
         "DNSResolver": "Ouvrir le Résolution DNS",
         "ToggleMaps": "Activer/désactiver les cartes",
         "IPCheck": "Vérification IP",
-        "ToggleInfoMask": "Activer/désactiver le masquage des informations",
+        "ToggleInfoMask": "Masquer/Démasquer les informations",
         "Help": "Afficher les raccourcis clavier",
         "HelpNote": "Les personnes qui utilisent des raccourcis clavier sont vraiment géniales !",
         "GoNext": "Carte suivante",
@@ -397,7 +442,8 @@
         "About": "Ouvrir À propos",
         "Whois": "Ouvrir la Recherche Whois",
         "InvisibilityTest": "Ouvrir le Test d'invisibilité",
-        "MacChecker": "Ouvrir le Recherche de MAC"
+        "MacChecker": "Ouvrir le Recherche de MAC",
+        "BrowserInfo": "Ouvrir l'Info du navigateur"
     },
     "page": {
         "title": "IPCheck.ing - Vérifier mon adresse IP et géolocalisation - Vérifier l'adresse IP de connexion WebRTC - Test de fuite DNS - Test de vitesse - Jason Ng Open Source",
@@ -787,6 +833,24 @@
                         "change": "Optimisation de nombreux détails"
                     }
                 ]
+            },
+            {
+                "version": "v4.2",
+                "date": "Sept 25, 2024",
+                "content": [
+                    {
+                        "type": "add",
+                        "change": "Ajout de la fonction de requête d'informations du navigateur"
+                    },
+                    {
+                        "type": "add",
+                        "change": "Ajout de la base de données géographique MaxMind"
+                    },
+                    {
+                        "type": "improve",
+                        "change": "Améliorations multiples de l'expérience"
+                    }
+                ]
             }
         ]
     }
diff --git a/frontend/locales/zh.json b/frontend/locales/zh.json
index dbc9e158..25d30dab 100644
--- a/frontend/locales/zh.json
+++ b/frontend/locales/zh.json
@@ -35,6 +35,50 @@
       "ipDBTips": "你可以选择你默认使用的 IP 地理位置数据源，如果你选定的不可用，系统会依次使用后续的数据源。"
     }
   },
+  "browserinfo": {
+    "Title": "浏览器信息",
+    "Note": "本页面展示两类浏览器信息：浏览器 User Agent 解析出来的基本信息，以及通过多项数据计算出来的浏览器指纹。浏览器指纹就像手掌的掌纹，当浏览器的信息暴露越多，你被网站识别的唯一性越高，也就是说，你越容易被网站跟踪到。有些时候，即使你切换到隐私模式，甚至更换浏览器，指纹可能也不会发生变化。",
+    "Note2": "浏览器指纹的计算的方法是多种多样的，不同的技术方案算法和结果不完全一致，我们在这里采用一种相对简单的方法进行计算。",
+    "browser": {
+      "Infos": "浏览器信息",
+      "browserName": "浏览器名称",
+      "browserVersion": "版本",
+      "engineName": "引擎",
+      "engineVersion": "版本",
+      "osName": "系统",
+      "osVersion": "版本",
+      "deviceModel": "型号",
+      "deviceVendor": "制造商",
+      "cpuArchitecture": "CPU 架构",
+      "gpu": "GPU",
+      "cpuCores": "CPU 核心数",
+      "language": "语言代码",
+      "cookieEnabled": "是否启用 Cookie",
+      "cookieEnabledTrue": "是",
+      "cookieEnabledFalse": "否"
+    },
+    "fingerprint": {
+      "Infos": "指纹信息",
+      "fingerprint": "指纹编码",
+      "changeOption": "你可以尝试变更用于计算浏览器指纹的数据，观察指纹的变化（记得打开隐私模式对照查看）。",
+      "browserTips": "有些浏览器（比如 Safari）为了保护用户不被跟踪，即使勾选相同的数据，每次计算都可能会得到不同的指纹值。"
+    },
+    "options": {
+      "audio": "音频",
+      "canvas": "画布",
+      "fonts": "字体",
+      "hardware": "硬件",
+      "locales": "语言",
+      "permissions": "权限",
+      "plugins": "插件",
+      "screen": "屏幕",
+      "system": "浏览器版本",
+      "webgl": "WebGL",
+      "math": "运算"
+    },
+    "calError": "浏览器信息计算失败，请刷新重试。",
+    "calculating": "计算中..."
+  },
   "invisibilitytest": {
     "Title": "隐身测试",
     "Note": "当你挂上代理或 VPN 之后，你访问的网站真的不知道你挂着代理吗？你真的隐身了么？我们会通过多种手段，尝试计算出你伪装后的漏洞，找到你正在使用代理的证据。尽管可能部分测试结果不完全准确，但本测试依然有较高的参考意义。",
@@ -140,7 +184,8 @@
     "CensorshipCheck": "检查一个网站在某些国家是否被封锁",
     "Whois": "对域名或 IP 进行 Whois 查询",
     "InvisibilityTest": "猜猜看我是否知道你挂了代理",
-    "MacChecker": "查询物理地址的归属信息"
+    "MacChecker": "查询物理地址的归属信息",
+    "BrowserInfo": "检阅浏览器信息和指纹"
   },
   "macchecker": {
     "Title": "MAC 地址查询",
@@ -397,7 +442,8 @@
     "About": "打开关于页面",
     "Whois": "打开 Whois 查询面板",
     "InvisibilityTest": "打开隐身测试面板",
-    "MacChecker": "打开物理地址查询面板"
+    "MacChecker": "打开物理地址查询面板",
+    "BrowserInfo": "打开浏览器信息面板"
   },
   "page": {
     "title": "IPCheck.ing - 查看我的 IP 地址 - 查询本机 IP 地址及归属地 - 查看 WebRTC 连接 IP - DNS 泄露检测 - 网速测试 - Jason Ng 阿禅开源作品",
@@ -787,6 +833,24 @@
             "change": "优化了部分程序细节"
           }
         ]
+      },
+      {
+        "version": "v4.2",
+        "date": "Sept 25, 2024",
+        "content": [
+          {
+            "type": "add",
+            "change": "添加浏览器信息查询功能"
+          },
+          {
+            "type": "add",
+            "change": "添加 MaxMind 地理数据库"
+          },
+          {
+            "type": "improve",
+            "change": "多处体验优化"
+          }
+        ]
       }
     ]
   }
diff --git a/frontend/router/index.js b/frontend/router/index.js
index f69ac6e7..a0adcfc4 100644
--- a/frontend/router/index.js
+++ b/frontend/router/index.js
@@ -9,6 +9,7 @@ const CensorshipCheck = () => import('../components/advanced-tools/CensorshipChe
 const Whois = () => import('../components/advanced-tools/Whois.vue');
 const InvisibilityTest = () => import('../components/advanced-tools/InvisibilityTest.vue');
 const MacChecker = () => import('../components/advanced-tools/MacChecker.vue');
+const BrowserInfo = () => import('../components/advanced-tools/BrowserInfo.vue');
 const EmptyComponent = () => import('../components/advanced-tools/Empty.vue');
 
 const routes = [
@@ -21,6 +22,7 @@ const routes = [
   { path: '/whois', component: Whois },
   { path: '/invisibilitytest', component: InvisibilityTest },
   { path: '/macchecker', component: MacChecker },
+  { path: '/browserinfo', component: BrowserInfo },
 ];
 
 const router = createRouter({
diff --git a/package.json b/package.json
index a0c16ad3..d68d20f4 100644
--- a/package.json
+++ b/package.json
@@ -14,13 +14,15 @@
   "dependencies": {
     "@analytics/google-analytics": "^1.0.7",
     "@cloudflare/speedtest": "^1.3.0",
-    "@khmyznikov/pwa-install": "^0.4.4",
+    "@khmyznikov/pwa-install": "^0.4.5",
+    "@thumbmarkjs/thumbmarkjs": "^0.16.0",
     "analytics": "^0.8.14",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
     "code-inspector-plugin": "^0.16.1",
     "concurrently": "^9.0.1",
     "country-code-lookup": "^0.1.3",
+    "detect-gpu": "^5.0.49",
     "dotenv": "^16.4.5",
     "express": "^4.21.0",
     "express-rate-limit": "^7.4.0",
@@ -28,17 +30,18 @@
     "flag-icons": "^7.2.3",
     "http-proxy-middleware": "^3.0.2",
     "maxmind": "^4.3.21",
-    "nodemon": "^3.1.4",
+    "nodemon": "^3.1.7",
     "pinia": "^2.2.2",
     "svgmap": "^2.11.1",
-    "vue": "^3.5.6",
-    "vue-i18n": "^10.0.1",
+    "ua-parser-js": "^1.0.39",
+    "vue": "^3.5.8",
+    "vue-i18n": "^10.0.3",
     "vue-router": "^4.4.5",
     "whoiser": "^1.18.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.1.3",
-    "vite": "^5.4.6",
-    "vite-plugin-pwa": "^0.20.5"
+    "@vitejs/plugin-vue": "^5.1.4",
+    "vite": "^5.4.8",
+    "vite-plugin-pwa": "^0.2.1"
   }
 }