2017-01-31 20:59:57 +01:00
|
|
|
<!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>
|
2017-04-23 00:25:33 +02:00
|
|
|
<button>refresh</button>
|
2017-01-31 20:59:57 +01:00
|
|
|
</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>
|
2017-04-23 00:25:33 +02:00
|
|
|
<button>refresh</button>
|
2017-01-31 20:59:57 +01:00
|
|
|
</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());
|
2017-04-23 00:25:33 +02:00
|
|
|
document.querySelector("#top button").addEventListener("click", function(){show(document.getElementById("top"), topTest());});
|
2017-01-31 20:59:57 +01:00
|
|
|
show(document.getElementById("iframe"), iframeTest());
|
2017-04-23 00:25:33 +02:00
|
|
|
document.querySelector("#iframe button").addEventListener("click", function(){show(document.getElementById("iframe"), iframeTest());});
|
2017-01-31 20:59:57 +01:00
|
|
|
}());
|
|
|
|
|
|
|
|
|
|
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>
|
