SVG

SVG is an XML-based vector image format. Unlike raster graphics which are pixel-based, SVGs are made up of paths, shapes, and fills, which allow them to scale without loss of quality. SVGs also support scripting and animation, making them suitable for interactive graphics and data visualization.

SVG fingerprinting exploits the differences in SVG rendering across different browsers and devices. Since SVGs can be scripted, they can be used to extract unique rendering behavior, such as font rendering, anti-aliasing, and even small discrepancies in how shapes are drawn.

How is SVG Fingerprinting Implemented in JavaScript?#

Here’s a basic example of how SVG fingerprinting might be implemented:

1. Create an SVG Element:

   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   svg.setAttribute("width", "100");
   svg.setAttribute("height", "100");

2. Draw Elements with Potential Variations:

   For instance, drawing text can expose variations in font rendering.

   const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
   text.setAttribute("x", "10");
   text.setAttribute("y", "40");
   text.textContent = "Fingerprint";
   svg.appendChild(text);

3. Convert to Data URL:

   This conversion allows for the extraction of rendered data.

   const svgData = new XMLSerializer().serializeToString(svg);
   const base64Data = btoa(unescape(encodeURIComponent(svgData)));
   const img = new Image();
   img.setAttribute("src", "data:image/svg+xml;base64," + base64Data);

4. Hash the Rendered Data:

   Once the image is loaded, it can be drawn to a canvas, and the resulting pixel data can be hashed, creating a unique identifier.

   img.onload = function() {
       const canvas = document.createElement("canvas");
       const ctx = canvas.getContext("2d");
       ctx.drawImage(img, 0, 0);
       const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
       const hash = someHashFunction(imageData.data);
       console.log("Fingerprint:", hash);
   };

Bypass SVG Fingerprinting:#

SVG rendering is closely bonded to the GPU used, and combined with other techniques such as Canvas Fingerprinting, and WebGL fingerpriting. Using comsumer-grade GPU makes it easier to bypass SVG fingerprinting, and combined with consistent other fingerprints, you can achieve full and consistent bypass.