security-and-privacy/CanvasBlocker
security-and-privacy/CanvasBlocker
1
0
Fork 0
mirror of https://github.com/kkapsner/CanvasBlocker synced 2025-07-03 12:06:31 +02:00
Code Releases Activity

Added TextMetrics protection

Browse source 
Fixes #448
This commit is contained in:
kkapsner 2020-03-14 12:54:23 +01:00
parent 692b4616e2
commit ec128796e3
18 changed files with 328 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

1
test/index.html
View file

@ -16,6 +16,7 @@
<li><a href="dataUrlTest.php">Data-URL test</a></li>
<li><a href="audioTest.html">Audio Fingerprint test</a></li>
<li><a href="domRectTest.html">DOMRect Fingerprint test</a></li>
<li><a href="textMetricsTest.html">TextMetrics test</a></li>
<li><a href="detectionTest.html">Detection test</a></li>
<li><a href="performanceTest.html">Performance test</a></li>
<li><a href="webGL-Test.html">Support for webGL</a></li>

6
test/testAPI.js
View file

@ -1,6 +1,10 @@
const testAPI = function(){
"use strict";
const digest = crypto.subtle? crypto.subtle.digest.bind(crypto.subtle, "SHA-256"): function(buffer){
return new Uint32Array(buffer.buffer);
};
function bufferToString(hash){
const chunks = [];
(new Uint32Array(hash)).forEach(function(num){
@ -18,7 +22,7 @@ const testAPI = function(){
const buffer = ((typeof input) === "string")?
new TextEncoder("utf-8").encode(input):
input;
const hash = await crypto.subtle.digest("SHA-256", buffer);
const hash = await digest(buffer);
return bufferToString(hash);
}
};

40
test/textMetricsTest.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<title>TextMetrics test</title>
<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">
<style>
.hash {
font-family: monospace;
}
</style>
</head>
<body>
<h1>TextMetrics test</h1>
<h2>Expected result</h2>
<ul>
<li>the hashes are different to the hashes when CanvasBlocker is disabled</li>
<li>the number of differences stays the same when CanvasBlocker is disabled</li>
<li>if "refresh" is clicked nothing must change</li>
<li>upon page reload the hashes change (depending on CanvasBlocker settings - e.g. not in the stealth preset)</li>
</ul>
<h2>Tests</h2>
<div id="tests">
<div class="test" id="measureText">
<h3 class="title">measureText</h3>
Hashes: <span class="hashes"><table>
<tr>
<td>all:</td>
<td class="hash all"></td>
</tr>
</table></span><br>
Number of differences: <span class="differences"></span><br>
<button class="refresh">refresh</button>
</div>
</div>
<script src="testAPI.js"></script>
<script src="textMetricsTest.js"></script>
</body>
</html>

94
test/textMetricsTest.js Normal file
View file

@ -0,0 +1,94 @@
/* globals testAPI */
(function(){
"use strict";
const fonts = ["none", "sans-serif", "serif", "monospace", "cursive", "fantasy"];
const charCodePoints = [
0x20B9, 0x2581, 0x20BA, 0xA73D, 0xFFFD, 0x20B8, 0x05C6,
0x1E9E, 0x097F, 0xF003, 0x1CDA, 0x17DD, 0x23AE, 0x0D02, 0x0B82, 0x115A,
0x2425, 0x302E, 0xA830, 0x2B06, 0x21E4, 0x20BD, 0x2C7B, 0x20B0, 0xFBEE,
0xF810, 0xFFFF, 0x007F, 0x10A0, 0x1D790, 0x0700, 0x1950, 0x3095, 0x532D,
0x061C, 0x20E3, 0xFFF9, 0x0218, 0x058F, 0x08E4, 0x09B3, 0x1C50, 0x2619
];
const textMetricsProperties = [
"width",
"actualBoundingBoxAscent",
"actualBoundingBoxDescent",
"actualBoundingBoxLeft",
"actualBoundingBoxRight",
"alphabeticBaseline",
"emHeightAscent",
"emHeightDescent",
"fontBoundingBoxAscent",
"fontBoundingBoxDescent",
"hangingBaseline",
"ideographicBaseline",
].filter(function(property){
return TextMetrics.prototype.hasOwnProperty(property);
});
const hashTable = document.querySelector("#measureText .hashes table");
textMetricsProperties.forEach(function(property){
const row = document.createElement("tr");
hashTable.appendChild(row);
const name = document.createElement("td");
name.textContent = property + ": ";
row.appendChild(name);
const hash = document.createElement("td");
hash.className = "hash " + property;
row.appendChild(hash);
});
async function testMeasureText(){
const canvas = document.createElement("canvas");
const node = document.createElement("span");
document.body.appendChild(node);
const context = canvas.getContext("2d");
const data = new Float64Array(fonts.length * charCodePoints.length * textMetricsProperties.length);
let dataIndex = 0;
const propertyData = {};
textMetricsProperties.forEach(function(property){
propertyData[property] = new Float64Array(fonts.length * charCodePoints.length);
});
let propertyDataIndex = 0;
let differences = 0;
fonts.forEach(function(font){
context.font = node.style.font = "22000px " + font;
charCodePoints.forEach(function(charCodePoint){
const char = String.fromCodePoint(charCodePoint);
node.textContent = char;
const textMetric = context.measureText(char);
const domRect = node.getBoundingClientRect();
textMetricsProperties.forEach(function(property){
data[dataIndex] = textMetric[property];
propertyData[property][propertyDataIndex] = textMetric[property];
dataIndex += 1;
});
propertyDataIndex += 1;
if (textMetric.width !== domRect.width){
differences += 1;
}
});
});
document.body.removeChild(node);
document.querySelector("#measureText .differences").textContent =
differences + " of " + fonts.length * charCodePoints.length;
textMetricsProperties.forEach(async function(property){
document.querySelector("#measureText .hash." + property).textContent =
await testAPI.hash(propertyData[property]);
});
document.querySelector("#measureText .hash.all").textContent = await testAPI.hash(data);
}
testMeasureText();
document.querySelector("#measureText .refresh").addEventListener("click", testMeasureText);
}());