More information about Privacy Considerations.

#47
w3c · Jan 20, 2022 · f8a301f · f8a301f
1 parent 4e2c268
commit f8a301f
Show file tree

Hide file tree

Showing 5 changed files with 151 additions and 5 deletions.
diff --git a/examples/example-font-information-leakage-1.html b/examples/example-font-information-leakage-1.html
@@ -0,0 +1,21 @@
+<style>
+  @font-face {
+    font-family: MyWebFontWithVeryWideGlyphs;
+    src: url("/fonts/my-web-fonts-with-very-wide-glyphs.woff");
+  }
+  #container {
+    font-family: AWellKnownSystemFont, MyWebFontWithVeryWideGlyphs;
+  }
+</style>
+<div id="container">SOMETEXT</div>
+<div id="reference">SOMETEXT</div>
+<script>
+document.fonts.ready.then(() => {
+  let containerWidth =
+    document.getElementById("container").getBoundingClientRect().width;
+  let referenceWidth =
+    document.getElementById("reference").getBoundingClientRect().width;
+  let isWellKnownSystemFontAvailable =
+    Math.abs(containerWidth - referenceWidth) < 1;
+});
+</script>
diff --git a/examples/example-font-information-leakage-2.html b/examples/example-font-information-leakage-2.html
@@ -0,0 +1,24 @@
+<style>
+  @font-face {
+    font-family: MyWebFontWithVeryWideAsianGlyphs;
+    src: url("/fonts/my-web-fonts-with-very-wide-asian-glyphs.woff");
+  }
+  #container {
+    font-family: ui-serif, MyWebFontWithVeryWideAsianGlyphs
+  }
+  #reference {
+    font-family: MyWebFontWithVeryWideAsianGlyphs;
+  }
+</style>
+<div id="container">王</div>
+<div id="reference">王</div>
+<script>
+document.fonts.ready.then(() => {
+  let containerWidth =
+    document.getElementById("container").getBoundingClientRect().width;
+  let referenceWidth =
+    document.getElementById("reference").getBoundingClientRect().width;
+  let uiSerifFontDoesNotContainAsianGlyph =
+    Math.abs(containerWidth - referenceWidth) < 1;
+});
+</script>
diff --git a/examples/example-font-information-leakage-3.html b/examples/example-font-information-leakage-3.html
@@ -0,0 +1,17 @@
+<style>
+  #test {
+    font-size: 100px;
+  }
+  #container {
+    text-decoration-line: underline;
+    text-decoration-thickness: from-font;
+  }
+  #reference {
+    text-decoration-line: underline;
+    text-decoration-thickness: 1em;
+  }
+</style>
+<div id="test">
+  <div id="container">SOMETEXT</div>
+  <div id="reference">SOMETEXT</div>
+</div>
diff --git a/examples/example-math-in-canvas.html b/examples/example-math-in-canvas.html
@@ -0,0 +1,25 @@
+let svg = `
+  <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
+    <foreignObject width="100" height="100"
+                   requiredExtensions="http://www.w3.org/1998/Math/MathML">
+      <math xmlns="http://www.w3.org/1998/Math/MathML">
+        <msqrt style="font-size: 25px">
+          <mtext>&#x25a0;</mtext>
+          <mtext><a href="https://example.org/">&#x25a0;</a></mtext>
+        </msqrt>
+      </math>
+    </foreignObject>
+  </svg>`;
+let image = new Image();
+image.width = 100;
+image.height = 100;
+image.onload = () => {
+  let canvas = document.createElement('canvas');
+  canvas.width = 100;
+  canvas.height = 100;
+  canvas.style = "border: 1px solid black";
+  document.body.appendChild(canvas);
+  let context = canvas.getContext("2d");
+  context.drawImage(image, 0, 0);
+};
+image.src = `data:image/svg+xml;base64,${window.btoa(svg)}`;
diff --git a/index.html b/index.html
@@ -5994,16 +5994,75 @@ <h2>Privacy Considerations</h2>
         <a data-cite="WEBIDL#idl-DOMException"><code>DOMException</code></a>
         when one tries to access the canvas' content via JavaScript APIs.
       </p>
+      <div class="example" id="canvas-example">
+        <p>
+          In the following example, the canvas image is set to the image of
+          some MathML content with a HTML link to <code>https://example.org/</code>.
+          It should not be possible for an attacker to determine whether that
+          link was visited by reading pixels via <a data-cite="HTML#dom-context-2d-getimagedata">context.getImageData</a>.
+          For more about links in MathML, see
+          <a href="#security-considerations"></a>.
+        </p>
+        <pre data-include="examples/example-math-in-canvas.html"
+             data-include-format="text"></pre>
+      </div>
       <p>
         This specification describes layout of a DOM
         <a data-cite="HTML/../#element">elements</a> which may involve system
         fonts. Like for HTML/CSS layout,
         it is thus possible to use JavaScript APIs
-        to measure box sizes and positions and infer data from system fonts
-        (e.g. default fonts, available glyphs, font layout
-        parameters...). The only font informations that are not exposed by other
-        existing Web APIs are the math layout data described in
-        <a href="#opentype-math-table"></a>.
+        (e.g.
+        <a data-cite="HTML#dom-context-2d-getimagedata">context.getImageData</a> on content embedded in a canvas context, or even just
+        <a href="CSSOM-VIEW#dom-element-getboundingclientrect">getBoundingClientRect()</a>)
+        to measure box sizes and positions and infer data from system fonts.
+        By combining miscelleneaous tests on such fonts and
+        comparing measurements against results of well-known fonts, an attacker
+        can try and determine the default fonts of the user.
+      </p>
+      <div class="example" id="font-information-leakage-1">
+        <p>The following
+        HTML+CSS+JavaScript document relies on a Web font with exotic metrics
+        to try and determine whether <code>A Well Known System Font</code>
+        is available by default.</p>
+        <pre data-include="examples/example-font-information-leakage-1.html"
+             data-include-format="text"></pre>
+      </div>
+      <div class="example" id="font-information-leakage-2">
+        <p>The following
+        HTML+CSS+JavaScript document tries to determine whether the
+        the UI serif font provide Asian glyphs:</p>
+        <pre data-include="examples/example-font-information-leakage-2.html"
+             data-include-format="text"></pre>
+        <p>
+      </div>
+      <div class="example" id="font-information-leakage-3">
+        <p>The following
+        HTML+CSS document contains the same text rendered with
+        <a data-cite="CSS-TEXT-DECOR-4#text-decoration-thickness">text-decoration-thickness</a> set to <code>from-font</code> and <code>1em</code> (here
+        100 pixels)
+        respectively. By comparing the heights of the two under lines,
+        one can calculate a good approximation of the
+        <code>underlineThickness</code> value from the PostScript Table
+        [[OPEN-FONT-FORMAT]].
+        </p>
+        <pre data-include="examples/example-font-information-leakage-3.html"
+             data-include-format="text"></pre>
+        <p>
+      </div>
+      <p>This specification relies on information from
+        <a href="#opentype-math-table"></a> to render MathML content. One
+        can get good approximation of most
+        layout parameters from <code>MathConstants</code> and
+        <code>MathGlyphInfo</code> using measurement
+        techniques similar to what is described above for
+        HTML+CSS+JavaScript document. The use of the <code>MathVariants</code>
+        table for MathML rendering can also be observed by putting stretchy
+        operators of different sizes inside a <code>canvas</code> context.</p>
+      <p>Although none of these parameters taken individually are personal,
+        implementing this specification increases the set of exposed
+        font information that can be used by an attacker to implement
+        fingerprinting techniques. Typically, they could help dermine
+        available and preferred math fonts for a user.
       </p>
     </section>
     <section id="conformance" class="appendix normative">