mirror of
https://github.com/kkapsner/CanvasBlocker
synced 2024-12-22 12:50:36 +01:00
Added testAPI and canvasAPI
This commit is contained in:
parent
4337ccbf33
commit
e50e9deca4
@ -32,7 +32,7 @@
|
|||||||
"consistent-return": "error",
|
"consistent-return": "error",
|
||||||
"constructor-super": "warn",
|
"constructor-super": "warn",
|
||||||
"eqeqeq": "error",
|
"eqeqeq": "error",
|
||||||
"eslint-comments/no-use": ["error", {"allow": ["eslint-disable-next-line"]}],
|
"eslint-comments/no-use": ["error", {"allow": ["eslint-disable-next-line", "globals"]}],
|
||||||
"indent": ["error", "tab", {"SwitchCase": 1}],
|
"indent": ["error", "tab", {"SwitchCase": 1}],
|
||||||
"max-depth": ["warn", 4],
|
"max-depth": ["warn", 4],
|
||||||
"max-len": ["warn", {"code": 120, "tabWidth": 4}],
|
"max-len": ["warn", {"code": 120, "tabWidth": 4}],
|
||||||
|
79
test/canvasAPI.js
Normal file
79
test/canvasAPI.js
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
const canvasAPI = {
|
||||||
|
draw: function draw(canvas){
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
canvas.setAttribute("width", 220);
|
||||||
|
canvas.setAttribute("height", 30);
|
||||||
|
|
||||||
|
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);
|
||||||
|
context.fillStyle = "rgba(102, 204, 0, 07)";
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
@ -1,48 +1,4 @@
|
|||||||
|
/* globals testAPI, canvasAPI*/
|
||||||
function draw(canvas){
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
canvas.setAttribute("width", 220);
|
|
||||||
canvas.setAttribute("height", 30);
|
|
||||||
|
|
||||||
const fp_text = "BrowserLeaks,com <canvas> 10";
|
|
||||||
|
|
||||||
const ctx = canvas.getContext("2d");
|
|
||||||
ctx.textBaseline = "top";
|
|
||||||
ctx.font = "14px 'Arial'";
|
|
||||||
ctx.textBaseline = "alphabetic";
|
|
||||||
ctx.fillStyle = "#f60";
|
|
||||||
ctx.fillRect(125, 1, 62, 20);
|
|
||||||
ctx.fillStyle = "#069";
|
|
||||||
ctx.fillText(fp_text, 2, 15);
|
|
||||||
ctx.fillStyle = "rgba(102, 204, 0, 07)";
|
|
||||||
ctx.fillText(fp_text, 4, 17);
|
|
||||||
|
|
||||||
return ctx;
|
|
||||||
}
|
|
||||||
function test(window){
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
// create window canvas
|
|
||||||
const canvas = document.createElement("canvas");
|
|
||||||
// draw image in window canvas
|
|
||||||
draw(canvas);
|
|
||||||
return window.HTMLCanvasElement.prototype.toDataURL.call(canvas);
|
|
||||||
}
|
|
||||||
async function hash(string){
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
const buffer = new TextEncoder("utf-8").encode(string);
|
|
||||||
const hash = await crypto.subtle.digest("SHA-256", buffer);
|
|
||||||
const chunks = [];
|
|
||||||
(new Uint32Array(hash)).forEach(function(num){
|
|
||||||
chunks.push(num.toString(16));
|
|
||||||
});
|
|
||||||
return chunks.map(function(chunk){
|
|
||||||
return "0".repeat(8 - chunk.length) + chunk;
|
|
||||||
}).join("");
|
|
||||||
}
|
|
||||||
|
|
||||||
const addLine = function(){
|
const addLine = function(){
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
@ -60,6 +16,6 @@ addLine("window name after set: " + window.name);
|
|||||||
(async function(){
|
(async function(){
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
const hashValue = await hash(test(window));
|
const hashValue = await testAPI.hash(canvasAPI.fingerprint(window).url);
|
||||||
addLine("canvas hash: " + hashValue);
|
addLine("canvas hash: " + hashValue);
|
||||||
}());
|
}());
|
@ -20,6 +20,8 @@ header("Content-Security-Policy: default-src 'none'; img-src 'self'; script-src
|
|||||||
</ul>
|
</ul>
|
||||||
<h2>Tests</h2>
|
<h2>Tests</h2>
|
||||||
<div id="results"></div>
|
<div id="results"></div>
|
||||||
|
<script src="testAPI.js"></script>
|
||||||
|
<script src="canvasAPI.js"></script>
|
||||||
<script src="cspTest.js"></script>
|
<script src="cspTest.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
@ -11,5 +11,6 @@
|
|||||||
Tests the performance of some operations that are affected by CanvasBlocker.
|
Tests the performance of some operations that are affected by CanvasBlocker.
|
||||||
<div id="log">
|
<div id="log">
|
||||||
</div>
|
</div>
|
||||||
|
<script src="canvasAPI.js"></script>
|
||||||
<script src="performanceTest.js"></script>
|
<script src="performanceTest.js"></script>
|
||||||
</body></html>
|
</body></html>
|
@ -1,4 +1,4 @@
|
|||||||
|
/* globals canvasAPI */
|
||||||
const createLog = function(){
|
const createLog = function(){
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
@ -85,28 +85,6 @@ const performTest = function(){
|
|||||||
};
|
};
|
||||||
}();
|
}();
|
||||||
|
|
||||||
function draw(canvas){
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
canvas.setAttribute("width", 220);
|
|
||||||
canvas.setAttribute("height", 30);
|
|
||||||
|
|
||||||
const fp_text = "BrowserLeaks,com <canvas> 10";
|
|
||||||
|
|
||||||
const ctx = canvas.getContext("2d");
|
|
||||||
ctx.textBaseline = "top";
|
|
||||||
ctx.font = "14px 'Arial'";
|
|
||||||
ctx.textBaseline = "alphabetic";
|
|
||||||
ctx.fillStyle = "#f60";
|
|
||||||
ctx.fillRect(125, 1, 62, 20);
|
|
||||||
ctx.fillStyle = "#069";
|
|
||||||
ctx.fillText(fp_text, 2, 15);
|
|
||||||
ctx.fillStyle = "rgba(102, 204, 0, 07)";
|
|
||||||
ctx.fillText(fp_text, 4, 17);
|
|
||||||
|
|
||||||
return ctx;
|
|
||||||
}
|
|
||||||
|
|
||||||
const fingerprintTest = function(){
|
const fingerprintTest = function(){
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
@ -116,7 +94,7 @@ const fingerprintTest = function(){
|
|||||||
// create window canvas
|
// create window canvas
|
||||||
canvas = document.createElement("canvas");
|
canvas = document.createElement("canvas");
|
||||||
// draw image in window canvas
|
// draw image in window canvas
|
||||||
draw(canvas);
|
canvasAPI.draw(canvas);
|
||||||
},
|
},
|
||||||
test: function fingerprintTest(){
|
test: function fingerprintTest(){
|
||||||
return canvas.toDataURL();
|
return canvas.toDataURL();
|
||||||
|
@ -5,45 +5,16 @@
|
|||||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||||
<link href="testIcon.svg" type="image/png" rel="icon">
|
<link href="testIcon.svg" type="image/png" rel="icon">
|
||||||
<link href="testIcon.svg" type="image/png" rel="shortcut icon">
|
<link href="testIcon.svg" type="image/png" rel="shortcut icon">
|
||||||
|
<?php
|
||||||
|
echo "<script>" . file_get_contents("testAPI.js");
|
||||||
|
echo file_get_contents("canvasAPI.js") . "</script>";
|
||||||
|
?>
|
||||||
<script>
|
<script>
|
||||||
const firstDescriptor = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, "getContext");
|
const firstDescriptor = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, "getContext");
|
||||||
console.log(new Date(), "starting first fingerprint", window.name);
|
console.log(new Date(), "starting first fingerprint", window.name);
|
||||||
function fingerPrint(){
|
|
||||||
"use strict";const canvas = document.createElement("canvas");
|
|
||||||
canvas.setAttribute("width", 220);
|
|
||||||
canvas.setAttribute("height", 30);
|
|
||||||
|
|
||||||
const fp_text = "BrowserLeaks,com <canvas> 10";
|
|
||||||
|
|
||||||
const ctx = canvas.getContext("2d");
|
|
||||||
ctx.textBaseline = "top";
|
|
||||||
ctx.font = "14px 'Arial'";
|
|
||||||
ctx.textBaseline = "alphabetic";
|
|
||||||
ctx.fillStyle = "#f60";
|
|
||||||
ctx.fillRect(125, 1, 62, 20);
|
|
||||||
ctx.fillStyle = "#069";
|
|
||||||
ctx.fillText(fp_text, 2, 15);
|
|
||||||
ctx.fillStyle = "rgba(102, 204, 0, 07)";
|
|
||||||
ctx.fillText(fp_text, 4, 17);
|
|
||||||
|
|
||||||
return canvas.toDataURL();
|
|
||||||
}
|
|
||||||
async function hash(url){
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
const buffer = new TextEncoder("utf-8").encode(url);
|
|
||||||
const hash = await crypto.subtle.digest("SHA-256", buffer);
|
|
||||||
const chunks = [];
|
|
||||||
(new Uint32Array(hash)).forEach(function(num){
|
|
||||||
chunks.push(num.toString(16));
|
|
||||||
});
|
|
||||||
return chunks.map(function(chunk){
|
|
||||||
return "0".repeat(8 - chunk.length) + chunk;
|
|
||||||
}).join("");
|
|
||||||
}
|
|
||||||
let firstFingerprint = false;
|
let firstFingerprint = false;
|
||||||
try {
|
try {
|
||||||
firstFingerprint = fingerPrint();
|
firstFingerprint = canvasAPI.fingerprint().url;
|
||||||
}
|
}
|
||||||
catch (error){
|
catch (error){
|
||||||
console.log(new Date(), error);
|
console.log(new Date(), error);
|
||||||
@ -94,14 +65,14 @@
|
|||||||
output.classList.add("nok");
|
output.classList.add("nok");
|
||||||
}
|
}
|
||||||
output.appendChild(document.createElement("br"));
|
output.appendChild(document.createElement("br"));
|
||||||
const secondFingerprint = fingerPrint();
|
const secondFingerprint = canvasAPI.fingerprint().url;
|
||||||
if (firstFingerprint === secondFingerprint){
|
if (firstFingerprint === secondFingerprint){
|
||||||
const firstHash = await hash(firstFingerprint);
|
const firstHash = await testAPI.hash(firstFingerprint);
|
||||||
output.appendChild(document.createTextNode("fingerprint consistent (" + firstHash + ") -> good!"));
|
output.appendChild(document.createTextNode("fingerprint consistent (" + firstHash + ") -> good!"));
|
||||||
output.classList.add("ok");
|
output.classList.add("ok");
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
const hashes = await Promise.all([hash(firstFingerprint), hash(secondFingerprint)]);
|
const hashes = await Promise.all([testAPI.hash(firstFingerprint), testAPI.hash(secondFingerprint)]);
|
||||||
output.appendChild(
|
output.appendChild(
|
||||||
document.createTextNode(
|
document.createTextNode(
|
||||||
"fingerprint not consistent (" +
|
"fingerprint not consistent (" +
|
||||||
|
@ -71,5 +71,7 @@
|
|||||||
Hash: <span class="hash"><i>click anywhere to populate</i></span> (isPointInPath: <span class="isPointInPath"></span>)
|
Hash: <span class="hash"><i>click anywhere to populate</i></span> (isPointInPath: <span class="isPointInPath"></span>)
|
||||||
<button>refresh</button>
|
<button>refresh</button>
|
||||||
</div>
|
</div>
|
||||||
|
<script src="testAPI.js"></script>
|
||||||
|
<script src="canvasAPI.js"></script>
|
||||||
<script src="test.js"></script>
|
<script src="test.js"></script>
|
||||||
</body></html>
|
</body></html>
|
179
test/test.js
179
test/test.js
@ -1,165 +1,72 @@
|
|||||||
|
/* globals testAPI, canvasAPI */
|
||||||
(function(){
|
(function(){
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
function hashToString(hash){
|
|
||||||
const chunks = [];
|
|
||||||
(new Uint32Array(hash)).forEach(function(num){
|
|
||||||
chunks.push(num.toString(16));
|
|
||||||
});
|
|
||||||
return chunks.map(function(chunk){
|
|
||||||
return "0".repeat(8 - chunk.length) + chunk;
|
|
||||||
}).join("");
|
|
||||||
}
|
|
||||||
|
|
||||||
async function show(container, {url, imageData, isPointInPath}){
|
async function show(container, {url, imageData, isPointInPath}){
|
||||||
const display = container.querySelector(".display");
|
const display = container.querySelector(".display");
|
||||||
display.src = url;
|
display.src = url;
|
||||||
display.title = url;
|
display.title = url;
|
||||||
const buffer = new TextEncoder("utf-8").encode(url);
|
|
||||||
const hashes = await Promise.all([
|
const hashes = await Promise.all([
|
||||||
crypto.subtle.digest("SHA-256", buffer),
|
testAPI.hash(url),
|
||||||
crypto.subtle.digest("SHA-256", imageData.data)
|
testAPI.hash(imageData.data)
|
||||||
]);
|
]);
|
||||||
container.querySelector(".hash").textContent =
|
container.querySelector(".hash").textContent =
|
||||||
hashToString(hashes[0]) + " / " +
|
hashes[0] + " / " +
|
||||||
hashToString(hashes[1]);
|
hashes[1];
|
||||||
container.querySelector(".isPointInPath").textContent = isPointInPath;
|
container.querySelector(".isPointInPath").textContent = isPointInPath;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (location.search !== "?notInitial"){
|
function iframeTest(testNode){
|
||||||
try {show(document.getElementById("top"), topTest());}
|
const iframe = testNode.querySelector("iframe");
|
||||||
catch (error){console.error(error);}
|
return canvasAPI.fingerprint(iframe.contentWindow);
|
||||||
try {show(document.getElementById("iframe"), iframeTest(document.querySelector("#iframe iframe")));}
|
}
|
||||||
catch (error){console.error(error);}
|
|
||||||
try {show(document.getElementById("iframe2"), iframeTest(document.querySelector("#iframe2 iframe")));}
|
const tests = {
|
||||||
catch (error){console.error(error);}
|
top: function(){return canvasAPI.fingerprint();},
|
||||||
try {show(document.getElementById("iframe3"), iframeTest(document.querySelector("#iframe3 iframe")));}
|
iframe: iframeTest,
|
||||||
catch (error){console.error(error);}
|
iframe2: iframeTest,
|
||||||
try {show(document.getElementById("iframe4"), dynamicIframeTest1());}
|
iframe3: iframeTest,
|
||||||
catch (error){console.error(error);}
|
iframe4: dynamicIframeTest1,
|
||||||
try {show(document.getElementById("iframe5"), dynamicIframeTest2());}
|
iframe5: dynamicIframeTest2,
|
||||||
catch (error){console.error(error);}
|
iframe6: dynamicIframeTest3,
|
||||||
try {show(document.getElementById("iframe6"), dynamicIframeTest3());}
|
windowOpen: async function(testNode, initial){
|
||||||
catch (error){console.error(error);}
|
if (initial){
|
||||||
|
return new Promise(function(resolve){
|
||||||
window.addEventListener("click", function windowOpenTest(){
|
window.addEventListener("click", function windowOpenTest(){
|
||||||
window.removeEventListener("click", windowOpenTest);
|
window.removeEventListener("click", windowOpenTest);
|
||||||
const newWindow = window.open("/");
|
const newWindow = window.open("/");
|
||||||
try{
|
try{
|
||||||
show(document.getElementById("windowOpen"), copyToDifferentDocumentTest(newWindow.document));
|
resolve(canvasAPI.fingerprint(newWindow));
|
||||||
}
|
}
|
||||||
catch (error){
|
catch (error){
|
||||||
console.error(error);
|
console.error(error);
|
||||||
}
|
}
|
||||||
newWindow.close();
|
newWindow.close();
|
||||||
});
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
document.querySelector("#top button").addEventListener("click", function(){
|
else {
|
||||||
show(document.getElementById("top"), topTest());
|
|
||||||
});
|
|
||||||
document.querySelector("#iframe button").addEventListener("click", function(){
|
|
||||||
show(document.getElementById("iframe"), iframeTest(document.querySelector("#iframe iframe")));
|
|
||||||
});
|
|
||||||
document.querySelector("#iframe2 button").addEventListener("click", function(){
|
|
||||||
show(document.getElementById("iframe2"), iframeTest(document.querySelector("#iframe2 iframe")));
|
|
||||||
});
|
|
||||||
document.querySelector("#iframe3 button").addEventListener("click", function(){
|
|
||||||
show(document.getElementById("iframe3"), iframeTest(document.querySelector("#iframe3 iframe")));
|
|
||||||
});
|
|
||||||
document.querySelector("#iframe4 button").addEventListener("click", function(){
|
|
||||||
show(document.getElementById("iframe4"), dynamicIframeTest1());
|
|
||||||
});
|
|
||||||
document.querySelector("#iframe5 button").addEventListener("click", function(){
|
|
||||||
show(document.getElementById("iframe5"), dynamicIframeTest2());
|
|
||||||
});
|
|
||||||
document.querySelector("#iframe6 button").addEventListener("click", function(){
|
|
||||||
show(document.getElementById("iframe6"), dynamicIframeTest3());
|
|
||||||
});
|
|
||||||
document.querySelector("#windowOpen button").addEventListener("click", function(){
|
|
||||||
const newWindow = window.open("/");
|
const newWindow = window.open("/");
|
||||||
show(document.getElementById("windowOpen"), copyToDifferentDocumentTest(newWindow.document));
|
const fingerprint = canvasAPI.fingerprint(newWindow);
|
||||||
newWindow.close();
|
newWindow.close();
|
||||||
|
return fingerprint;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Object.keys(tests).forEach(async function(testName){
|
||||||
|
const testNode = document.getElementById(testName);
|
||||||
|
const callback = tests[testName];
|
||||||
|
if (location.search !== "?notInitial"){
|
||||||
|
try {show(testNode, await callback(testNode, true));}
|
||||||
|
catch (error){console.error(testName, error);}
|
||||||
|
}
|
||||||
|
testNode.querySelector("button").addEventListener("click", async function(){
|
||||||
|
show(testNode, await callback(testNode));
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}());
|
}());
|
||||||
|
|
||||||
function draw(canvas){
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
canvas.setAttribute("width", 220);
|
|
||||||
canvas.setAttribute("height", 30);
|
|
||||||
|
|
||||||
const fp_text = "BrowserLeaks,com <canvas> 10";
|
|
||||||
|
|
||||||
const ctx = canvas.getContext("2d");
|
|
||||||
ctx.textBaseline = "top";
|
|
||||||
ctx.font = "14px 'Arial'";
|
|
||||||
ctx.textBaseline = "alphabetic";
|
|
||||||
ctx.fillStyle = "#f60";
|
|
||||||
ctx.fillRect(125, 1, 62, 20);
|
|
||||||
ctx.fillStyle = "#069";
|
|
||||||
ctx.fillText(fp_text, 2, 15);
|
|
||||||
ctx.fillStyle = "rgba(102, 204, 0, 07)";
|
|
||||||
ctx.fillText(fp_text, 4, 17);
|
|
||||||
|
|
||||||
return ctx;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getIsPointInPath(ctx){
|
|
||||||
"use strict";
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(20, 19);
|
|
||||||
ctx.lineTo(40, 19);
|
|
||||||
ctx.lineTo(30, 30);
|
|
||||||
ctx.closePath();
|
|
||||||
ctx.stroke();
|
|
||||||
|
|
||||||
return ctx.isPointInPath(30, 19);
|
|
||||||
}
|
|
||||||
|
|
||||||
function topTest(){
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
// create window canvas
|
|
||||||
const canvas = document.createElement("canvas");
|
|
||||||
// draw image in window canvas
|
|
||||||
const ctx = draw(canvas);
|
|
||||||
return {
|
|
||||||
imageData: ctx.getImageData(0, 0, canvas.width, canvas.height),
|
|
||||||
url: canvas.toDataURL(),
|
|
||||||
isPointInPath: getIsPointInPath(ctx)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function copyToDifferentDocumentTest(otherDocument){
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
// create window canvas
|
|
||||||
const canvas = document.createElement("canvas");
|
|
||||||
|
|
||||||
// draw image in window canvas
|
|
||||||
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 {
|
|
||||||
imageData: otherContext.getImageData(0, 0, otherCanvas.width, otherCanvas.height),
|
|
||||||
url: otherCanvas.toDataURL(),
|
|
||||||
isPointInPath: getIsPointInPath(otherContext)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function iframeTest(iframe){
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
return copyToDifferentDocumentTest(iframe.contentDocument);
|
|
||||||
}
|
|
||||||
|
|
||||||
function dynamicIframeTest1(){
|
function dynamicIframeTest1(){
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
@ -168,7 +75,7 @@ function dynamicIframeTest1(){
|
|||||||
document.body.appendChild(iframe);
|
document.body.appendChild(iframe);
|
||||||
const iframeWindow = frames[length];
|
const iframeWindow = frames[length];
|
||||||
document.body.removeChild(iframe);
|
document.body.removeChild(iframe);
|
||||||
return copyToDifferentDocumentTest(iframeWindow.document);
|
return canvasAPI.fingerprint(iframeWindow);
|
||||||
}
|
}
|
||||||
|
|
||||||
function dynamicIframeTest2(){
|
function dynamicIframeTest2(){
|
||||||
@ -179,7 +86,7 @@ function dynamicIframeTest2(){
|
|||||||
document.body.appendChild(iframe);
|
document.body.appendChild(iframe);
|
||||||
const iframeWindow = window[length];
|
const iframeWindow = window[length];
|
||||||
document.body.removeChild(iframe);
|
document.body.removeChild(iframe);
|
||||||
return copyToDifferentDocumentTest(iframeWindow.document);
|
return canvasAPI.fingerprint(iframeWindow);
|
||||||
}
|
}
|
||||||
|
|
||||||
function dynamicIframeTest3(){
|
function dynamicIframeTest3(){
|
||||||
@ -191,5 +98,5 @@ function dynamicIframeTest3(){
|
|||||||
div.innerHTML = "<iframe></iframe>";
|
div.innerHTML = "<iframe></iframe>";
|
||||||
const iframeWindow = window[length];
|
const iframeWindow = window[length];
|
||||||
document.body.removeChild(div);
|
document.body.removeChild(div);
|
||||||
return copyToDifferentDocumentTest(iframeWindow.document);
|
return canvasAPI.fingerprint(iframeWindow);
|
||||||
}
|
}
|
25
test/testAPI.js
Normal file
25
test/testAPI.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
const testAPI = function(){
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
function bufferToString(hash){
|
||||||
|
const chunks = [];
|
||||||
|
(new Uint32Array(hash)).forEach(function(num){
|
||||||
|
chunks.push(num.toString(16));
|
||||||
|
});
|
||||||
|
return chunks.map(function(chunk){
|
||||||
|
return "0".repeat(8 - chunk.length) + chunk;
|
||||||
|
}).join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return {
|
||||||
|
hash: async function(input){
|
||||||
|
const buffer = ((typeof input) === "string")?
|
||||||
|
new TextEncoder("utf-8").encode(input):
|
||||||
|
input;
|
||||||
|
const hash = await crypto.subtle.digest("SHA-256", buffer);
|
||||||
|
return bufferToString(hash);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
Loading…
x
Reference in New Issue
Block a user