templates/browser-detect/browser-detect.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Détection Navigateur & Mode Privé{% endblock %}
  5. {% block body %}
  6. <div class="row">
  7.     <div class="col-md-12">
  8.         <h1>Détection Navigateur & Mode Privé</h1>
  9.         <div>
  10.             <p><strong>Moteur</strong>: <span id="engine">?</span></p>
  11.             <p><strong>Navigateurs</strong>: <span id="flavor">?</span></p>
  12.             <p><strong>Score privé</strong>: <span id="score">?</span></p>
  13.             <p><strong>Interprétation</strong>: <span id="label">?</span></p>
  14.         </div>
  15.         <hr/>
  16.         <p>Scores: 2 = privé sûr, 1 = non privé sûr, -2 = plutôt privé (incertain), -1 = plutôt non privé (incertain).</p>
  17.     </div>
  18. </div>
  20. <script>
  21. (function () {
  22.     function mib(x) { return Math.round(((x || 0) / (1024 * 1024))); }
  24.     function detectBrowser() {
  25.         var nav = navigator;
  26.         var ua = navigator.userAgent || '';
  27.         var uaData = nav.userAgentData;
  29.         if (uaData && uaData.brands && uaData.brands.length) {
  30.             var brands = uaData.brands.map(function (b) { return String(b.brand || '').toLowerCase(); }).join(' ');
  31.             if (brands.indexOf('chrom') > -1) {
  32.                 if (brands.indexOf('edge') > -1) return { engine: 'Chromium', flavor: 'Edge' };
  33.                 if (brands.indexOf('opera') > -1 || brands.indexOf('opr') > -1) return { engine: 'Chromium', flavor: 'Opera' };
  34.                 if (typeof (nav).brave !== 'undefined') return { engine: 'Chromium', flavor: 'Brave' };
  35.                 return { engine: 'Chromium', flavor: 'Chrome' };
  36.             }
  37.         }
  39.         var isApple = (navigator.vendor || '').indexOf('Apple') > -1;
  40.         var isSafariLike = isApple && /Safari\//.test(ua) && !/Chrome|Chromium|Edg|OPR/.test(ua);
  41.         if (isSafariLike) return { engine: 'WebKit', flavor: 'Safari' };
  43.         var isFirefox = /Firefox\//.test(ua) && (typeof CSS !== 'undefined' && CSS.supports && CSS.supports('(-moz-appearance: none)'));
  44.         if (isFirefox) return { engine: 'Gecko', flavor: 'Firefox' };
  46.         if (/Chrome\/|Chromium\/|Edg\/|OPR\//.test(ua)) {
  47.             if (/Edg\//.test(ua)) return { engine: 'Chromium', flavor: 'Edge' };
  48.             if (/OPR\//.test(ua)) return { engine: 'Chromium', flavor: 'Opera' };
  49.             if (typeof (navigator).brave !== 'undefined') return { engine: 'Chromium', flavor: 'Brave' };
  50.             return { engine: 'Chromium', flavor: 'Chromium' };
  51.         }
  53.         return { engine: 'Unknown', flavor: 'Unknown' };
  54.     }
  56.     async function isIncognitoChromium(flavor) {
  57.         var nav = navigator;
  58.         var w = window;
  59.         var jsHeapMiB = mib((w && w.performance && w.performance.memory && w.performance.memory.jsHeapSizeLimit) || 0) || 1024;
  60.         var boundMiB = jsHeapMiB * 2;
  62.         if (nav && nav.webkitTemporaryStorage && nav.webkitTemporaryStorage.queryUsageAndQuota) {
  63.             var score = await new Promise(function (resolve) {
  64.                 try {
  65.                     nav.webkitTemporaryStorage.queryUsageAndQuota(function (_usage, quota) {
  66.                         var qMiB = mib(quota);
  67.                         if (qMiB > 0 && qMiB < boundMiB) resolve(2); else resolve(1);
  68.                     }, function () { resolve(-1); });
  69.                 } catch (_) { resolve(-1); }
  70.             });
  71.             if (score !== -1) return score;
  72.         }
  74.         try {
  75.             var est = nav && nav.storage && nav.storage.estimate ? await nav.storage.estimate() : null;
  76.             var qMiB = mib(est && est.quota);
  77.             var softLow = flavor === 'Brave' ? 192 : 128;
  78.             if (qMiB > 0 && qMiB < softLow) return -2;
  79.         } catch (_) {}
  81.         try {
  82.             var persisted = nav && nav.storage && nav.storage.persisted ? await nav.storage.persisted() : undefined;
  83.             if (persisted === false) return -1;
  84.         } catch (_) {}
  86.         return -1;
  87.     }
  89.     async function isIncognitoSafari() {
  90.       // Test 1: IndexedDB write probe
  91.       try {
  92.         const name = 'probe-' + Math.random().toString(36).slice(2,9);
  93.         const wrote = await new Promise((resolve) => {
  94.           let settled = false;
  95.           const req = indexedDB.open(name, 1);
  96.           req.onupgradeneeded = (ev) => {
  97.             try {
  98.               ev.target.result.createObjectStore('t', { autoIncrement:true }).put(new Blob(['x']));
  99.             } catch {}
  100.           };
  101.           req.onsuccess = (ev) => {
  102.             try { ev.target.result.close(); indexedDB.deleteDatabase(name); } catch {}
  103.             if (!settled) { settled = true; resolve(true); }
  104.           };
  105.           req.onerror = () => { if (!settled) { settled = true; resolve(false); } };
  106.         });
  107.         if (wrote === false) return 2; // privé détecté par IDB
  108.       } catch {
  109.         return -2; // toute exception => privé
  110.       }
  112.       // Test 2: OPFS write probe
  113.       try {
  114.         if (navigator.storage && navigator.storage.getDirectory) {
  115.           const root = await navigator.storage.getDirectory();
  116.           const file = await root.getFileHandle('probe.txt', { create:true });
  117.           const w = await file.createWritable();
  118.           await w.write(new Blob(['x']));
  119.           await w.close();
  120.           // écriture OK -> ne conclut pas au privé
  121.         }
  122.       } catch (e) {
  123.         const errName = (e && e.name) ? e.name : String(e || '');
  124.         if (errName === "UnknownError") return 2; // privé détecté par OPFS
  125.       }
  127.       return 1; // par défaut: normal
  128.     }
  130.     async function isIncognitoFirefox() {
  131.         try {
  132.             const hasOPFS = !!(navigator.storage && navigator.storage.getDirectory);
  133.             if (hasOPFS) {
  134.                 const root = await navigator.storage.getDirectory();
  135.                 const file = await root.getFileHandle('probe.txt', { create: true });
  136.                 const w = await file.createWritable();
  137.                 await w.write(new Blob(['x'])); await w.close();
  138.             }
  139.         } catch {
  140.             return -2;
  141.         }
  142.         return -1;
  143.     }
  145.     async function detectIncognitoMode() {
  146.         var b = detectBrowser();
  147.         if (b.engine === 'Chromium') return { engine: b.engine, flavor: b.flavor, score: await isIncognitoChromium(b.flavor) };
  148.         if (b.engine === 'WebKit') return { engine: b.engine, flavor: b.flavor, score: await isIncognitoSafari() };
  149.         if (b.engine === 'Gecko') return { engine: b.engine, flavor: b.flavor, score: await isIncognitoFirefox() };
  150.         return { engine: b.engine, flavor: b.flavor, score: -1 };
  151.     }
  153.     function labelForScore(score) {
  154.         if (score === 2) return 'Privé (sûr)';
  155.         if (score === 1) return 'Non privé (sûr)';
  156.         if (score === -2) return 'Plutôt privé (incertain)';
  157.         return 'Plutôt non privé (incertain)';
  158.     }
  160.     document.addEventListener('DOMContentLoaded', function () {
  161.         detectIncognitoMode().then(function (res) {
  162.             var engineEl = document.getElementById('engine');
  163.             var flavorEl = document.getElementById('flavor');
  164.             var scoreEl = document.getElementById('score');
  165.             var labelEl = document.getElementById('label');
  166.             if (engineEl) engineEl.textContent = String(res.engine);
  167.             if (flavorEl) flavorEl.textContent = String(res.flavor);
  168.             if (scoreEl) scoreEl.textContent = String(res.score);
  169.             if (labelEl) labelEl.textContent = labelForScore(res.score);
  170.         }).catch(function () {
  171.             var engineEl = document.getElementById('engine');
  172.             var flavorEl = document.getElementById('flavor');
  173.             var scoreEl = document.getElementById('score');
  174.             var labelEl = document.getElementById('label');
  175.             if (engineEl) engineEl.textContent = 'Unknown';
  176.             if (flavorEl) flavorEl.textContent = 'Unknown';
  177.             if (scoreEl) scoreEl.textContent = '-1';
  178.             if (labelEl) labelEl.textContent = labelForScore(-1);
  179.         });
  180.     });
  181. })();
  183. /*
  184. # For test
  186. (async () => {
  187.   const mib = v => Math.round((v ?? 0) / (1024 * 1024));
  188.   const logG = (title) => { console.group(title); console.time(title); return () => { console.timeEnd(title); console.groupEnd(); }; };
  190.   // 1) navigator.storage.estimate()
  191.   async function testStorageEstimate() {
  192.     const end = logG('Test: navigator.storage.estimate()');
  193.     try {
  194.       if (!navigator.storage?.estimate) {
  195.         console.info('API not available');
  196.         return { ok:false, note:'no-api' };
  197.       }
  198.       const { quota, usage } = await navigator.storage.estimate();
  199.       const out = { ok:true, quota, usage, quotaMB: mib(quota), usageMB: mib(usage) };
  200.       console.log('Result:', out);
  201.       return out;
  202.     } catch (e) {
  203.       console.warn('Error:', e?.name || e);
  204.       return { ok:false, note:'error' };
  205.     } finally { end(); }
  206.   }
  208.   // 2) navigator.webkitTemporaryStorage.queryUsageAndQuota (Chromium legacy)
  209.   async function testWebkitTemporaryQuota(timeout = 2000) {
  210.     const end = logG('Test: navigator.webkitTemporaryStorage.queryUsageAndQuota');
  211.     const api = navigator?.webkitTemporaryStorage?.queryUsageAndQuota;
  212.     if (!api) {
  213.       console.info('API not available');
  214.       end(); return { ok:false, note:'no-api' };
  215.     }
  216.     const res = await new Promise(resolve => {
  217.       let settled = false;
  218.       try {
  219.         navigator.webkitTemporaryStorage.queryUsageAndQuota(
  220.           (usage, quota) => { if (settled) return; settled = true; resolve({ ok:true, usage, quota, usageMB: mib(usage), quotaMB: mib(quota) }); },
  221.           () => { if (settled) return; settled = true; resolve({ ok:false, note:'rejected' }); }
  222.         );
  223.         setTimeout(() => { if (!settled) { settled = true; resolve({ ok:false, note:'timeout' }); } }, timeout);
  224.       } catch (e) { resolve({ ok:false, note:'throw', err:e?.name || String(e) }); }
  225.     });
  226.     console.log('Result:', res);
  227.     end(); return res;
  228.   }
  230.   // 3) navigator.storage.persisted()
  231.   async function testPersisted() {
  232.     const end = logG('Test: navigator.storage.persisted()');
  233.     try {
  234.       if (!navigator.storage?.persisted) {
  235.         console.info('API not available');
  236.         return { ok:false, note:'no-api' };
  237.       }
  238.       const persisted = await navigator.storage.persisted();
  239.       const out = { ok:true, persisted: !!persisted };
  240.       console.log('Result:', out);
  241.       return out;
  242.     } catch (e) {
  243.       console.warn('Error:', e?.name || e);
  244.       return { ok:false, note:'error' };
  245.     } finally { end(); }
  246.   }
  248.   // 4) indexedDB.databases()
  249.   async function testIndexedDBDatabases() {
  250.     const end = logG('Test: indexedDB.databases()');
  251.     try {
  252.       if (!indexedDB?.databases) {
  253.         console.info('API not available');
  254.         return { ok:false, note:'no-api' };
  255.       }
  256.       const dbs = await indexedDB.databases();
  257.       const out = { ok:true, dbsCount: Array.isArray(dbs) ? dbs.length : 0, dbs };
  258.       console.log('Result:', out);
  259.       return out;
  260.     } catch (e) {
  261.       console.warn('Error:', e?.name || e);
  262.       return { ok:false, note:'error' };
  263.     } finally { end(); }
  264.   }
  266.   // 5) indexedDB.open() + write Blob
  267.   async function testIndexedDBWriteProbe(timeout = 2000) {
  268.     const end = logG('Test: indexedDB.open() + write Blob');
  269.     const name = 'probe-' + Math.random().toString(36).slice(2,9);
  270.     const res = await new Promise(resolve => {
  271.       let settled=false;
  272.       try {
  273.         const req = indexedDB.open(name, 1);
  274.         req.onupgradeneeded = ev => {
  275.           try {
  276.             const db = ev.target.result;
  277.             db.createObjectStore('t', { autoIncrement:true }).put(new Blob(['x']));
  278.           } catch {}
  279.         };
  280.         req.onsuccess = ev => {
  281.           try { ev.target.result.close(); indexedDB.deleteDatabase(name); } catch {}
  282.           if (!settled) { settled=true; resolve({ ok:true, wrote:true }); }
  283.         };
  284.         req.onerror = () => { if (!settled) { settled=true; resolve({ ok:true, wrote:false }); } };
  285.         setTimeout(() => { if (!settled) { settled=true; resolve({ ok:false, note:'timeout' }); } }, timeout);
  286.       } catch (e) {
  287.         resolve({ ok:false, note:'throw', err:e?.name || String(e) });
  288.       }
  289.     });
  290.     console.log('Result:', res);
  291.     end(); return res;
  292.   }
  294.   // 6) navigator.serviceWorker.register()
  295.   async function testServiceWorkerRegister(scriptUrl = '/sw-probe.js', timeout = 3000) {
  296.     const end = logG('Test: navigator.serviceWorker.register()');
  297.     if (!('serviceWorker' in navigator)) {
  298.       console.info('API not available');
  299.       end(); return { ok:false, note:'no-api' };
  300.     }
  301.     const isSecure = window.isSecureContext;
  302.     const sameOrigin = scriptUrl.startsWith('/') || scriptUrl.startsWith(location.origin);
  303.     console.log('Precheck:', { isSecure, sameOrigin });
  304.     if (!isSecure || !sameOrigin) {
  305.       console.info('Skipping (needs HTTPS + same-origin script)');
  306.       end(); return { ok:false, note:'skipped' };
  307.     }
  308.     try {
  309.       const reg = await Promise.race([
  310.         navigator.serviceWorker.register(scriptUrl),
  311.         new Promise((_, rej)=>setTimeout(()=>rej(new Error('timeout')), timeout))
  312.       ]);
  313.       console.log('Registered:', true);
  314.       try { await reg.unregister(); console.log('Unregistered: OK'); } catch {}
  315.       end(); return { ok:true, registered:true };
  316.     } catch (e) {
  317.       console.log('Registered:', false, 'Error:', e?.name || String(e));
  318.       end(); return { ok:true, registered:false };
  319.     }
  320.   }
  322.   // 7) CacheStorage (open/put/match)
  323.   async function testCacheStorage() {
  324.     const end = logG('Test: CacheStorage (open/put/match)');
  325.     if (!('caches' in window)) {
  326.       console.info('API not available');
  327.       end(); return { ok:false, note:'no-api' };
  328.     }
  329.     try {
  330.       const name = 'probe-cache-'+Math.random().toString(36).slice(2,6);
  331.       const c = await caches.open(name);
  332.       await c.put('/__probe__', new Response('x', { headers: { 'content-type':'text/plain' } }));
  333.       const r = await c.match('/__probe__');
  334.       const out = { ok:true, cacheWorks: !!r };
  335.       console.log('Result:', out);
  336.       end(); return out;
  337.     } catch (e) {
  338.       console.log('Write/match failed');
  339.       end(); return { ok:true, cacheWorks:false };
  340.     }
  341.   }
  343.   // 8) Cookies (classic) + cookieEnabled
  344.   function testCookies() {
  345.     const end = logG('Test: document.cookie / navigator.cookieEnabled');
  346.     try {
  347.       document.cookie = "__probe="+Date.now()+"; path=/";
  348.       const enabled = navigator.cookieEnabled && document.cookie.includes('__probe=');
  349.       document.cookie = "__probe=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
  350.       const out = { ok:true, cookieEnabled: !!enabled, navigatorCookieEnabled: !!navigator.cookieEnabled };
  351.       console.log('Result:', out);
  352.       return out;
  353.     } catch (e) {
  354.       console.warn('Error:', e?.name || e);
  355.       return { ok:false, note:'error' };
  356.     } finally { end(); }
  357.   }
  359.   // 9) OPFS: navigator.storage.getDirectory()
  360.   async function testOPFS() {
  361.     const end = logG('Test: OPFS (navigator.storage.getDirectory)');
  362.     const has = !!(navigator.storage && navigator.storage.getDirectory);
  363.     console.log('Available:', has);
  364.     if (!has) { end(); return { ok:false, note:'no-api' }; }
  365.     try {
  366.       const root = await navigator.storage.getDirectory();
  367.       const file = await root.getFileHandle('probe.txt', { create:true });
  368.       const w = await file.createWritable();
  369.       await w.write(new Blob(['x'])); await w.close();
  370.       const out = { ok:true, opfsWrite:true };
  371.       console.log('Result:', out);
  372.       end(); return out;
  373.     } catch (e) {
  374.       const out = { ok:true, opfsWrite:false, err:e?.name || String(e) };
  375.       console.log('Result:', out);
  376.       end(); return out;
  377.     }
  378.   }
  380.   // 10) Storage Buckets
  381.   async function testStorageBuckets() {
  382.     const end = logG('Test: navigator.storageBuckets');
  383.     const has = !!(navigator.storageBuckets);
  384.     console.log('Available:', has);
  385.     if (!has) { end(); return { ok:false, note:'no-api' }; }
  386.     try {
  387.       const b = await navigator.storageBuckets.open('probe-bucket');
  388.       const est = await b.estimate?.();
  389.       const out = { ok:true, estimate: est ?? null };
  390.       console.log('Result:', out);
  391.       end(); return out;
  392.     } catch (e) {
  393.       const out = { ok:false, note:'error', err:e?.name || String(e) };
  394.       console.log('Result:', out);
  395.       end(); return out;
  396.     }
  397.   }
  399.   // 11) File System Access pickers (presence only, no UI)
  400.   function testFileSystemAccessPickers() {
  401.     const end = logG('Test: File System Access pickers presence');
  402.     const has = ('showOpenFilePicker' in window) || ('showSaveFilePicker' in window);
  403.     const out = { ok:true, present: has };
  404.     console.log('Result:', out);
  405.     end(); return out;
  406.   }
  408.   // 12) PushManager presence
  409.   function testPushManager() {
  410.     const end = logG('Test: PushManager presence');
  411.     const has = 'PushManager' in window;
  412.     const out = { ok:true, present: has };
  413.     console.log('Result:', out);
  414.     end(); return out;
  415.   }
  417.   // 13) Permissions API (notifications state)
  418.   async function testPermissionsNotifications() {
  419.     const end = logG('Test: Permissions API (notifications)');
  420.     if (!(navigator.permissions?.query)) {
  421.       console.info('API not available');
  422.       end(); return { ok:false, note:'no-api' };
  423.     }
  424.     try {
  425.       const st = await navigator.permissions.query({ name: 'notifications' });
  426.       const out = { ok:true, state: st.state }; // 'granted'|'denied'|'prompt'
  427.       console.log('Result:', out);
  428.       end(); return out;
  429.     } catch (e) {
  430.       console.warn('Error:', e?.name || e);
  431.       end(); return { ok:false, note:'error' };
  432.     }
  433.   }
  435.   // 14) cookieStore presence
  436.   function testCookieStore() {
  437.     const end = logG('Test: cookieStore presence');
  438.     const has = 'cookieStore' in window;
  439.     const out = { ok:true, present: has };
  440.     console.log('Result:', out);
  441.     end(); return out;
  442.   }
  444.   // 15) navigator.userAgentData presence (Chromium)
  445.   function testUserAgentData() {
  446.     const end = logG('Test: navigator.userAgentData presence');
  447.     const d = (navigator).userAgentData;
  448.     const out = { ok:true, present: !!d, brands: d?.brands || null, mobile: d?.mobile ?? null };
  449.     console.log('Result:', out);
  450.     end(); return out;
  451.   }
  453.   // =====================
  454.   // Run sequentially
  455.   // =====================
  456.   const results = {};
  457.   results.storageEstimate         = await testStorageEstimate();
  458.   results.webkitTemporaryQuota    = await testWebkitTemporaryQuota();
  459.   results.persisted               = await testPersisted();
  460.   results.idbDatabases            = await testIndexedDBDatabases();
  461.   results.idbWriteProbe           = await testIndexedDBWriteProbe();
  462.   results.serviceWorkerRegister   = await testServiceWorkerRegister('/sw-probe.js');
  463.   results.cacheStorage            = await testCacheStorage();
  464.   results.cookies                 =        testCookies();
  465.   results.opfs                    = await testOPFS();
  466.   results.storageBuckets          = await testStorageBuckets();
  467.   results.fsAccessPickers         =        testFileSystemAccessPickers();
  468.   results.pushManager             =        testPushManager();
  469.   results.permissionsNotifications= await testPermissionsNotifications();
  470.   results.cookieStore             =        testCookieStore();
  471.   results.userAgentData           =        testUserAgentData();
  473.   console.group('All test results');
  474.   console.dir(results);
  475.   console.groupEnd();
  477.   // Return the object for convenience
  478.   results;
  479. })();
  480. */
  481. </script>
  482. {% endblock %}