Canvassing the Fingerprinters

Purpose

Render the same deterministic canvas several times and compare hashes to detect per-render canvas noise.

Paper basis

Section 5.3 and Appendix A.7 describe repeated rendering as a way to detect randomization defenses.

Caveat

This uses a synthetic canvas, not a vendor's exact test canvas, and does not evaluate session-persistent noise.

(async () => {
  const hashText = async (value) => {
    const bytes = new TextEncoder().encode(value);
    const digest = await crypto.subtle.digest("SHA-256", bytes);

    return [...new Uint8Array(digest)]
      .map((byte) => byte.toString(16).padStart(2, "0"))
      .join("");
  };

  const renderTestCanvas = () => {
    const canvas = document.createElement("canvas");
    canvas.width = 300;
    canvas.height = 120;

    const context = canvas.getContext("2d", { willReadFrequently: true });
    if (!context) {
      throw new Error("2D canvas is unavailable");
    }

    context.textBaseline = "top";
    context.fillStyle = "#f60";
    context.fillRect(4, 4, 292, 112);
    context.fillStyle = "#069";
    context.font = "16px Arial";
    context.fillText("Cwm fjordbank glyphs vext quiz", 12, 16);
    context.font = "18px serif";
    context.fillText("Canvas fingerprint stability probe", 12, 44);
    context.strokeStyle = "rgba(0, 0, 0, 0.55)";
    context.beginPath();
    context.arc(238, 62, 28, 0, Math.PI * 2);
    context.stroke();

    return canvas.toDataURL("image/png");
  };

  const dataUrls = Array.from({ length: 5 }, renderTestCanvas);
  const hashes = await Promise.all(dataUrls.map(hashText));
  const uniqueHashes = [...new Set(hashes)];
  const result = {
    artifact: "canvas-randomization-stability-probe",
    stableAcrossRepeatedRenders: uniqueHashes.length === 1,
    renderCount: dataUrls.length,
    uniqueHashCount: uniqueHashes.length,
    hashes,
    dataUrlLengths: dataUrls.map((value) => value.length),
    interpretation:
      uniqueHashes.length === 1
        ? "Repeated renders were stable for this synthetic canvas."
        : "Repeated renders differed; per-render canvas noise or another nondeterministic factor may be present."
  };

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

Purpose

Patch Canvas APIs on the current page, log toDataURL extractions, and classify likely fingerprintable canvases using the paper's high-level filters.

Paper basis

Section 3.1 records Canvas API activity; Section 3.2 excludes lossy output, small canvases, and animation-associated methods.

Caveat

Install before reloading a page for useful coverage. Stack-derived script URLs are best-effort and browser-dependent.

(async () => {
  const globalName = "__canvasExtractionObserver";

  if (window[globalName] && window[globalName].restore) {
    window[globalName].restore();
  }

  const records = [];
  const canvasState = new WeakMap();
  const originals = {
    getContext: HTMLCanvasElement.prototype.getContext,
    toDataURL: HTMLCanvasElement.prototype.toDataURL,
    "2d.save": CanvasRenderingContext2D.prototype.save,
    "2d.restore": CanvasRenderingContext2D.prototype.restore
  };

  const ensureState = (canvas) => {
    if (!canvasState.has(canvas)) {
      canvasState.set(canvas, {
        methods: Object.create(null)
      });
    }

    return canvasState.get(canvas);
  };

  const stackUrls = () => {
    const stack = String(new Error().stack || "");

    return [...new Set(stack.match(/https?:\/\/[^\s)]+/g) || [])];
  };

  const classify = ({ canvas, mimeType, state }) => {
    const excludedReasons = [];

    if (mimeType === "image/jpeg" || mimeType === "image/webp") {
      excludedReasons.push("lossy-or-compatibility-format");
    }

    if (canvas.width < 16 || canvas.height < 16) {
      excludedReasons.push("small-canvas-under-16x16");
    }

    if (state.methods.save || state.methods.restore) {
      excludedReasons.push("animation-associated-save-restore");
    }

    return {
      excludedReasons,
      likelyFingerprintable: excludedReasons.length === 0
    };
  };

  const hashText = async (value) => {
    const bytes = new TextEncoder().encode(value);
    const digest = await crypto.subtle.digest("SHA-256", bytes);

    return [...new Uint8Array(digest)]
      .map((byte) => byte.toString(16).padStart(2, "0"))
      .join("");
  };

  HTMLCanvasElement.prototype.getContext = function patchedGetContext(...args) {
    const context = originals.getContext.apply(this, args);

    if (args[0] === "2d" && context) {
      ensureState(this);
    }

    return context;
  };

  for (const method of ["save", "restore"]) {
    CanvasRenderingContext2D.prototype[method] = function patched2dMethod(...args) {
      const state = ensureState(this.canvas);
      state.methods[method] = (state.methods[method] || 0) + 1;

      return originals["2d." + method].apply(this, args);
    };
  }

  HTMLCanvasElement.prototype.toDataURL = function patchedToDataURL(type, ...args) {
    const startedAt = performance.now();
    const dataUrl = originals.toDataURL.call(this, type, ...args);
    const mimeType = String(type || "image/png").toLowerCase();
    const state = ensureState(this);
    const classification = classify({ canvas: this, mimeType, state });

    records.push({
      at: new Date().toISOString(),
      args: [type, ...args],
      dataUrl,
      dataUrlLength: dataUrl.length,
      dataUrlPrefix: dataUrl.slice(0, 80),
      durationMs: performance.now() - startedAt,
      height: this.height,
      mimeType,
      observed2dMethods: { ...state.methods },
      stackUrls: stackUrls(),
      width: this.width,
      ...classification
    });

    return dataUrl;
  };

  window[globalName] = {
    records,
    async summary() {
      const enrichedRecords = await Promise.all(
        records.map(async ({ dataUrl, ...record }) => ({
          ...record,
          sha256: await hashText(dataUrl)
        }))
      );
      const groups = new Map();

      for (const record of enrichedRecords) {
        const group = groups.get(record.sha256) || {
          count: 0,
          example: record,
          sha256: record.sha256
        };
        group.count += 1;
        groups.set(record.sha256, group);
      }

      const result = {
        artifact: "canvas-extraction-observer",
        capturedExtractionCount: records.length,
        likelyFingerprintableCount: enrichedRecords.filter((record) => record.likelyFingerprintable).length,
        groupedByCanvasHash: [...groups.values()].sort((a, b) => b.count - a.count),
        records: enrichedRecords
      };

      console.log(result);
      return result;
    },
    restore() {
      HTMLCanvasElement.prototype.getContext = originals.getContext;
      HTMLCanvasElement.prototype.toDataURL = originals.toDataURL;
      CanvasRenderingContext2D.prototype.save = originals["2d.save"];
      CanvasRenderingContext2D.prototype.restore = originals["2d.restore"];
      delete window[globalName];
    }
  };

  const result = {
    artifact: "canvas-extraction-observer",
    installed: true,
    nextStep: "Reload or interact with the page, then run await window.__canvasExtractionObserver.summary()",
    trackedInterfaces: [
      "HTMLCanvasElement.toDataURL",
      "CanvasRenderingContext2D.save",
      "CanvasRenderingContext2D.restore"
    ]
  };

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

Purpose

Classify observed script URLs by vendor-pattern leads and serving context: first-party, same-site, subdomain, or popular CDN.

Paper basis

Table 3 lists attribution patterns; Section 5.2 discusses first-party exceptions, CNAME cloaking, subdomain routing, and CDN hosting.

Caveat

Vendor matches are review leads, not ground truth. The same-site check is an approximation and does not implement the public suffix list.

(async () => {
  const records = window.__canvasExtractionObserver ? window.__canvasExtractionObserver.records : [];
  const candidateUrls = [...new Set(records.flatMap((record) => record.stackUrls || []))];
  const pageHost = location.hostname.toLowerCase();
  const vendorPatterns = [
    { vendor: "Akamai", pattern: /\/akam\//i },
    { vendor: "FingerprintJS or FingerprintJS legacy", pattern: /fpnpmcdn\.net/i },
    { vendor: "mail.ru", pattern: /privacy-cs\.mail\.ru/i },
    { vendor: "AWS Firewall", pattern: /awswaf\.com/i },
    { vendor: "InsurAds", pattern: /insurads\.com/i },
    { vendor: "Signifyd", pattern: /signifyd\.com/i },
    { vendor: "PerimeterX", pattern: /px-cloud\.net/i },
    { vendor: "Sift Science", pattern: /sift\.com/i },
    { vendor: "Shopify", pattern: /shopifycloud/i },
    { vendor: "Adscore", pattern: /adsco\.re/i },
    { vendor: "GeeTest", pattern: /geetest\.com/i }
  ];
  const popularCdns = [
    "akamai.net",
    "azureedge.net",
    "b-cdn.net",
    "bootstrapcdn.com",
    "cdn.jsdelivr.net",
    "cdnjs.cloudflare.com",
    "cloudflare.com",
    "cloudfront.net",
    "fastly.net",
    "googleusercontent.com",
    "gstatic.com",
    "googleapis.com"
  ];

  const approximateSite = (host) => host.split(".").slice(-2).join(".");

  const classifyContext = (url) => {
    const parsed = new URL(url, location.href);
    const host = parsed.hostname.toLowerCase();
    const cdnMatch = popularCdns.find((domain) => host === domain || host.endsWith("." + domain));

    return {
      host,
      firstPartyHost: host === pageHost,
      sameSiteApproximation: approximateSite(host) === approximateSite(pageHost),
      subdomainOfPageHost: host.endsWith("." + pageHost),
      popularCdn: cdnMatch || null
    };
  };

  const classified = candidateUrls.map((url) => ({
    url,
    context: classifyContext(url),
    vendorMatches: vendorPatterns
      .filter(({ pattern }) => pattern.test(url))
      .map(({ vendor }) => vendor)
  }));
  const result = {
    artifact: "canvas-script-pattern-and-context-classifier",
    candidateUrlCount: candidateUrls.length,
    pageHost,
    classified,
    note: "Use vendor matches as review leads, not ground truth. First-party and same-site context can change blocklist behavior."
  };

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