WebGL

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics without the use of plugins. It enables browsers to utilize the power of the computer’s graphics processing unit (GPU) for a more immersive experience on web pages. However, it’s this access to the GPU that provides unique information useful for fingerprinting.

WebGL Attributes#

WebGL fingerprinting extracts information from how a browser renders graphics using WebGL. Given the variations in GPUs, driver versions, and browser implementations, there are subtle differences in the output of WebGL across different machines. These differences can be exploited to identify and distinguish browsers.

Here is a simple implementation:

   var canvas = document.createElement('canvas');
   var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

   var vendor = gl.getParameter(gl.VENDOR);
   var renderer = gl.getParameter(gl.RENDERER);

WebGL Rendering#

On the same principle as Canvas Fingerprinting, but using a “webgl” context instead of a “2d” context.

Using shaders#

For example PerimeterX is doing a shader fingerprinting like so:

attribute vec2 attrVertex;
varying vec2 varyinTexCoordinate;
uniform vec2 uniformOffset;
void main(){
  varyinTexCoordinate=attrVertex+uniformOffset;
  gl_Position=vec4(attrVertex,0,1);
}

Or like so:

precision mediump float;
varying vec2 varyinTexCoordinate;
void main() {
  gl_FragColor=vec4(varyinTexCoordinate,0,1);
}

Bypass Techniques#

The main way to bypass WebGL fingerprinting is to run the browser on a consumer grade GPUs.

Directly spoofing parameters either using JavaScript Proxy or using a custom browser can be used, and would be a cheaper option of bypass.