security-and-privacy/CanvasBlocker
security-and-privacy/CanvasBlocker
1
0
Fork 0
mirror of https://github.com/kkapsner/CanvasBlocker synced 2024-12-22 21:00:23 +01:00
Code Releases Activity

Improved test page.

Browse Source
This commit is contained in:
kkapsner 2017-01-31 20:59:57 +01:00
parent 9c7e842f4b
commit c0c16b6546
2 changed files with 87 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
test/iFrame_test.html
View File

@ -1,45 +0,0 @@
<!DOCTYPE html>
<html>
<body>
iFrame Test. Thanks to DocumentRoot.
<img id="display" width="100%">
<iframe id="iframe" sandbox="allow-same-origin" style="display:none"></iframe>
<script>
(function(){
document.getElementById("display").src = after();
}());
function after(){
var fp_text = "BrowserLeaks,com <canvas> 10";
// create window canvas
var canvas = document.createElement('canvas');
canvas.setAttribute("width", 220);
canvas.setAttribute("height", 30);
// draw image in window canvas
var 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);
// create iframe canvas and ctx
var iframe_canvas = document.getElementById("iframe").contentDocument.createElement('canvas');
iframe_canvas.setAttribute("width", 220);
iframe_canvas.setAttribute("height", 30);
var iframe_ctx = iframe_canvas.getContext('2d');
// copy image from window canvas to iframe ctx
iframe_ctx.drawImage(canvas, 0, 0);
return iframe_canvas.toDataURL();
}
</script>
</body></html>

87
test/test.html Normal file
View File

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="top">
<h1>top Test</h1>
<img class="display" width="100%"><br>
Hash: <span class="hash"></span>
</div>
<div id="iframe">
<h1>iFrame Test. Thanks to DocumentRoot.</h1>
<img class="display" width="100%"><br>
Hash: <span class="hash"></span>
<iframe sandbox="allow-same-origin" style="display:none"></iframe>
</div>
<script>
(function(){
function show(container, url){
container.querySelector(".display").src = url;
var buffer = new TextEncoder("utf-8").encode(url);
crypto.subtle.digest("SHA-256", buffer).then(function(hash){
var chunks = [];
(new Uint32Array(hash)).forEach(function(num){
chunks.push(num.toString(16));
});
container.querySelector(".hash").textContent = chunks.map(function(chunk){
return "0".repeat(8 - chunk.length) + chunk;
}).join("");
});
}
show(document.getElementById("top"), topTest());
show(document.getElementById("iframe"), iframeTest());
}());
function draw(canvas){
canvas.setAttribute("width", 220);
canvas.setAttribute("height", 30);
var fp_text = "BrowserLeaks,com <canvas> 10";
var 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 topTest(){
// create window canvas
var canvas = document.createElement('canvas');
// draw image in window canvas
draw(canvas);
return canvas.toDataURL();
}
function iframeTest(){
// create window canvas
var canvas = document.createElement('canvas');
// draw image in window canvas
draw(canvas);
// create iframe canvas and ctx
var iframe_canvas = document.querySelector("#iframe iframe").contentDocument.createElement('canvas');
iframe_canvas.setAttribute("width", 220);
iframe_canvas.setAttribute("height", 30);
var iframe_ctx = iframe_canvas.getContext('2d');
// copy image from window canvas to iframe ctx
iframe_ctx.drawImage(canvas, 0, 0);
return iframe_canvas.toDataURL();
}
</script>
</body></html>