Same Script, Different Behavior

Source type

Reconstructed from pseudocode

Purpose

Demonstrates the paper's mobile/desktop API-trace alignment idea using offsets, API names, gap penalty, misalignment penalty, and normalized divergence score.

Paper basis

Section 3 defines execution traces, gap penalty, misalignment penalty, lookahead window, and normalized divergence score.

Caveats

Compact browser-compatible reconstruction, not the authors' full implementation.

(async () => {
  const mobileTrace = [
    { offset: 0, api: "Start" },
    { offset: 10, api: "Cond" },
    { offset: 30, api: "M1" },
    { offset: 40, api: "M2" },
    { offset: 20, api: "C1" },
    { offset: 50, api: "Merge" },
    { offset: 60, api: "End" }
  ];

  const desktopTrace = [
    { offset: 0, api: "Start" },
    { offset: 10, api: "Cond" },
    { offset: 20, api: "C1" },
    { offset: 35, api: "D1" },
    { offset: 45, api: "D2" },
    { offset: 50, api: "Merge" },
    { offset: 60, api: "End" }
  ];

  function divergenceScore(Fm, Fd, { gap = 1, penalty = 0.5, lookahead = 5 } = {}) {
    const n = Fm.length, m = Fd.length;
    const same = (a, b) => a && b && a.offset === b.offset && a.api === b.api;
    const D = Array.from({ length: n + 1 }, () => Array(m + 1).fill(Infinity));

    D[0][0] = 0;
    for (let i = 1; i <= n; i++) D[i][0] = i * gap;
    for (let j = 1; j <= m; j++) D[0][j] = j * gap;

    for (let i = 1; i <= n; i++) {
  for (let j = 1; j <= m; j++) {
    D[i][j] = Math.min(D[i - 1][j] + gap, D[i][j - 1] + gap);

    if (same(Fm[i - 1], Fd[j - 1])) {
      D[i][j] = Math.min(D[i][j], D[i - 1][j - 1]);
    } else {
      const lo = Math.max(1, j - lookahead);
      const hi = Math.min(m, j + lookahead);
      for (let jp = lo; jp <= hi; jp++) {
        if (same(Fm[i - 1], Fd[jp - 1])) {
          D[i][j] = Math.min(D[i][j], D[i - 1][jp - 1] + penalty);
        }
      }
    }
  }
    }

    return {
  rawCost: D[n][m],
  normalized: D[n][m] / Math.max(n, m),
  parameters: { gap, penalty, lookahead }
    };
  }

  const result = {
    sourceType: "reconstructed from paper algorithm",
    mobileTrace,
    desktopTrace,
    divergence: divergenceScore(mobileTrace, desktopTrace)
  };

  console.log(result);
  return result;
})()

Source type

Adapted from Listing 1 for browser execution

Purpose

Reproduces the Listing 1 logic pattern: classify mobile using navigator.platform and navigator.maxTouchPoints; skip plugin/Flash probing on mobile; probe plugin surfaces on desktop.

Paper basis

Listing 1 and the surrounding methodology discussion use navigator.platform, navigator.maxTouchPoints, navigator.mimeTypes, ActiveXObject, and navigator.plugins.

Caveats

Flash and ActiveX are mostly legacy surfaces. This snippet safely detects availability without assuming support.

(async () => {
  const errors = [];
  const platform = navigator.platform || "";
  const maxTouchPoints = navigator.maxTouchPoints || 0;

  function isMobileLike(p, t) {
    return !!p && (
  p === "iPhone" ||
  p === "iPad" ||
  (typeof p.substr === "function" && p.substr(0, 7) === "Linux a" && t > 0)
    );
  }

  const mobileLike = isMobileLike(platform, maxTouchPoints);
  const flash = {
    skippedBecauseMobileLike: mobileLike,
    activeXAvailable: false,
    mimeTypeEnabled: null,
    pluginPresent: null
  };

  if (!mobileLike) {
    try {
  flash.activeXAvailable = "ActiveXObject" in window;
    } catch (e) {
  errors.push(`ActiveX check failed: ${e.message}`);
    }

    try {
  const mt = navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"];
  flash.mimeTypeEnabled = !!(mt && mt.enabledPlugin);
    } catch (e) {
  errors.push(`mimeTypes check failed: ${e.message}`);
    }

    try {
  flash.pluginPresent = !!(
    navigator.plugins &&
    (navigator.plugins["Shockwave Flash"] || navigator.plugins["Shockwave Flash 2.0"])
  );
    } catch (e) {
  errors.push(`plugins check failed: ${e.message}`);
    }
  }

  const result = {
    sourceType: "modernized from Listing 1",
    platform,
    maxTouchPoints,
    mobileLike,
    flash,
    errors
  };

  console.log(result);
  return result;
})()

Source type

Adapted from Listings 2 and 9

Purpose

Demonstrates touch-device detection using maxTouchPoints, ontouchstart, and CSS media queries for coarse pointers.

Paper basis

Listing 2 and Listing 9 show event and coarse-pointer checks used to infer touch/mobile capability.

Caveats

Touch capability is not equivalent to mobile; desktops can have touch screens, and privacy defenses may spoof or reduce these values.

(async () => {
  const result = {
    sourceType: "direct/conceptual from touch-detection listings",
    maxTouchPoints: navigator.maxTouchPoints ?? null,
    msMaxTouchPoints: navigator.msMaxTouchPoints ?? null,
    ontouchstartInWindow: "ontouchstart" in window,
    anyPointerCoarse: null,
    pointerCoarse: null,
    observedTouchStartDuringProbe: false,
    inferredTouchCapable: false,
    errors: []
  };

  try {
    result.anyPointerCoarse = matchMedia("(any-pointer: coarse)").matches;
    result.pointerCoarse = matchMedia("(pointer: coarse)").matches;
  } catch (e) {
    result.errors.push(`matchMedia failed: ${e.message}`);
  }

  const handler = () => { result.observedTouchStartDuringProbe = true; };
  try {
    window.addEventListener("touchstart", handler, { once: true, passive: true });
    await new Promise(resolve => setTimeout(resolve, 500));
    window.removeEventListener("touchstart", handler);
  } catch (e) {
    result.errors.push(`touch listener failed: ${e.message}`);
  }

  result.inferredTouchCapable = !!(
    result.maxTouchPoints ||
    result.msMaxTouchPoints ||
    result.ontouchstartInWindow ||
    result.anyPointerCoarse
  );

  console.log(result);
  return result;
})()

Source type

Adapted from Listing 3

Purpose

Uses HTMLVideoElement.canPlayType() to compare codec support, mirroring the paper's example where codec availability can imply platform differences.

Paper basis

Listing 3 uses WebM VP9 and MP4 HVC1 support to infer Android-like media capability.

Caveats

Codec support changes with browser version, OS, installed components, and hardware acceleration.

(async () => {
  const result = {
    sourceType: "modernized from Listing 3",
    canPlayTypeAvailable: false,
    codecs: {},
    paperAndroidHeuristic: null,
    errors: []
  };

  try {
    const video = document.createElement("video");
    result.canPlayTypeAvailable = typeof video.canPlayType === "function";
    result.codecs.vp9Webm = video.canPlayType('video/webm; codecs="vp9"');
    result.codecs.hvc1Mp4 = video.canPlayType('video/mp4; codecs="hvc1"');
    result.paperAndroidHeuristic =
  result.codecs.vp9Webm === "probably" &&
  result.codecs.hvc1Mp4 !== "probably";
  } catch (e) {
    result.errors.push(e.message);
  }

  console.log(result);
  return result;
})()

Source type

Adapted from Listing 5

Purpose

Collects browser profiling signals shown in the bot-detection case study: canvas/WebGL support, WebGL vendor/renderer, screen color depth, navigator metadata, and navigator.webdriver.

Paper basis

Listing 5 profiles WebGL/canvas and browser properties; the paper says the WebGL/canvas sequence was desktop-exclusive in that case study.

Caveats

This does not contact any server and does not reproduce the vendor script's full profiling.

(async () => {
  const result = {
    sourceType: "modernized from Listing 5",
    canvas2D: false,
    webgl: {
  supported: false,
  experimentalSupported: false,
  vendor: null,
  renderer: null,
  unmaskedVendor: null,
  unmaskedRenderer: null,
  extensionCount: null
    },
    browserInfo: {
  appName: navigator.appName,
  appVersion: navigator.appVersion,
  product: navigator.product,
  webdriver: navigator.webdriver,
  userAgent: navigator.userAgent
    },
    screenInfo: {
  colorDepth: screen.colorDepth,
  pixelDepth: screen.pixelDepth,
  width: screen.width,
  height: screen.height,
  devicePixelRatio: window.devicePixelRatio
    },
    errors: []
  };

  try {
    const canvas = document.createElement("canvas");
    result.canvas2D = !!canvas.getContext("2d");

    const gl =
  canvas.getContext("webgl") ||
  canvas.getContext("experimental-webgl");

    result.webgl.supported = !!canvas.getContext("webgl");
    result.webgl.experimentalSupported = !!canvas.getContext("experimental-webgl");

    if (gl) {
  result.webgl.vendor = gl.getParameter(gl.VENDOR);
  result.webgl.renderer = gl.getParameter(gl.RENDERER);
  result.webgl.extensionCount = (gl.getSupportedExtensions() || []).length;

  const dbg = gl.getExtension("WEBGL_debug_renderer_info");
  if (dbg) {
    result.webgl.unmaskedVendor = gl.getParameter(dbg.UNMASKED_VENDOR_WEBGL);
    result.webgl.unmaskedRenderer = gl.getParameter(dbg.UNMASKED_RENDERER_WEBGL);
  }
    }
  } catch (e) {
    result.errors.push(e.message);
  }

  console.log(result);
  return result;
})()

Source type

Adapted from Listing 6

Purpose

Demonstrates conditional high-entropy Client Hints collection only when a user-agent check indicates Android Chrome.

Paper basis

Listing 6 checks Android Chrome and calls navigator.userAgentData.getHighEntropyValues(["model", "platformVersion", "fullVersionList"]).

Caveats

Availability and returned values depend on browser support, policy, origin, permissions, and privacy settings.

(async () => {
  const result = {
    sourceType: "modernized from Listing 6",
    userAgent: navigator.userAgent,
    hasUserAgentData: !!navigator.userAgentData,
    isAndroidChromeByUA: /Chrome/i.test(navigator.userAgent) && /Android/i.test(navigator.userAgent),
    requestedHints: ["model", "platformVersion", "fullVersionList"],
    highEntropyValues: null,
    skippedReason: null,
    errors: []
  };

  try {
    if (!result.hasUserAgentData) {
  result.skippedReason = "navigator.userAgentData is unavailable";
    } else if (!result.isAndroidChromeByUA) {
  result.skippedReason = "UA check did not match Android Chrome";
    } else if (typeof navigator.userAgentData.getHighEntropyValues !== "function") {
  result.skippedReason = "getHighEntropyValues is unavailable";
    } else {
  result.highEntropyValues =
    await navigator.userAgentData.getHighEntropyValues(result.requestedHints);
    }
  } catch (e) {
    result.errors.push(e.message);
  }

  console.log(result);
  return result;
})()

Source type

Adapted from Listing 8

Purpose

Enumerates whether EME-related APIs exist and names the DRM key-system identifiers used in the paper's media-format example.

Paper basis

Listing 8 checks navigator.requestMediaKeySystemAccess, MSMediaKeys, and WebKitMediaKeys, with Widevine, PlayReady, and FairPlay labels.

Caveats

This only checks API availability. It does not request DRM access or test real key-system support.

(async () => {
  const result = {
    sourceType: "modernized from Listing 8",
    apiPresence: {
  requestMediaKeySystemAccess: !!navigator.requestMediaKeySystemAccess,
  MSMediaKeys: !!window.MSMediaKeys,
  WebKitMediaKeys: !!window.WebKitMediaKeys
    },
    keySystemsNamedInPaper: {
  "com.widevine.alpha": "Widevine",
  "com.microsoft.playready": "PlayReady",
  "com.apple.fps": "FairPlay"
    },
    anyEmeApiPresent: false
  };

  result.anyEmeApiPresent = Object.values(result.apiPresence).some(Boolean);

  console.log(result);
  return result;
})()

Source type

Adapted from Listings 4 and 7

Purpose

Demonstrates mobile behavioral tracking primitives by registering touchstart and touchmove listeners, recording only local counts and a small sample.

Paper basis

Listing 4 registers touchmove on touch devices; Listing 7 wraps an element with touchstart and touchmove handlers.

Caveats

This does not send data anywhere. Running it will observe touch activity on the current page for two seconds.

(async () => {
  const result = {
    sourceType: "modernized from Listings 4 and 7",
    durationMs: 2000,
    touchstartCount: 0,
    touchmoveCount: 0,
    samples: [],
    errors: []
  };

  const target = document.documentElement || window;

  function sampleTouch(e, type) {
    const t = e.touches && e.touches[0];
    if (result.samples.length < 5) {
  result.samples.push({
    type,
    time: Math.round(performance.now()),
    clientX: t ? t.clientX : null,
    clientY: t ? t.clientY : null,
    touchCount: e.touches ? e.touches.length : 0
  });
    }
  }

  const onStart = e => {
    result.touchstartCount++;
    sampleTouch(e, "touchstart");
  };

  const onMove = e => {
    result.touchmoveCount++;
    sampleTouch(e, "touchmove");
  };

  try {
    target.addEventListener("touchstart", onStart, { passive: true });
    target.addEventListener("touchmove", onMove, { passive: true });
    await new Promise(resolve => setTimeout(resolve, result.durationMs));
    target.removeEventListener("touchstart", onStart);
    target.removeEventListener("touchmove", onMove);
  } catch (e) {
    result.errors.push(e.message);
  }

  console.log(result);
  return result;
})()

Source type

Inferred from the conceptual description and Table 3

Purpose

Collects representative signals from the paper's lesser-known categories: DOM manipulation, computed style, mutation target, storage access, performance timing, viewport observation support, and media capability.

Paper basis

Table 3 lists DOM manipulation, event handling, custom interfaces, timing, viewport observation, performance monitoring, storage, and media queries.

Caveats

This is not the paper's exact code; it is a conservative browser-executable probe for the described signal families.

(async () => {
  const result = {
    sourceType: "inferred/modernized from Table 3",
    dom: {},
    style: {},
    mutation: {},
    storage: {},
    performance: {},
    viewport: {},
    media: {},
    errors: []
  };

  try {
    const el = document.createElement("div");
    el.textContent = "probe";
    el.style.cssText = "position:absolute;left:-9999px;width:10px;height:10px;";
    document.body.appendChild(el);

    result.dom.createElement = true;
    result.dom.querySelectorBody = !!document.querySelector("body");
    result.style.computedWidth = getComputedStyle(el).width;

    if ("MutationObserver" in window) {
  const seenTargets = [];
  const mo = new MutationObserver(records => {
    for (const r of records) seenTargets.push(r.target.nodeName);
  });
  mo.observe(document.body, { childList: true });
  const child = document.createElement("span");
  document.body.appendChild(child);
  document.body.removeChild(child);
  await new Promise(resolve => setTimeout(resolve, 0));
  mo.disconnect();
  result.mutation.targets = seenTargets;
    }

    el.remove();
  } catch (e) {
    result.errors.push(`DOM/style/mutation probe failed: ${e.message}`);
  }

  try {
    const key = "__platform_probe__";
    localStorage.setItem(key, "1");
    result.storage.localStorageRoundTrip = localStorage.getItem(key) === "1";
    localStorage.removeItem(key);
  } catch (e) {
    result.storage.localStorageRoundTrip = false;
    result.errors.push(`localStorage probe failed: ${e.message}`);
  }

  try {
    result.performance.now = performance.now();
    const nav = performance.getEntriesByType &&
  performance.getEntriesByType("navigation")[0];
    result.performance.navigationStartTime = nav ? nav.startTime : null;
    result.performance.activationStart = nav ? nav.activationStart : null;
  } catch (e) {
    result.errors.push(`performance probe failed: ${e.message}`);
  }

  result.viewport.resizeObserverAvailable = "ResizeObserver" in window;
  result.viewport.innerWidth = window.innerWidth;
  result.viewport.innerHeight = window.innerHeight;

  try {
    const video = document.createElement("video");
    result.media.h264 = video.canPlayType('video/mp4; codecs="avc1.42E01E"');
    result.media.vp9 = video.canPlayType('video/webm; codecs="vp9"');
  } catch (e) {
    result.errors.push(`media probe failed: ${e.message}`);
  }

  console.log(result);
  return result;
})()

Source type

Adapted from Listing 10

Purpose

Shows the simple assignment dependency that the paper says JStap failed to model in one example.

Paper basis

Listing 10 shows b = b + a + 2 and notes that JStap missed a data-flow edge between b on lines 2 and 3.

Caveats

This snippet does not run JStap or build a PDG; it only demonstrates the JavaScript dependency relation.

(async () => {
  let a = 1;
  let b = 0;

  const before = { a, b };
  const expressionInputs = { previousB: b, a, constant: 2 };

  b = b + a + 2;

  const result = {
    sourceType: "direct/minimal from Listing 10",
    before,
    expressionInputs,
    after: { a, b },
    dependencyExplanation: "The new value of b depends on previous b, a, and constant 2."
  };

  console.log(result);
  return result;
})()