2020-01-06 15:15:04 +01:00
|
|
|
const canvasAPI = {
|
|
|
|
draw: function draw(canvas){
|
|
|
|
"use strict";
|
|
|
|
|
2020-05-19 10:48:08 +02:00
|
|
|
canvas.width = 220;
|
|
|
|
canvas.height = 30;
|
2020-01-06 15:15:04 +01:00
|
|
|
|
|
|
|
const fingerprintText = "BrowserLeaks,com <canvas> 10";
|
|
|
|
|
|
|
|
const context = canvas.getContext("2d");
|
|
|
|
context.textBaseline = "top";
|
|
|
|
context.font = "14px 'Arial'";
|
|
|
|
context.textBaseline = "alphabetic";
|
|
|
|
context.fillStyle = "#f60";
|
|
|
|
context.fillRect(125, 1, 62, 20);
|
|
|
|
context.fillStyle = "#069";
|
|
|
|
context.fillText(fingerprintText, 2, 15);
|
2020-06-27 11:45:23 +02:00
|
|
|
context.fillStyle = "rgba(102, 204, 0, 0.7)";
|
2020-01-06 15:15:04 +01:00
|
|
|
context.fillText(fingerprintText, 4, 17);
|
|
|
|
|
|
|
|
return context;
|
|
|
|
},
|
|
|
|
getIsPointInPath: function getIsPointInPath(context){
|
|
|
|
"use strict";
|
|
|
|
|
|
|
|
context.beginPath();
|
|
|
|
context.moveTo(20, 19);
|
|
|
|
context.lineTo(40, 19);
|
|
|
|
context.lineTo(30, 30);
|
|
|
|
context.closePath();
|
|
|
|
context.stroke();
|
|
|
|
|
|
|
|
return context.isPointInPath(30, 19);
|
|
|
|
},
|
|
|
|
getFingerprintData: function getFingerprintData(canvas, context){
|
|
|
|
"use strict";
|
|
|
|
|
|
|
|
return {
|
|
|
|
imageData: context.getImageData(0, 0, canvas.width, canvas.height),
|
|
|
|
url: canvas.toDataURL(),
|
|
|
|
isPointInPath: canvasAPI.getIsPointInPath(context)
|
|
|
|
};
|
|
|
|
},
|
|
|
|
getFingerprintFromDifferentDocument: function getFingerprintFromDifferentDocument(otherDocument){
|
|
|
|
"use strict";
|
|
|
|
|
|
|
|
// create window canvas
|
|
|
|
const canvas = document.createElement("canvas");
|
|
|
|
|
|
|
|
// draw image in window canvas
|
|
|
|
canvasAPI.draw(canvas);
|
|
|
|
|
|
|
|
// create other canvas and context
|
|
|
|
const otherCanvas = otherDocument.createElement("canvas");
|
|
|
|
otherCanvas.setAttribute("width", 220);
|
|
|
|
otherCanvas.setAttribute("height", 30);
|
|
|
|
const otherContext = otherCanvas.getContext("2d");
|
|
|
|
|
|
|
|
// copy image from window canvas to iframe context
|
|
|
|
otherContext.drawImage(canvas, 0, 0);
|
|
|
|
|
|
|
|
return canvasAPI.getFingerprintData(otherCanvas, otherContext);
|
|
|
|
},
|
|
|
|
fingerprint: function fingerprint(windowToUse){
|
|
|
|
"use strict";
|
|
|
|
if (!windowToUse){
|
|
|
|
windowToUse = window;
|
|
|
|
}
|
|
|
|
|
|
|
|
const canvas = document.createElement("canvas");
|
|
|
|
const context = canvasAPI.draw(canvas);
|
|
|
|
if (windowToUse !== window){
|
|
|
|
return canvasAPI.getFingerprintFromDifferentDocument(windowToUse.document);
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
return this.getFingerprintData(canvas, context);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|