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

DOMRect test: added test without iframe

This commit is contained in:
kkapsner 2020-05-18 13:22:33 +02:00
parent 4fa91ef3ae
commit 9a7dd3c189
5 changed files with 114 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
test/domRectElements.part.html Normal file
View File

@ -0,0 +1,16 @@
<div id="content">
<div id="inside">
<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 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>
</div>

13
test/domRectIFrame.php Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<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="shortcut icon">
<link href="domRectTest.css" type="text/css" rel="stylesheet">
</head>
<body id="iframeBody">
<?php include("domRectElements.part.html");?>
</body>
</html>

85
test/domRectIFrame.html → test/domRectTest.css
View File

@ -1,11 +1,57 @@
<!DOCTYPE html>
<html> #iframe {
<head> position: fixed;
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> top: -2000%;
<link href="testIcon.svg" type="image/png" rel="icon"> }
<link href="testIcon.svg" type="image/png" rel="shortcut icon"> #noIframe {
<style> position: fixed;
#inside{ top: 0;
left: 0;
opacity: 0;
z-index: -1;
}
#noIframe, #iframeBody {
margin: 0px;
padding: 8px;
}
.template {
display: none;
}
.test {
display: inline-block;
margin: 1em;
}
.test .data table {
border-collapse: collapse;
}
.test .data th {
padding: 0.4em;
}
.test .data td{
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%;
}
/*measured elements*/
#content {
/* position: relative; */
}
#inside {
white-space: nowrap; white-space: nowrap;
color:#5B5B5B; color:#5B5B5B;
@ -44,25 +90,4 @@
.testRect { .testRect {
outline: 2px dotted lightblue; outline: 2px dotted lightblue;
} }
</style>
</head>
<body>
<div id="inside">
<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 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>

51
test/domRectTest.js
View File

@ -12,11 +12,12 @@
const container = document.getElementById("tests"); const container = document.getElementById("tests");
const iframe = document.getElementById("iframe"); const iframe = document.getElementById("iframe");
const noIframe = document.getElementById("noIframe");
const template = document.querySelector(".test"); const template = document.querySelector(".test");
template.parentElement.removeChild(template); template.parentElement.removeChild(template);
function getElements(){ function getElements(useIframe = true){
const doc = iframe.contentDocument; const doc = useIframe? iframe.contentDocument: noIframe;
return Array.from(doc.querySelectorAll(".testRect")); return Array.from(doc.querySelectorAll(".testRect"));
} }
@ -28,8 +29,8 @@
} }
const properties = ["x", "y", "width", "height", "top", "left", "right", "bottom"]; const properties = ["x", "y", "width", "height", "top", "left", "right", "bottom"];
async function performTest(output, callback){ async function performTest(output, callback, useIframe = true){
const rects = getElements().map(function(element){ const rects = getElements(useIframe).map(function(element){
return { return {
name: element.dataset.name, name: element.dataset.name,
data: callback(element) data: callback(element)
@ -76,11 +77,11 @@
}); });
} }
function createTest(title, callback){ function createTest(title, callback, useIframe){
const output = template.cloneNode(true); const output = template.cloneNode(true);
output.querySelector(".title").textContent = title; output.querySelector(".title").textContent = title + (useIframe? " (iframe)": "");
output.querySelector(".refresh").addEventListener("click", function(){ output.querySelector(".refresh").addEventListener("click", function(){
performTest(output, callback); performTest(output, callback, useIframe);
}); });
output.querySelector(".performance").addEventListener("click", function(){ output.querySelector(".performance").addEventListener("click", function(){
let count = 200; let count = 200;
@ -92,7 +93,7 @@
while (duration < 1000){ while (duration < 1000){
const start = Date.now(); const start = Date.now();
for (; i < count; i += 1){ for (; i < count; i += 1){
const rects = getElements().map(function(element){ const rects = getElements(useIframe).map(function(element){
return { return {
name: element.dataset.name, name: element.dataset.name,
data: callback(element) data: callback(element)
@ -123,24 +124,26 @@
}()); }());
container.appendChild(output); container.appendChild(output);
performTest(output, callback); performTest(output, callback, useIframe);
} }
iframe.addEventListener("load", function(){ iframe.addEventListener("load", function(){
createTest("Element.getClientRects", function(element){ [true, false].forEach(function(useIframe){
return element.getClientRects()[0]; createTest("Element.getClientRects", function(element){
}); return element.getClientRects()[0];
createTest("Element.getBoundingClientRect", function(element){ }, useIframe);
return element.getBoundingClientRect(); createTest("Element.getBoundingClientRect", function(element){
}); return element.getBoundingClientRect();
createTest("Range.getClientRects", function(element){ }, useIframe);
const range = document.createRange(); createTest("Range.getClientRects", function(element){
range.selectNode(element); const range = document.createRange();
return range.getClientRects()[0]; range.selectNode(element);
}); return range.getClientRects()[0];
createTest("Range.getBoundingClientRect", function(element){ }, useIframe);
const range = document.createRange(); createTest("Range.getBoundingClientRect", function(element){
range.selectNode(element); const range = document.createRange();
return range.getBoundingClientRect(); range.selectNode(element);
return range.getBoundingClientRect();
}, useIframe);
}); });
}); });
}()); }());

40
test/domRectTest.html → test/domRectTest.php
View File

@ -5,42 +5,7 @@
<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">
<style> <link href="domRectTest.css" type="text/css" rel="stylesheet">
#iframe {
position: absolute;
top: -2000%;
}
.template {
display: none;
}
.test {
display: inline-block;
margin: 1em;
}
.test .data table {
border-collapse: collapse;
}
.test .data th {
padding: 0.4em;
}
.test .data td{
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> </head>
<body> <body>
<h1>DOMRect test</h1> <h1>DOMRect test</h1>
@ -51,7 +16,8 @@
<li>upon page reload the hashes change (depending on CanvasBlocker settings - e.g. not in the stealth preset)</li> <li>upon page reload the hashes change (depending on CanvasBlocker settings - e.g. not in the stealth preset)</li>
</ul> </ul>
<h2>Tests</h2> <h2>Tests</h2>
<iframe id="iframe" src="domRectIFrame.html"></iframe> <iframe id="iframe" src="domRectIFrame.php"></iframe>
<div id="noIframe"><?php include("domRectElements.part.html");?></div>
<div id="tests"> <div id="tests">
<div class="test"> <div class="test">
<h3 class="title"></h3> <h3 class="title"></h3>