بصمة المتصفح: كيف يتم تتبعك على الإنترنت دون أن تعرف

افرض إنك دخلت موقع جديد لأول مرة في حياتك

محستش بحاجة غريبة، ما سجلتش دخول، ما ديتش إيميلك، ما وافقتش على أي cookies. ومع ذلك، الإعلانات اللي بتظهرلك عارفة إنك بتحب التنزه، وإنك شايل iPhone، وإنك بتدور على جاكيت شتوي منذ أسبوع.

مش سحر، ومش مصادفة. ده اسمه browser fingerprinting ، وده المقال اللي هيفسرلك إيه ده بالظبط، وإزاي بيتم، ومينفعش تاخد باله إلا لو عرفته.

إيه هو الـ Browser Fingerprint بالظبط؟

كل جهاز وكل متصفح بيتصفح الإنترنت بيبعت معلومات كتير عن نفسه من غير ما يسألك إذن. ولما تجمع المعلومات دي مع بعض، بتعمل “بصمة” فريدة خاصة بيك ، زي بصمة الإصبع بالظبط.

الفكرة مش إنهم عارفين اسمك أو عنوانك. الفكرة إنهم بيقدروا يقولوا: “الجهاز ده كان عندنا امبارح، وقبل كده، وفي مواقع تانية كتير” ، من غير ما يحتاجوا يعرفوا مين أنت.

وده فرقه عن الـ cookies إن الـ fingerprint مش بيتخزن على جهازك ، بيتخزن على السيرفر بتاعهم. يعني حتى لو مسحت كل حاجة من متصفحك، البصمة دي فاضلة عندهم.

الجزء الأول: Passive Fingerprinting ، بيانات بتتبعت تلقائياً

في نوع من التتبع بيحصل من غير أي JavaScript ، بس بيحلل الـ HTTP requests اللي بيبعتها متصفحك تلقائياً في كل موقع بتدخله:

• User-Agent Header: في كل request بيبعته متصفحك، بيبعت header فيه اسم المتصفح وإصداره ونظام التشغيل ، مثلاً: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 Chrome/120.0.0.0
• Accept-Language: لغة المتصفح بتاعتك وترتيب التفضيل ، مثلاً ar-EG,ar;q=0.9,en;q=0.8
• Accept-Encoding: أنواع ضغط البيانات اللي متصفحك بيدعمها زي gzip وbrotli
• IP Address: بيحدد المنطقة الجغرافية ومزود الخدمة بشكل مباشر
• HTTP/2 Fingerprint: حتى ترتيب الـ headers وقيم الـ settings frames في HTTP/2 بتميز المتصفح من غير أي JavaScript ، ده اللي بيعرفوه بـ ALPN Fingerprinting

البيانات دي وحدها مش كفاية عشان تعملك بصمة فريدة 100% ، بس لما بتتجمع مع الـ Active Fingerprinting، الصورة بتتكمل بشكل مخيف.

الجزء الثاني: Active Fingerprinting ، الطرق التقنية المتقدمة

ده النوع الخطير ، بيستخدم JavaScript عشان يسأل متصفحك بشكل مباشر ويجمع معلومات أدق بكتير.

١. Canvas Fingerprinting

الـ Canvas هو عنصر HTML5 بيسمح للمتصفح يرسم رسومات برمجياً. الفكرة الجوهرية إن نفس تعليمات الرسم بتطلع pixel data مختلف قليلاً على أجهزة مختلفة ، بسبب اختلافات في الـ GPU والـ drivers وطريقة معالجة الـ anti-aliasing والـ subpixel rendering.

الموقع بيعمل <canvas> element مخفي، بيرسم عليه نص وأشكال معينة، وبعدين بياخد الـ pixel data كـ base64 string وبيعمله hash:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.textBaseline = 'top';
ctx.font = '14px Arial';
ctx.fillStyle = '#f60';
ctx.fillRect(125, 1, 62, 20);
ctx.fillStyle = '#069';
ctx.fillText('Browser fingerprinting test', 2, 15);
const fingerprint = canvas.toDataURL(); // هنا البصمة

الـ string الناتجة دي بتختلف من جهاز لجهاز ، حتى لو نفس المتصفح ونفس نظام التشغيل ، لأن كل GPU بيعمل الـ rendering بطريقة طفيف مختلفة على مستوى الـ subpixel.

٢. WebGL Fingerprinting

أقوى بكتير من الـ Canvas لأنه بيوصل لمعلومات الـ GPU بشكل مباشر. الـ WebGL هو API بيسمح للمتصفح يعمل رسومات 3D عن طريق الـ GPU.

بيجمع معلومات زي:

• اسم الـ GPU vendor والـ renderer string ، مثلاً: ANGLE (NVIDIA, NVIDIA GeForce RTX 3060 Direct3D11 vs_5_0 ps_5_0, D3D11)
• قائمة الـ WebGL extensions المدعومة وعددها
• قيم الـ parameters زي max texture size وmax viewport dims
• نتيجة رسم 3D scene معينة (WebGL image hash) ، بتختلف من GPU لـ GPU

const gl = document.createElement('canvas').getContext('webgl');
const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
const vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
// renderer بيدي: 'NVIDIA GeForce RTX 3060/PCIe/SSE2'

الـ renderer string ده لوحده معرّف قوي جداً ، لأن كل تيبة GPU بيطلع string مختلف.

٣. AudioContext Fingerprinting

نفس فكرة الـ Canvas بس في معالجة الصوت. الـ Web Audio API بتخلي المتصفح يعمل processing لإشارات صوتية، والنتيجة بتختلف قليلاً من جهاز لجهاز بسبب اختلافات في الـ audio hardware والـ OS audio stack وطريقة تنفيذ المعالجة الرياضية.

الموقع بيعمل oscillator مخفي، بيمرره على compressor، وبياخد الـ output كـ floating point numbers:

const ctx = new AudioContext();
const oscillator = ctx.createOscillator();
const analyser = ctx.createAnalyser();
const gain = ctx.createGain();
gain.gain.value = 0; // مش عايزين صوت فعلي
oscillator.connect(analyser);
analyser.connect(gain);
gain.connect(ctx.destination);
oscillator.start(0);
const buffer = new Float32Array(analyser.frequencyBinCount);
analyser.getFloatFrequencyData(buffer);
// الأرقام دي بتتجمع وبيتعملها hash

الفروق بين الأجهزة في الـ buffer دي ضئيلة جداً ، على مستوى الـ floating point precision ، بس كافية تعمل hash مختلف.

٤. Font Enumeration

المواقع مش بتقدر تسأل مباشرة “إيه الفونتات المثبتة عندك؟” ، بس بتستخدم طرق أذكى.

الطريقة الكلاسيكية ، CSS Measurement:

بترسم نص بفونتات كتير وبتقيس العرض بالـ pixel. لو الفونت موجود، الأبعاد بتختلف عن الـ fallback font الافتراضي:

function isFontAvailable(font) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const testText = 'mmmmmmmmlli';
  ctx.font = '72px monospace';
  const baseWidth = ctx.measureText(testText).width;
  ctx.font = `72px '${font}', monospace`;
  return ctx.measureText(testText).width !== baseWidth;
}
// بتعمل loop على قائمة بمئات الفونتات

الطريقة الحديثة ، Local Font Access API:

في Chrome 103+ في API جديد اسمه window.queryLocalFonts() بيديك قائمة كاملة بكل الفونتات بعد إذن المستخدم. قائمة الفونتات بتكون مختلفة جداً بين Windows وMac وLinux، وبين الأشخاص اللي بيثبتوا برامج مختلفة ، وده بيخليها signal تمييزي قوي.

٥. Navigator API & Hardware Info

الـ navigator object في JavaScript كنز معلومات:

الـ hardwareConcurrency وdeviceMemory مش بيدوا القيمة الحقيقية بالدقة ، بس بيكفوا في تضييق الاختيارات مع باقي الـ signals.

٦. TLS / JA3 Fingerprinting

ده بيحصل على مستوى الـ network قبل ما الـ HTTP request يوصل للسيرفر أصلاً ، من غير أي JavaScript.

لما بتفتح HTTPS connection، متصفحك بيبعت TLS Client Hello message فيها:

• قائمة الـ cipher suites المدعومة وترتيبها
• قائمة الـ TLS extensions
• الـ elliptic curves وطرق الضغط

الـ JA3 fingerprint هو MD5 hash لمجموعة الـ values دي ، وكل متصفح بيبعت combination مختلفة. أدوات زي Wireshark ومنصات الـ threat intelligence بتستخدمه لتحديد نوع العميل من غير أي تعاون منه.

٧. Behavioral Fingerprinting

الأحدث والأصعب في الكشف ، بيستخدم طريقة إنت بتتعامل بيها مع الجهاز:

• Mouse Movement Patterns: سرعة وشكل مسار الـ mouse بتميز البشر عن الـ bots، وحتى بتفرق بين أشخاص مختلفين بشكل نسبي
• Keystroke Dynamics: الوقت بين ضغطات الكيبورد (dwell time وflight time) بيكون ثابت نسبياً لنفس الشخص
• Scroll Behavior: طريقة الـ scrolling بتختلف بين touchpad وماوس وموبايل
• Touch Events (الموبايل): إحداثيات وحجم نقاط اللمس بتختلف من جهاز لجهاز

٨. Cross-Browser Fingerprinting

حتى لو غيرت المتصفح، في خصائص بتفضل ثابتة من جهازك:

• الـ GPU renderer string (WebGL) ، مش بيتغير بتغيير المتصفح
• قائمة الفونتات المثبتة ، نفسها في Chrome وFirefox وSafari
• الـ audio hardware fingerprint
• الـ screen resolution والـ pixel ratio

المواقع الكبيرة بتستخدم الـ signals دي عشان “تربط” نفس المستخدم حتى لو غيّر المتصفح أو عمل Clear History.

إزاي الشركات بتستخدم البصمة دي؟

١. الإعلانات المستهدفة مواقع الإعلانات الكبيرة زي Google وMeta بتجمع بصمات من ملايين المواقع اللي بتتعاون معاها. يعني حتى لو دخلت موقع صغير عنده Google Analytics، بصمتك بتروح لـ Google اللي بتضيفها لـ profile بتاعك.

٢. مكافحة الاحتيال البنوك وشركات الدفع الإلكتروني بتستخدم الـ fingerprinting عشان يتعرفوا لو حاجة غريبة بتحصل ، زي لو حساب اتفتح من أجهزة كتير جداً في وقت قصير.

٣. منع إنشاء حسابات وهمية المواقع اللي بتحارب الـ bots أو التسجيلات المتكررة بتستخدم الـ fingerprint عشان تعرف لو نفس الشخص بيحاول يعمل أكتر من حساب.

٤. تتبع بدون موافقة بعض المواقع بتتبعك من غير ما تسألك ومن غير cookies ، وده اللي بيخليه أخطر وأصعب في الكشف.

الفرق بين الـ Fingerprint والـ Cookies

الـ cookies هي اللي بيطلبوا منك توافق عليها في الـ banner اللي بيطلع. الـ fingerprint مفيش banner ومفيش موافقة ، بيحصل في الخفا تماماً.

إزاي تحمي نفسك؟

مفيش حل 100% ، الهدف مش تبقى مجهول كامل، الهدف تبقى أقل تميزاً وتصعّب عملية تتبعك.

أولاً: اختيار المتصفح المناسب

Brave Browser هو الأقوى حالياً في مقاومة الـ Fingerprinting ، بيعمل randomization على نتيجة الـ Canvas وWebGL وAudioContext في كل جلسة، بحيث الـ hash بيتغير من موقع لموقع من غير ما يكسر الوظائف. الـ fingerprint مش بيتصفر، بيتعشوش ، وده أذكى.

Firefox مع privacy.resistFingerprinting = true في about:config بيعمل تأثير مشابه ، بيوحّد كتير من الـ signals عشان تبان زي أي مستخدم Firefox تاني.

Chrome: الأضعف في الحماية. Google مش حاسساها مشكلة ، هي المستفيد الأول من الـ fingerprinting.

ثانياً: Tor Browser

الحل الأقوى ، مش بيخفي بصمتك، بيوحّدها مع ملايين مستخدمين تانيين. كل مستخدمي Tor بيبانوا متشابهين تقريباً. بيبطّل Canvas وWebGL fingerprinting بشكل افتراضي ومش بيحتاج إعدادات إضافية.

العيب: بطيء، وبعض المواقع بتبلوكه.

ثالثاً: Extensions متخصصة

• CanvasBlocker (Firefox): بيضيف noise على نتيجة الـ Canvas وWebGL وAudioContext
• JShelter: extension شامل بيقيّد صلاحيات JavaScript للـ APIs الحساسة
• uBlock Origin: مش بس بيبلوك إعلانات ، بيبلوك سكريبتات الـ fingerprinting نفسها زي FingerprintJS

رابعاً: الـ VPN مش كفاية لوحده

الـ VPN بيغير الـ IP بس ، والـ fingerprint بيفضل نفسه. مفيد كطبقة إضافية بس مش حماية من الـ fingerprinting.

خامساً: قلل الـ Unique Signals

• متثبتش فونتات غريبة كتير ، كل فونت غير standard بيزودك تميزاً
• قلل عدد الـ browser extensions ، كل extension بيزود في بصمتك
• متستخدمش نفس المتصفح للشغل والتصفح الشخصي

سادساً: اعرف مكانتك دلوقتي

جرب موقع coveryourtracks.eff.org ، هيقولك قد إيه بصمتك فريدة دلوقتي ومين العوامل اللي بتميزك أكتر.

الخلاصة

الإنترنت مش بيتتبعك بقى بالطريقة القديمة ، الـ cookies اللي كنا خايفين منها بقت مجرد جزء صغير من الصورة. الـ browser fingerprinting أخفى وأصعب في الكشف والتعطيل.

مش لازم تحط قبعة ورق معدني 😄 ، بس كون عارف إن كل مرة بتفتح فيها موقع، الموقع بيعمل “سيلفي” لجهازك من غير ما يسألك.

الوعي ده، حتى لو ما عملتش حاجة، بيخليك تاخد قرارات أكتر وعياً بخصوص privacy بتاعتك على الإنترنت.