DEV Community: LoseNine

Browserscan.net Canvas Fingerprint Pure-JS Technical Report

LoseNine — Tue, 09 Jun 2026 13:39:57 +0000

browserscan.net Canvas Fingerprint Pure-JS Technical Report

Join my Discord community to learn, share, and discuss together: https://discord.gg/rX2vkNNW

Quick Conclusion

The /canvas page on browserscan.net splits the Canvas fingerprint into two stages:

It first draws a text canvas and calls canvas.toDataURL() twice to check output stability.
If the two text dataURLs differ, the result is "unstable".
If they are stable, it draws a geometry canvas and reads geometryDataURL.
The final displayed and reported canvasHash is:

canvasHash = SHA1(geometryDataURL)

Important: the final hash input is the complete PNG dataURL of the geometry canvas, not the text canvas.

This directory contains canvas_fp_pure.js, which reproduces:

the Canvas drawing instructions
the stability decision
pure-JS SHA1
PNG dataURL length and chunk/CRC helper parsing

Logic Chain

Layer	Script / Function	Purpose
Page entry	`yfrOX3ej.js -> ta()`	Triggers Canvas detection and reports `CANVAS_DETAIL`
Hash builder	`yfrOX3ej.js -> ea()`	Calls the core collector and computes `SHA1(geometry)` when stable
Core collector	`Dfh5dMcW.js -> T0()`	Produces `{ winding, text, geometry }`
Text drawing	`Dfh5dMcW.js -> X(canvas, ctx)`	Produces the text image used for stability checking
Geometry drawing	`Dfh5dMcW.js -> x0(canvas, ctx)`	Produces the image used as the final hash input
dataURL wrapper	`Dfh5dMcW.js -> B(canvas)`	Wraps `canvas.toDataURL()`

The page-level logic reduces to:

const { text, geometry } = await T0();

const isStable = text !== "unstable";
const canvasHash = isStable ? SHA1(geometry).toString() : geometry;

The core collector reduces to:

async function T0() {
  const [canvas, ctx] = createCanvas2d();

  if (!supportCanvasPngDataUrl(canvas, ctx)) {
    return {
      winding: false,
      text: "unsupported",
      geometry: "unsupported",
    };
  }

  const winding = checkEvenOddWinding(ctx);

  await drawText(canvas, ctx);
  const text1 = canvas.toDataURL();
  const text2 = canvas.toDataURL();

  if (text1 !== text2) {
    return {
      winding,
      text: "unstable",
      geometry: "unstable",
    };
  }

  await nextTick();
  drawGeometry(canvas, ctx);

  return {
    winding,
    text: text1,
    geometry: canvas.toDataURL(),
  };
}

Text Canvas

The text canvas is only used for stability checking. It is not directly hashed.

canvas.width = 240;
canvas.height = 60;

ctx.textBaseline = "alphabetic";

ctx.fillStyle = "#f60";
ctx.fillRect(100, 1, 62, 20);

ctx.fillStyle = "#069";
ctx.font = '11pt "Times New Roman"';
ctx.fillText("Cwm fjordbank gly 😃", 2, 15);

await nextTick();

ctx.fillStyle = "rgba(102, 204, 0, 0.2)";
ctx.font = "18pt Arial";
ctx.fillText("Cwm fjordbank gly 😃", 4, 45);

Stability decision:

const text1 = canvas.toDataURL();
const text2 = canvas.toDataURL();

if (text1 !== text2) {
  canvasHash = "unstable";
}

Geometry Canvas

After the text canvas is stable, the same canvas is resized to 122 x 110 and redrawn. This geometry dataURL is the SHA1 input.

canvas.width = 122;
canvas.height = 110;

ctx.globalCompositeOperation = "multiply";

ctx.fillStyle = "#f2f";
ctx.beginPath();
ctx.arc(40, 40, 40, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

ctx.fillStyle = "#2ff";
ctx.beginPath();
ctx.arc(80, 40, 40, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

ctx.fillStyle = "#ff2";
ctx.beginPath();
ctx.arc(60, 80, 40, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

ctx.fillStyle = "#f9c";
ctx.arc(60, 60, 60, 0, Math.PI * 2, true);
ctx.arc(60, 60, 20, 0, Math.PI * 2, true);
ctx.fill("evenodd");

const geometryDataURL = canvas.toDataURL();
const canvasHash = SHA1(geometryDataURL);

Winding Check

winding is an auxiliary result. It is not part of the final hash input.

ctx.rect(0, 0, 10, 10);
ctx.rect(2, 2, 6, 6);

const winding = !ctx.isPointInPath(5, 5, "evenodd");

Environment and Anti-Detection Fields

The page also computes capability and anti-detection fields. These are displayed and reported, but they do not change the main hash formula when the canvas is stable.

Function	Meaning
`R0()`	Canvas 2D context support
`u0()`	Canvas text API support
`I0()`	Whether `toDataURL()` outputs a PNG dataURL
`S0()`	OffscreenCanvas support
`l0()`	Whether `toDataURL.toString()` looks native
`r0()`	Pixel comparison after reloading the canvas dataURL into an Image
`e0()`	DOM canvas vs OffscreenCanvas output comparison
`c0()/Q()/q()`	Canvas/WebGL noise and WebGL parameter checks
`U0()`	Aggregates `isNotAntiBrowser`

The reported object looks like:

{
  type: "CANVAS_DETAIL",
  canvasHash,
  supportContext2d,
  supportTillText,
  supportDataUrl,
  supportOffscreenCanvas,
  canvasNative,
  isStable,
  isNotAntiBrowser
}

Trace Evidence Summary

The dropped domtrace/jscall/http evidence shows the script relationship:

Script	Role
`Dfh5dMcW.js`	Core Canvas/WebGL fingerprint logic
`yfrOX3ej.js`	`/canvas` page component and hash caller
`CCZS-DkR.js`	Shared dependency providing `SHA1`

Key DOM calls observed in the main flow:

Call	Purpose
`document.createElement("canvas")`	Creates the detection canvas
`canvas.getContext("2d")`	Gets the 2D context
`ctx.fillText(...)`	Draws the text image
`ctx.fillRect(...)`	Draws the text image background block
`ctx.arc(...)` / `ctx.fill(...)`	Draws the geometry image
`canvas.toDataURL()`	Outputs PNG dataURL
`ctx.getImageData(...)`	Pixel comparison for anti-detection checks
`OffscreenCanvas.getContext("2d")`	OffscreenCanvas comparison

Note: DOM trace string logging truncates long strings at 4000 characters. Long toDataURL values in the trace can confirm call order and prefixes, but they must not be treated as complete PNG dataURLs or final hash samples. The final hash must be computed from the runtime-complete geometryDataURL.

Direct Runtime Verification

A fresh run of https://www.browserscan.net/canvas captured this runtime CANVAS_DETAIL:

{
  "type": "CANVAS_DETAIL",
  "canvasHash": "ab684eb07ee596f8ed673c7e4eaaaa3f061195d0",
  "supportContext2d": true,
  "supportTillText": true,
  "supportDataUrl": true,
  "supportOffscreenCanvas": true,
  "canvasNative": true,
  "isStable": true,
  "isNotAntiBrowser": true
}

In the same run, the T0() toDataURL() sequence was:

Order	Role	Logged length	Notes
1	PNG dataURL support check	154	`P(canvas, ctx)`
2	`T0()` support check	154	Confirms PNG output before main collection
3	First text sample	4000	Trace string truncated
4	Second text sample	4000	Truncated prefix matches the first one; runtime `isStable=true`
5	Geometry sample	4000	Trace string truncated; the runtime-complete value is passed into SHA1

Verification conclusion:

The runtime page took the stable branch: isStable=true.
The final canvasHash is a 40-character SHA1 hex string.
The source stable branch is SHA1(geometry).toString().
The runtime writer output in CANVAS_DETAIL.canvasHash is consistent with that branch.
The exact hash may change across Canvas rendering environments and PNG encoder details; the stable part is the formula and flow, not a fixed hash constant.

ruyiPage Same-Context Strong Verification

Using the C:\ruyipage automation framework, the verification was run inside the same browserscan page context:

Read the page's native displayed 40-character canvasHash.
Inject canvas_fp_pure.js into the current page.
Run the restored collectCanvasFingerprint(document) with the page's real document/canvas.
Compare the page-native hash with the restored local hash.

Result:

{
  "ok": true,
  "pageHashBeforeInject": "979686afccc6b098f6ccc9b0122c4ea56ce1bd13",
  "verify": {
    "pageHash": "979686afccc6b098f6ccc9b0122c4ea56ce1bd13",
    "localHash": "979686afccc6b098f6ccc9b0122c4ea56ce1bd13",
    "matches": true,
    "stable": true,
    "winding": true,
    "textLength": 7806,
    "geometryLength": 8750,
    "geometryBytes": 6544,
    "geometryPngCrcOk": true,
    "geometryChunkTypes": ["IHDR", "IDAT", "deBG", "IEND"],
    "readyState": "complete",
    "location": "https://www.browserscan.net/canvas"
  }
}

This proves, in the same browser page environment:

The page's own canvasHash exactly matches canvas_fp_pure.js.
The text canvas is stable.
The geometry PNG is complete and passes CRC validation.
The restored drawing flow and SHA1 logic match the actual browserscan execution.

Validation script: ruyipage_verify_browserscan.py

Validation output: ruyipage_verify_result.json

`canvas_fp_pure.js` Usage

Self-test:

node --check canvas_fp_pure.js
node canvas_fp_pure.js --self-test

Pure hash computation from existing dataURLs:

const fp = require("./canvas_fp_pure");

const result = fp.computeCanvasHashFromDataUrls({
  text1: firstTextDataURL,
  text2: secondTextDataURL,
  geometry: geometryDataURL,
});

console.log(result);

Stable output:

{
  stable: true,
  text: firstTextDataURL,
  geometry: geometryDataURL,
  hash: SHA1(geometryDataURL)
}

Unstable output:

{
  stable: false,
  text: "unstable",
  geometry: "unstable",
  hash: "unstable"
}

Run the full collection inside a real browser Canvas environment:

<script src="./canvas_fp_pure.js"></script>
<script>
  BrowserScanCanvasFP.collectCanvasFingerprint(document).then(console.log);
</script>

Main API:

API	Purpose
`sha1(input)`	Pure-JS SHA1
`computeCanvasHashFromDataUrls({ text1, text2, geometry })`	Reproduces the stability decision and final hash
`buildTextDrawOps()`	Returns the restored text drawing instructions
`buildGeometryDrawOps()`	Returns the restored geometry drawing instructions
`drawTextFingerprint(canvas, ctx)`	Draws the text image on a real Canvas
`drawGeometryFingerprint(canvas, ctx)`	Draws the geometry image on a real Canvas
`collectCanvasFingerprint(document)`	Runs the full collection in a browser
`dataUrlByteLength(dataURL)`	Computes decoded dataURL byte length
`parsePngChunks(dataURL)`	Parses PNG chunks and validates CRC32

Pure-Computation Boundary

The browserscan algorithm itself can be reproduced as pure logic:

stable = textDataURL1 === textDataURL2;
canvasHash = stable ? SHA1(geometryDataURL) : "unstable";

However, geometryDataURL is not generated by a pure hash algorithm. It is a Canvas rendering artifact affected by:

fonts
anti-aliasing
graphics stack
color blending
PNG encoder behavior
Canvas noise or anti-fingerprinting policy

The practical engineering boundary is:

a real Canvas implementation, or an equivalent renderer, produces text1/text2/geometry
canvas_fp_pure.js performs the stability decision, SHA1, and helper parsing

That is the fully restored pure-computation part of the browserscan.net Canvas fingerprint.

Firefox Fingerprint Browser Customization: Supporting Password-Protected HTTP Proxies

LoseNine — Mon, 08 Jun 2026 05:22:04 +0000

Customizing Firefox to Read HTTP Proxy Credentials from an fpfile

Join my Discord community to learn, share, and discuss together: https://discord.gg/rX2vkNNW

This article explains a small Firefox source-code customization for HTTP proxy
authentication.

The goal is simple: when Firefox receives an HTTP authentication challenge from
a password-protected proxy, it first tries to read the username and password from
a local fpfile passed through the --fpfile command-line argument. If the file
is missing, unreadable, or incomplete, Firefox falls back to its original
username/password prompt.

This is useful when running automated or customized Firefox builds where proxy
credentials should be provided by local runtime configuration instead of an
interactive dialog.

Modified File

The core change is in:

C:\firefox\firefox\netwerk\protocol\http\nsHttpChannelAuthProvider.cpp

Firefox enters nsHttpChannelAuthProvider::GetCredentialsForChallenge() when it
needs credentials for an HTTP authentication challenge. A proxy challenge, such
as 407 Proxy Authentication Required, also goes through this path.

Originally, Firefox called PromptForIdentity() directly when credentials were
required. The customized version first attempts to load credentials from the file
specified by --fpfile. Only if that fails does it call the original prompt.

New Includes

The file adds a few includes near the top:

#include <fstream>
#include <string>

#include "base/command_line.h"
#include "nsStringStream.h"
#include "mozilla/Base64.h"

For this HTTP proxy authentication change, the important ones are:

#include <fstream>
#include <string>
#include "base/command_line.h"

They are used to read the local fpfile, parse text, and access the current
process command-line arguments.

Where the Logic Lives

The new logic is placed inside GetCredentialsForChallenge(), around the area
where Firefox previously prompted for credentials.

The original flow was:

rv = PromptForIdentity(level, proxyAuth, realm, aAuthType, authFlags, *ident);
if (NS_FAILED(rv)) return rv;
identFromURI = false;

The customized flow is:

Check whether the Firefox process was started with --fpfile.
If it was, open that file.
Read httpauth.username and httpauth.password.
If both values exist, create an nsHttpAuthIdentity.
If anything fails, continue with Firefox's original prompt behavior.

Reading HTTP Auth Credentials from fpfile

The code first checks whether the current Firefox process has the fpfile
switch:

const char kRuyiFileSwitch[] = "fpfile";
if (CommandLine::ForCurrentProcess()->HasSwitch(UTF8ToWide(kRuyiFileSwitch))) {
  std::wstring fpValue =
      CommandLine::ForCurrentProcess()->GetSwitchValue(
          UTF8ToWide(kRuyiFileSwitch));

If the switch has a value, the path is converted to UTF-8 and opened:

if (!fpValue.empty()) {
  std::string fileName = WideToUTF8(fpValue);
  std::fstream fs(fileName, std::ios::in);
  if (fs.is_open()) {

Then the file is read line by line. Both : and = are accepted as separators:

std::string line;
std::string username;
std::string password;

while (std::getline(fs, line)) {
  if (line.empty()) {
    continue;
  }

  size_t delimPos = line.find_first_of(":=");
  if (delimPos == std::string::npos ||
      delimPos + 1 >= line.length()) {
    continue;
  }

  std::string key = line.substr(0, delimPos);
  std::string value = line.substr(delimPos + 1);

The key and value are trimmed, so spaces or tabs around them are allowed:

size_t keyStart = key.find_first_not_of(" \t");
if (keyStart == std::string::npos) {
  continue;
}
size_t keyEnd = key.find_last_not_of(" \t");
key = key.substr(keyStart, keyEnd - keyStart + 1);

size_t valueStart = value.find_first_not_of(" \t");
if (valueStart == std::string::npos) {
  value.clear();
} else {
  size_t valueEnd = value.find_last_not_of(" \t");
  value = value.substr(valueStart, valueEnd - valueStart + 1);
}

Only two keys are recognized:

if (key == "httpauth.username") {
  username = value;
} else if (key == "httpauth.password") {
  password = value;
}

When both values are present, Firefox creates an HTTP authentication identity:

if (!username.empty() && !password.empty()) {
  *ident = nsHttpAuthIdentity(
      EmptyString(), NS_ConvertUTF8toUTF16(username),
      NS_ConvertUTF8toUTF16(password));
}

The first field, EmptyString(), is the domain. The next two fields are the
username and password.

Falling Back to Firefox's Original Prompt

If --fpfile is not provided, the file cannot be opened, the fields are missing,
or either credential is empty, ident remains empty. In that case, Firefox keeps
its original behavior and prompts the user:

if (ident->IsEmpty()) {
  rv = PromptForIdentity(level, proxyAuth, realm, aAuthType, authFlags,
                         *ident);
  if (NS_FAILED(rv)) return rv;
}
identFromURI = false;

In practice:

If the fpfile contains both httpauth.username and httpauth.password, Firefox authenticates automatically without showing the prompt.
If the fpfile is missing, unreadable, or incomplete, Firefox behaves exactly as before and shows the username/password dialog.

fpfile Format

Start Firefox with:

--fpfile=C:\firefox\fp.txt

The fpfile can use =:

httpauth.username=your_user
httpauth.password=your_password

It can also use ::

httpauth.username: your_user
httpauth.password: your_password

Use real credentials only in your local fpfile. Do not put production proxy
passwords into documentation, code comments, commits, screenshots, or blog posts.

Important Behavior and Limitations

This implementation uses one global HTTP authentication username/password pair.
It does not currently match credentials by proxy host or port.

It also does not restrict the injected credentials to proxyAuth == true.
That means a normal website HTTP Basic or Digest challenge that reaches the same
authentication path may also receive this httpauth.* identity.

For a tighter production design, I would add at least two extra guards:

Apply the fpfile credentials only when proxyAuth == true.
Scope credentials by proxy host and port instead of using a single global pair.

Why This Approach

The main benefit is that the change is narrow and preserves Firefox's default
behavior as the fallback path.

The custom build can run without an interactive proxy credential prompt when
valid fpfile credentials are available. At the same time, normal Firefox behavior
still works when the file is absent or invalid.

This keeps the runtime configuration outside the profile and avoids saving proxy
credentials into Firefox preferences.

Summary

The customization changes Firefox's HTTP authentication flow so that proxy
credentials can be supplied through a local --fpfile configuration file.

The important pieces are:

The change lives in nsHttpChannelAuthProvider.cpp.
The code reads httpauth.username and httpauth.password from --fpfile.
It creates an nsHttpAuthIdentity only when both values are present.
If reading fails, Firefox falls back to PromptForIdentity().
Real passwords should stay in the local fpfile, not in public documentation.