security-and-privacy/CanvasBlocker
security-and-privacy/CanvasBlocker
1
0
Fork 0
mirror of https://github.com/kkapsner/CanvasBlocker synced 2025-07-04 20:46:39 +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

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);
}());