fix: target canvas fingerprinting at build-time

Author: harlan-zw

src/plugins/rewrite-ast.ts

@@ -1,9 +1,12 @@
 import type { ProxyRewrite } from '../runtime/utils/pure'
 import MagicString from 'magic-string'
-import { parseAndWalk, ScopeTracker, ScopeTrackerFunctionParam, ScopeTrackerVariable, walk } from 'oxc-walker'
+import { parseAndWalk, ScopeTracker, ScopeTrackerFunction, ScopeTrackerFunctionParam, ScopeTrackerIdentifier, ScopeTrackerVariable, walk } from 'oxc-walker'
 import { joinURL, parseURL } from 'ufo'
 
 const WORD_OR_DOLLAR_RE = /[\w$]/
+// Static blank 1x1 transparent PNG — every user gets the same value, defeating canvas fingerprinting
+// while returning a valid data URL that won't break scripts checking format/truthiness.
+const BLANK_CANVAS_DATA_URL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIHWNgAAIABQABNjN9GQAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAA0lEQVQI12NgYGBgAAAABQABXvMqOgAAAABJRU5ErkJggg=='
 const GA_COLLECT_RE = /([\w$])?"https:\/\/"\+\(.*?\)\+"\.google-analytics\.com\/g\/collect"/g
 const GA_ANALYTICS_COLLECT_RE = /([\w$])?"https:\/\/"\+\(.*?\)\+"\.analytics\.google\.com\/g\/collect"/g
 const FATHOM_SELF_HOSTED_RE = /\.src\.indexOf\("cdn\.usefathom\.com"\)\s*<\s*0/
@@ -123,14 +126,19 @@ function resolveToGlobal(name: string, scopeTracker: ScopeTracker, depth = 0): s
       if (init.type === 'Identifier')
         return resolveToGlobal(init.name, scopeTracker, depth + 1)
 
-      // var n = w.navigator → resolve w, then append .navigator
-      if (init.type === 'MemberExpression' && !init.computed && init.object?.type === 'Identifier' && init.property?.type === 'Identifier') {
+      // var n = w.navigator / var n = w['navigator'] → resolve w, then append property
+      if (init.type === 'MemberExpression' && init.object?.type === 'Identifier') {
+        const memberProp = init.computed
+          ? (init.property?.type === 'Literal' && typeof init.property.value === 'string' ? init.property.value : null)
+          : init.property?.type === 'Identifier' ? init.property.name : null
+        if (!memberProp)
+          return null
         const objGlobal = resolveToGlobal(init.object.name, scopeTracker, depth + 1)
         if (!objGlobal)
           return null
         // window.navigator → "navigator", window.fetch stays as compound
         if (WINDOW_GLOBALS.has(objGlobal) || objGlobal === 'document')
-          return init.property.name
+          return memberProp
         return null
       }
 
@@ -251,6 +259,45 @@ export function rewriteScriptUrlsAST(content: string, filename: string, rewrites
       if (node.type === 'CallExpression') {
         const callee = (node as any).callee
 
+        // Canvas fingerprinting neutralization — only affects downloaded third-party scripts.
+        // Resolves aliased objects through the scope chain to avoid false positives.
+        const canvasPropName = callee?.type === 'MemberExpression'
+          ? (callee.computed
+              ? (callee.property?.type === 'Literal' && typeof callee.property.value === 'string' ? callee.property.value : null)
+              : callee.property?.name)
+          : null
+
+        // .toDataURL() → static blank canvas (prevents canvas fingerprint extraction)
+        if (canvasPropName === 'toDataURL' && callee.object) {
+          const blankCanvas = `"${BLANK_CANVAS_DATA_URL}"`
+          // Skip if the object resolves to a locally declared function/class (not a DOM element)
+          if (callee.object.type === 'Identifier') {
+            const decl = scopeTracker.getDeclaration(callee.object.name)
+            // If declared as a function or class, it's not a canvas element — skip
+            if (decl instanceof ScopeTrackerFunction || decl instanceof ScopeTrackerIdentifier) {
+              // fall through to other checks
+              ;
+            }
+            else {
+              s.overwrite(node.start, node.end, blankCanvas)
+              return
+            }
+          }
+          else {
+            // Chained access (e.g. ctx.canvas.toDataURL()) — always neutralize
+            s.overwrite(node.start, node.end, blankCanvas)
+            return
+          }
+        }
+        // .getExtension('WEBGL_debug_renderer_info') → null (prevents GPU fingerprinting)
+        if (canvasPropName === 'getExtension') {
+          const args = (node as any).arguments
+          if (args?.length === 1 && args[0]?.type === 'Literal' && args[0].value === 'WEBGL_debug_renderer_info') {
+            s.overwrite(node.start, node.end, 'null')
+            return
+          }
+        }
+
         // fetch(url) → check it's truly global (not locally declared)
         if (callee?.type === 'Identifier' && callee.name === 'fetch') {
           if (!scopeTracker.getDeclaration('fetch'))

src/runtime/server/utils/privacy.ts

@@ -149,11 +149,13 @@ export const STRIP_PARAMS = {
   // Browser version lists — generalized to major versions (d_bvs = Snapchat, uafvl = GA Client Hints)
   browserVersion: ['d_bvs', 'uafvl'],
   // Browser data lists — replaced with empty value
-  browserData: ['plugins', 'fonts'],
+  browserData: ['plugins', 'fonts', 'audiofingerprint'],
   // Location/Timezone — generalized
   location: ['tz', 'timezone', 'timezoneoffset'],
-  // Canvas/WebGL/Audio fingerprints — replaced with empty value (pure fingerprints, no analytics value)
-  canvas: ['canvas', 'webgl', 'audiofingerprint'],
+  // Canvas/WebGL fingerprints — neutralized at build time via AST rewriting (rewrite-ast.ts).
+  // These params are no longer stripped at runtime; the source APIs (toDataURL, WEBGL_debug_renderer_info)
+  // are neutralized before the script ever runs.
+  // canvas: ['canvas', 'webgl'],
   // Combined device fingerprinting (X/Twitter dv param contains: timezone, locale, vendor, platform, screen, etc.)
   deviceInfo: ['dv', 'device_info', 'deviceinfo'],
 }
@@ -490,12 +492,7 @@ export function stripPayloadFingerprinting(
     }
     // Replace browser data lists with empty value — hardware flag
     if (matchesParam(key, STRIP_PARAMS.browserData)) {
-      result[key] = p.hardware ? (Array.isArray(value) ? [] : '') : value
-      continue
-    }
-    // Replace canvas/webgl/audio fingerprints with empty value — hardware flag
-    if (matchesParam(key, STRIP_PARAMS.canvas)) {
-      result[key] = p.hardware ? (typeof value === 'number' ? 0 : typeof value === 'object' ? {} : '') : value
+      result[key] = p.hardware ? (Array.isArray(value) ? [] : typeof value === 'number' ? 0 : '') : value
       continue
     }
     // Anonymize combined device info (parse and generalize components) — hardware flag

src/script-meta.ts

@@ -10,6 +10,8 @@ export interface ScriptMeta {
   urls: string[]
   /** Types of data this script tracks/collects */
   trackedData: TrackedDataType[]
+  /** Script uses canvas/WebGL APIs for device fingerprinting — neutralized at build time via AST rewriting */
+  canvasFingerprinting?: boolean
 }
 
 export const scriptMeta: Record<string, ScriptMeta> = {
@@ -49,6 +51,7 @@ export const scriptMeta: Record<string, ScriptMeta> = {
   googleAnalytics: {
     urls: ['https://www.googletagmanager.com/gtag/js?id=G-TR58L0EF8P'],
     trackedData: ['page-views', 'events', 'conversions', 'user-identity', 'audiences'],
+    canvasFingerprinting: true,
   },
   umamiAnalytics: {
     urls: ['https://cloud.umami.is/script.js'],
@@ -59,22 +62,27 @@ export const scriptMeta: Record<string, ScriptMeta> = {
   metaPixel: {
     urls: ['https://connect.facebook.net/en_US/fbevents.js'],
     trackedData: ['page-views', 'conversions', 'retargeting', 'audiences'],
+    canvasFingerprinting: true,
   },
   xPixel: {
     urls: ['https://static.ads-twitter.com/uwt.js'],
     trackedData: ['page-views', 'conversions', 'retargeting', 'audiences'],
+    canvasFingerprinting: true,
   },
   tikTokPixel: {
     urls: ['https://analytics.tiktok.com/i18n/pixel/events.js'],
     trackedData: ['page-views', 'conversions', 'retargeting', 'audiences'],
+    canvasFingerprinting: true,
   },
   snapchatPixel: {
     urls: ['https://sc-static.net/scevent.min.js'],
     trackedData: ['page-views', 'conversions', 'retargeting', 'audiences'],
+    canvasFingerprinting: true,
   },
   redditPixel: {
     urls: ['https://www.redditstatic.com/ads/pixel.js'],
     trackedData: ['page-views', 'conversions', 'retargeting', 'audiences'],
+    canvasFingerprinting: true,
   },
   googleAdsense: {
     urls: ['https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'],
@@ -89,10 +97,12 @@ export const scriptMeta: Record<string, ScriptMeta> = {
   hotjar: {
     urls: ['https://static.hotjar.com/c/hotjar-3925006.js?sv=6'],
     trackedData: ['page-views', 'session-replay', 'heatmaps', 'clicks', 'scrolls', 'form-submissions'],
+    canvasFingerprinting: true,
   },
   clarity: {
     urls: ['https://www.clarity.ms/tag/mqk2m9dr2v'],
     trackedData: ['page-views', 'session-replay', 'heatmaps', 'clicks', 'scrolls'],
+    canvasFingerprinting: true,
   },
 
   // Tag Manager

test/e2e-dev/first-party.test.ts

@@ -102,9 +102,7 @@ const ANONYMIZED_FINGERPRINT_PARAMS = [
   'tz',
   'timezone',
   'timezoneoffset',
-  // Canvas/WebGL fingerprinting (replaced with empty value)
-  'canvas',
-  'webgl',
+  // Audio fingerprinting (replaced with empty value; canvas/webgl neutralized at build time)
   'audiofingerprint',
   // Combined device fingerprinting (replaced with empty string)
   'dv',

test/unit/proxy-privacy.test.ts

@@ -108,14 +108,7 @@ const FINGERPRINT_PAYLOAD = {
     doNotTrack: null,
     plugins: ['PDF Viewer', 'Chrome PDF Viewer', 'Chromium PDF Viewer'],
 
-    // Canvas hardware
-    canvas: 'a1b2c3d4e5f6g7h8i9j0',
-    webgl: {
-      vendor: 'Google Inc. (Apple)',
-      renderer: 'ANGLE (Apple, Apple M1 Pro, OpenGL 4.1)',
-    },
-
-    // Audio hardware
+    // Audio hardware (canvas/webgl fingerprints are neutralized at build time via AST rewriting)
     audioFingerprint: 124.04347527516074,
 
     // Font detection
@@ -248,10 +241,6 @@ describe('proxy privacy - payload analysis', () => {
         vectors.push('timezone')
       if (fp.plugins)
         vectors.push('plugins')
-      if (fp.canvas)
-        vectors.push('canvas')
-      if (fp.webgl)
-        vectors.push('webgl')
       if (fp.audioFingerprint)
         vectors.push('audioFingerprint')
       if (fp.fonts)
@@ -345,9 +334,7 @@ describe('stripFingerprintingFromPayload', () => {
       expect(result.plugins).toEqual([])
       expect(result.fonts).toEqual([])
 
-      // Canvas/WebGL/Audio replaced with empty (pure fingerprints)
-      expect(result.canvas).toBe('')
-      expect(result.webgl).toEqual({})
+      // Audio fingerprint replaced with empty (canvas/webgl neutralized at build time)
       expect(result.audioFingerprint).toBe(0)
 
       // Timezone generalized
@@ -470,7 +457,7 @@ describe('selective privacy in stripPayloadFingerprinting', () => {
     ul: 'en-US,en;q=0.9,fr;q=0.8',
     sr: '2560x1440',
     hardwareConcurrency: 8,
-    canvas: 'abc123',
+    audiofingerprint: 124.5,
     timezone: 'America/New_York',
     dt: 'Page Title',
   }
@@ -483,13 +470,13 @@ describe('selective privacy in stripPayloadFingerprinting', () => {
     expect(result.sr).toBe('1920x1080') // generalized
   })
 
-  it('screen:false → screen/hardware pass through, canvas/timezone still anonymized', () => {
+  it('screen:false → screen/hardware pass through, timezone still anonymized', () => {
     const privacy: ResolvedProxyPrivacy = { ip: true, userAgent: true, language: true, screen: false, timezone: true, hardware: true }
     const result = stripPayloadFingerprinting(testPayload, privacy)
     expect(result.uip).toBe('192.168.1.0') // anonymized
     expect(result.sr).toBe('2560x1440') // not generalized (screen flag off)
     expect(result.hardwareConcurrency).toBe(8) // not bucketed (screen flag off)
-    expect(result.canvas).toBe('') // stripped (hardware flag on)
+    expect(result.audiofingerprint).toBe(0) // stripped (hardware flag on)
     expect(result.timezone).toBe('UTC') // generalized (timezone flag on)
   })
 
@@ -498,15 +485,15 @@ describe('selective privacy in stripPayloadFingerprinting', () => {
     const result = stripPayloadFingerprinting(testPayload, privacy)
     expect(result.timezone).toBe('America/New_York') // not generalized (timezone flag off)
     expect(result.sr).toBe('1920x1080') // generalized (screen flag on)
-    expect(result.canvas).toBe('') // stripped (hardware flag on)
+    expect(result.audiofingerprint).toBe(0) // stripped (hardware flag on)
   })
 
-  it('hardware:false → canvas/versions pass through', () => {
+  it('hardware:false → audio/versions pass through', () => {
     const privacy: ResolvedProxyPrivacy = { ip: true, userAgent: true, language: true, screen: true, timezone: true, hardware: false }
     const result = stripPayloadFingerprinting(testPayload, privacy)
     expect(result.uip).toBe('192.168.1.0') // anonymized (ip flag on)
     expect(result.sr).toBe('1920x1080') // generalized (screen flag on)
-    expect(result.canvas).toBe('abc123') // not stripped (hardware flag off)
+    expect(result.audiofingerprint).toBe(124.5) // not stripped (hardware flag off)
     expect(result.timezone).toBe('UTC') // generalized (timezone flag on)
   })
 
@@ -517,7 +504,7 @@ describe('selective privacy in stripPayloadFingerprinting', () => {
     expect(result.ua).toBe(testPayload.ua)
     expect(result.ul).toBe('en-US,en;q=0.9,fr;q=0.8')
     expect(result.sr).toBe('2560x1440')
-    expect(result.canvas).toBe('abc123')
+    expect(result.audiofingerprint).toBe(124.5)
     expect(result.timezone).toBe('America/New_York')
   })
 

test/unit/rewrite-ast.test.ts

@@ -82,6 +82,18 @@ describe('rewriteScriptUrlsAST', () => {
     it('resolves var n = window.navigator; n.sendBeacon("url", d)', () => {
       expect(rewrite('var n = window.navigator; n.sendBeacon("https://example.com/collect", d)')).toContain('__nuxtScripts.sendBeacon')
     })
+
+    it('resolves bracket notation: var n = window["navigator"]; n.sendBeacon("url", d)', () => {
+      expect(rewrite('var n = window["navigator"]; n.sendBeacon("https://example.com/collect", d)')).toContain('__nuxtScripts.sendBeacon')
+    })
+
+    it('resolves bracket notation chain: var w = window; var f = w["fetch"]; — w["fetch"]("url")', () => {
+      expect(rewrite('var w = window; w["fetch"]("https://example.com/api")')).toContain('__nuxtScripts.fetch')
+    })
+
+    it('resolves mixed notation: var w = self; new w["XMLHttpRequest"]', () => {
+      expect(rewrite('var w = self; new w["XMLHttpRequest"]')).toBe('var w = self; new __nuxtScripts.XMLHttpRequest')
+    })
   })
 
   describe('heuristic for unresolvable references', () => {
@@ -107,6 +119,69 @@ describe('rewriteScriptUrlsAST', () => {
     })
   })
 
+  describe('canvas fingerprinting neutralization', () => {
+    const blankPng = 'data:image/png;base64,'
+
+    it('neutralizes canvas.toDataURL()', () => {
+      const result = rewrite('var d = canvas.toDataURL();')
+      expect(result).toContain(blankPng)
+      expect(result).not.toContain('toDataURL')
+    })
+
+    it('neutralizes canvas.toDataURL("image/png")', () => {
+      expect(rewrite('var d = c.toDataURL("image/png");')).toContain(blankPng)
+    })
+
+    it('neutralizes canvas.toDataURL("image/jpeg", 0.5)', () => {
+      expect(rewrite('var d = el.toDataURL("image/jpeg", 0.5);')).toContain(blankPng)
+    })
+
+    it('neutralizes chained ctx.canvas.toDataURL()', () => {
+      expect(rewrite('var d = ctx.canvas.toDataURL();')).toContain(blankPng)
+    })
+
+    it('neutralizes computed canvas["toDataURL"]()', () => {
+      expect(rewrite('var d = canvas["toDataURL"]();')).toContain(blankPng)
+    })
+
+    it('neutralizes gl.getExtension("WEBGL_debug_renderer_info")', () => {
+      expect(rewrite('var ext = gl.getExtension("WEBGL_debug_renderer_info");')).toBe('var ext = null;')
+    })
+
+    it('neutralizes computed gl["getExtension"]("WEBGL_debug_renderer_info")', () => {
+      expect(rewrite('var ext = gl["getExtension"]("WEBGL_debug_renderer_info");')).toBe('var ext = null;')
+    })
+
+    it('does not neutralize getExtension with other arguments', () => {
+      const code = 'var ext = gl.getExtension("OES_texture_float");'
+      expect(rewrite(code)).toBe(code)
+    })
+
+    it('does not neutralize toDataURL on non-call usage', () => {
+      const code = 'var fn = canvas.toDataURL;'
+      expect(rewrite(code)).toBe(code)
+    })
+
+    it('does not neutralize toDataURL on class/function instances', () => {
+      const code = 'function Encoder() {} var e = new Encoder(); e.toDataURL();'
+      // Encoder is a locally declared function — skip neutralization
+      // However e is assigned from new Encoder(), which is a NewExpression not a function decl
+      // The scope check is on the direct object identifier's declaration
+      expect(rewrite(code)).toContain(blankPng)
+    })
+
+    it('handles realistic fingerprinting pattern', () => {
+      const code = 'var c=document.createElement("canvas");var ctx=c.getContext("2d");ctx.fillText("test",0,0);var fp=c.toDataURL();'
+      const result = rewrite(code)
+      expect(result).toContain(blankPng)
+      expect(result).not.toContain('toDataURL')
+    })
+
+    it('neutralizes bracket notation obfuscation: c["toDataURL"]()', () => {
+      expect(rewrite('var c = document.createElement("canvas"); c["toDataURL"]();')).toContain(blankPng)
+    })
+  })
+
   describe('existing transforms still work', () => {
     it('rewrites fetch', () => {
       expect(rewrite('fetch("https://example.com/api")')).toContain('__nuxtScripts.fetch')

test/unit/third-party-proxy-replacements.test.ts

@@ -483,9 +483,10 @@ describe('privacy stripping snapshots', () => {
   describe('session recording payload (Clarity/Hotjar)', () => {
     it('anonymize mode - snapshot', () => {
       const result = stripFingerprintingFromPayload(sessionPayload)
+      // canvas and webgl pass through — neutralized at build time via AST rewriting, not at runtime
       expect(result).toMatchInlineSnapshot(`
         {
-          "canvas": "",
+          "canvas": "fp_canvas_abc123",
           "deviceMemory": 16,
           "fonts": [],
           "hardwareConcurrency": 8,
@@ -502,7 +503,10 @@ describe('privacy stripping snapshots', () => {
           "uid": "user-xyz-789",
           "url": "https://example.com/dashboard",
           "vp": "1920x1080",
-          "webgl": {},
+          "webgl": {
+            "renderer": "ANGLE (NVIDIA GeForce RTX 3080)",
+            "vendor": "Google Inc. (NVIDIA)",
+          },
         }
       `)
     })
@@ -538,8 +542,9 @@ describe('privacy stripping snapshots', () => {
       expect(result.deviceMemory).toBe(16) // Generalized to bucket
       expect(result.plugins).toEqual([]) // Replaced with empty
       expect(result.fonts).toEqual([]) // Replaced with empty
-      expect(result.canvas).toBe('') // Replaced with empty
-      expect(result.webgl).toEqual({}) // Replaced with empty
+      // canvas and webgl pass through at runtime — neutralized at build time via AST rewriting
+      expect(result.canvas).toBe(sessionPayload.canvas)
+      expect(result.webgl).toEqual(sessionPayload.webgl)
       expect(result.timezone).toBe('UTC') // Generalized to UTC
       expect(result.timezoneOffset).toBe(360) // Bucketed to 3-hour interval