security-and-privacy/CanvasBlocker
security-and-privacy
/
CanvasBlocker
mirror of https://github.com/kkapsner/CanvasBlocker
1
0
Fork 0
Code Releases Activity

Improved DOMRect test page.

This commit is contained in:
kkapsner 2019-03-16 00:52:28 +01:00
parent 137c1688ba
commit 786295d920
3 changed files with 77 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
test/domRectIFrame.html
View File

@ -26,19 +26,43 @@
transform-origin: 0.1111px 0.2222px 0.3333px;
}
#select {
transform: rotate(1.23deg);
}
#progress {
transform: scale(3.14);
position: absolute;
top: 300px;
left: 200px;
}
#button {
padding: 4.937px;
margin: 9.876px;
}
.testRect {
outline: 2px dotted lightblue;
}
</style>
</head>
<body>
<div id="inside">
<h1 id="rect0">https://browserleaks.com<i>/rects</i></h4>
<span id="rect1"><strong>Element.getClientRects (̿▀̿&thinsp;̿Ĺ̯̿̿▀̿ ̿)̄ </strong></span><br />
<h1 data-name="rect 0" class="testRect">https://browserleaks.com<i>/rects</i></h1>
<span data-name="rect 1" class="testRect"><strong>Element.getClientRects (̿▀̿&thinsp;̿Ĺ̯̿̿▀̿ ̿)̄ </strong></span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span id="rect2">F i n g e r p r i n t i n g ?</span>
<span data-name="rect 2" class="testRect">F i n g e r p r i n t i n g ?</span>
</div>
<select id="select" data-name="select" class="testRect">
<option>&minus;&#1726;-</option>
</select>
<progress id="progress" data-name="progress bar" class="testRect">test</progress>
<button id="button" data-name="empty button" class="testRect"></button>
</body>
</html>

13
test/domRectTest.html
View File

@ -27,6 +27,19 @@
border: 1px solid #c7c7c7;
padding: 0.4em;
}
.test .data td.value {
text-align: right;
}
.small {
font-size: 0.8em;
color: gray;
}
.rectHash {
font-size: 4px;
}
.rectHash:hover {
font-size: 100%;
}
</style>
</head>
<body>

46
test/domRectTest.js
View File

@ -18,17 +18,22 @@
function getElements(){
const doc = iframe.contentDocument;
return Array.from(doc.querySelectorAll("*[id^=rect]"));
return Array.from(doc.querySelectorAll(".testRect"));
}
function createTest(title, callback){
const properties = ["x", "y", "width", "height", "top", "left", "right", "bottom"];
function performTest(){
const rects = getElements().map(callback);
const rects = getElements().map(function(element){
return {
name: element.dataset.name,
data: callback(element)
};
});
const data = new Float64Array(rects.length * properties.length);
rects.forEach(function(rect, i){
properties.forEach(function(property, j){
data[i * properties.length + j] = rect[property];
data[i * properties.length + j] = rect.data[property];
});
});
@ -37,18 +42,41 @@
output.querySelector(".hash").textContent = byteArrayToHex(hash);
});
output.querySelector(".data").innerHTML = "<table><tr><th></th>" +
rects.map(function(rect, i){
return "<th>rect " + (i + 1) + "</th>";
function formatNumber(number){
const str = number.toString();
return "<span class=small>" + str.substring(0, str.length - 2) + "</span>" +
str.substring(str.length - 2);
}
var dataNode = output.querySelector(".data");
dataNode.innerHTML = "<table><tr><th></th>" +
rects.map(function(rect){
return "<th>" + rect.name + "</th>";
}).join("") +
"</tr><tr><th>hash</th>" +
rects.map(function(rect){
return "<td class=\"rectHash\" data-name=\"" + rect.name + "\"></td>";
}).join("") +
"</tr>" +
properties.map(function(property){
return "<tr><th>" + property + "</th>" + rects.map(function(rect, i){
return "<td>" + rect[property] + "</td>";
return "<tr><th>" + property + "</th>" + rects.map(function(rect){
return "<td class=\"value\" title=\"" + rect.data[property] + "\">" +
formatNumber(rect.data[property]) +
"</td>";
}).join("") + "</tr>";
}).join("") +
"</table>";
rects.forEach(function(rect){
const data = new Float64Array(properties.length);
properties.forEach(function(property, i){
data[i] = rect.data[property];
});
crypto.subtle.digest("SHA-256", data).then(function(hash){
dataNode.querySelector(
".rectHash[data-name=\"" + rect.name + "\"]"
).textContent = byteArrayToHex(hash);
});
});
}
const output = template.cloneNode(true);
output.querySelector(".title").textContent = title;