security-and-privacy/CanvasBlocker
security-and-privacy/CanvasBlocker
1
0
Fork 0
mirror of https://github.com/kkapsner/CanvasBlocker synced 2025-05-25 09:13:27 +02:00
Code Releases Activity

Improved DOMRect test page.

Browse Source
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; 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> </style>
</head> </head>
<body> <body>
<div id="inside"> <div id="inside">
<h1 id="rect0">https://browserleaks.com<i>/rects</i></h4> <h1 data-name="rect 0" class="testRect">https://browserleaks.com<i>/rects</i></h1>
<span id="rect1"><strong>Element.getClientRects (̿▀̿&thinsp;̿Ĺ̯̿̿▀̿ ̿)̄ </strong></span><br /> <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;
&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> </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> </body>
</html> </html>

13
test/domRectTest.html
View File

@ -27,6 +27,19 @@
border: 1px solid #c7c7c7; border: 1px solid #c7c7c7;
padding: 0.4em; 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> </style>
</head> </head>
<body> <body>

46
test/domRectTest.js
View File

@ -18,17 +18,22 @@
function getElements(){ function getElements(){
const doc = iframe.contentDocument; const doc = iframe.contentDocument;
return Array.from(doc.querySelectorAll("*[id^=rect]")); return Array.from(doc.querySelectorAll(".testRect"));
} }
function createTest(title, callback){ function createTest(title, callback){
const properties = ["x", "y", "width", "height", "top", "left", "right", "bottom"]; const properties = ["x", "y", "width", "height", "top", "left", "right", "bottom"];
function performTest(){ 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); const data = new Float64Array(rects.length * properties.length);
rects.forEach(function(rect, i){ rects.forEach(function(rect, i){
properties.forEach(function(property, j){ 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(".hash").textContent = byteArrayToHex(hash);
}); });
output.querySelector(".data").innerHTML = "<table><tr><th></th>" + function formatNumber(number){
rects.map(function(rect, i){ const str = number.toString();
return "<th>rect " + (i + 1) + "</th>"; 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("") + }).join("") +
"</tr>" + "</tr>" +
properties.map(function(property){ properties.map(function(property){
return "<tr><th>" + property + "</th>" + rects.map(function(rect, i){ return "<tr><th>" + property + "</th>" + rects.map(function(rect){
return "<td>" + rect[property] + "</td>"; return "<td class=\"value\" title=\"" + rect.data[property] + "\">" +
formatNumber(rect.data[property]) +
"</td>";
}).join("") + "</tr>"; }).join("") + "</tr>";
}).join("") + }).join("") +
"</table>"; "</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); const output = template.cloneNode(true);
output.querySelector(".title").textContent = title; output.querySelector(".title").textContent = title;