Major update: replace -padding with -clip and extend default screenshot area
authorGiorgio Maone <giorgio@maone.net>
Thu, 20 Sep 2012 10:28:51 +0200
changeset 9 a2ce5fa6b5fb
parent 8 da6b42199939
child 10 3e7ba0f12494
Major update: replace -padding with -clip and extend default screenshot area
user-interface-safety.html
--- a/user-interface-safety.html	Wed Sep 19 22:41:57 2012 +0200
+++ b/user-interface-safety.html	Thu Sep 20 10:28:51 2012 +0200
@@ -191,7 +191,7 @@
 
 <p>A conformant user agent is one that implements all the requirements listed
 in this specification that are applicable to user-agents. Treatment of
-the <code>input-protection</code>, <code>input-protection-padding</code> and <code>input-protection-selectors</code> directives are at the discretion of the 
+the <code>input-protection</code>, <code>input-protection-clip</code> and <code>input-protection-selectors</code> directives are at the discretion of the 
 user agent.</p>
 
 <p>A conformant server is one that implements all the requirements listed in
@@ -346,8 +346,13 @@
 href="#heuristic">Input Protection Heuristic</a> section to user input events, such as <code>click</code>,
 <code>keypress</code>, <code>touch</code>, and <code>drag</code>, before they
 are delivered to the resource. </p>
+<p>The screenshot comparison heuristic, in particular, uses the body-bounding rectangle 
+of the document triggering the event as its default reference area,
+or the rectangle defined by the <code>input-protection-clip</code>
+and by the <code>input-protection-selectors</code> directives if any of those is explicitly set.
+</p>
 
-<p>If set as part of a <code>Content-Security-Policy</code>, triggering of
+<p>If the <code>input-protection-clip</code> directive is set as part of a <code>Content-Security-Policy</code>, triggering of
 the heuristic should cancel delivery of the UI event to the target and
 cause a violation report to be sent.  If set as part of a 
 <code>Content-Security-Policy-Report-Only</code>, triggering of the heuristic 
@@ -390,32 +395,34 @@
 </dd>
 </section>
 
-<section id="input-protection-padding">
-<h3><code>input-protection-padding</code></h3>
+<section id="input-protection-clip">
+<h3><code>input-protection-clip</code></h3>
 
-<p>The <code>input-protection-padding</code> directive defines a rectangular screen area, intersecting the UI event target, 
-which should be included in the screenshot comparison check explained in the
-<a href="#heuristic">Input Protection Heuristic</a> section.</p>
-<p>If not explicitly set in a policy which includes the <code>input-protection</code> directive, the <code>input-protection-padding</code>
-directive is implied with its default value, specified below.</p>
+<p>The <code>input-protection-clip</code> directive defines a rectangular screen area 
+whose intersection with the bounding rectangle of the whole document's body should be used as the reference area in
+the screenshot comparison check explained in the <a href="#heuristic">Input Protection Heuristic</a> section.</p>
+<p>If the <code>input-protection-clip</code> directive is not explicitly set in a policy
+which includes the <code>input-protection</code> directive
+and no <code>input-protection-selectors</code> directive is set either,
+the bounding rectangle of the whole document's body should be used for screenshot comparisons.</p>
 <p>If explicitly set as part of a policy where no <code>input-protection</code>
-directive is explicitly set, the <code>input-protection-padding</code> directive
-implies the <code>input-protection</code> directive as if it was set in the same policy whith its default value.</p>
+directive is explicitly set, the <code>input-protection-clip</code> directive
+implies the <code>input-protection</code> directive as if it was set in the same policy with its default value.</p>
 </p>
 
 <pre>
-directive-name  = "input-protection-padding"
-directive-value = ["before=" num-val] ["above=" num-val] ["after=" num-val] ["below=" num-val] / "none"</pre>
+directive-name  = "input-protection-clip"
+directive-value = ["before=" num-val] ["above=" num-val] ["after=" num-val] ["below=" num-val]</pre>
 
 <p>The optional directive value can include up to four non-negative numeric labeled offsets,
 expressed in CSS pixels and relative to the screen coordinates of the UI event being processed
-(<code>event.screenX</code> and <code>event.screenY</code> for mouse and touch event) or, if not appliable (e.g. for keyboard events),
+(<code>event.screenX</code> and <code>event.screenY</code> for mouse and touch event) or, if not applicable (e.g. for keyboard events),
 to the geometrical center of the event target in screen coordinates.
 These offsets define a rectangle with
 <pre>
 x = eX - left, y = eY - top, width = left + right, height = top + bottom
 </pre>
-where <code>eX</code> and <code>eY</code> are the event's explicit (when possible) or inferred (the target's center) screen cordinates.
+where <code>eX</code> and <code>eY</code> are the event's explicit (when possible) or inferred (the target's center) screen ordinates.
 The <code>left</code>, <code>top</code>, <code>right</code> and <code>bottom</code>
 values are mapped to the offsets labeled as
 <code>before</code>, <code>above</code>, <code>after</code> and <code>below</code>
@@ -424,34 +431,37 @@
  translates to <code>left</code>.
 <p class="issue">Should the bi-directional mapping rules being defined more strictly and reference any
 external document, or is the language above clear enough?</p>
-The computed rectangle should be regarded as the minimum reference area for the screenshot comparison check explained in the
-<a href="#heuristic">Input Protection Heuristic</a> section.</p>
-<p>
-The default value for this directive is <code>before=250 above=250 after=50 below=50</code>.
+<p>The default value for this directive is <code>before=250 above=250 after=50 below=50</code>.
 If a partial value is provided (i.e. any offset has been omitted) the default values should be implied for the missing offsets.  
 </p>
-<p>A value of <code>none</code> explicitly disables the screenshot comparison heuristic unless the
-<code>input-protection-selectors</code> is set and its value matches the current event target or one of its ancestors.</p>
+<p>The intersection of the computed rectangle with the bounding rectangle of the document's body
+should be used as the reference area for the screenshot comparison check explained in the
+<a href="#heuristic">Input Protection Heuristic</a> section, unless the UI event's target or one of its DOM ancestors match a
+<code>input-protection-selector</code> directive set in the same policy.</p>.
+<p>If the <code>input-protection-clip</code> directive is not set or provides an invalid value, the whole bounding rectangle
+of the document's body must be used as the reference area for the screenshot comparison,
+unless an <code>input-protection-selectors</code> directive is set in the same policy.</p>
 </section>
 
 <section>
 <h3><code>input-protection-selectors</code></h3>
 
 <p>The <code>input-protection-selectors</code> directive overrides the
-implicit or explicit <code>input-protection-padding</code> value when
-the processed UI event target or one of its ancestors in the DOM match the <code>dom_selectors_group</code>
+implicit or explicit <code>input-protection-clip</code> value when
+the processed UI event target or one of its DOM ancestors match the <code>dom_selectors_group</code>
 <a href="#selector-string">selector string</a> provided as the mandatory directive's value:
 in this case, the reference area used for screenshot comparison is the
 bounding box of the event target itself, if it matches the selectors, or the bounding box of its nearest
-matching ancestor, if any, augmented by the margins given by the leading optional labeled offsets, if any.
-UI events whose target and ancestors don't match any of the specified selectors are still processed using the
-<code>input-protection-padding</code> value if explicitly set, or its default value if omitted, in order to compute the
-screenshot reference area, unless said value is the <code>none</code>.
+matching DOM ancestor, if any, augmented by the margins given by the leading optional labeled offsets, if any.
+UI events whose target and ancestors don't match any of the specified selectors should be ignored (not blocked)
+unless an <code>input-protection-clip</code> directive is explicitly included in the policy:
+if this is the case, the UI event must be checked and the screenshot reference area
+should be computed using the <code>input-protection-clip</code> directive.
 </p>
 
 <p>If set as part of a policy where no <code>input-protection</code>
 directive is explicitly set, the <code>input-protection-selectors</code> directive
-implies the <code>input-protection</code> directive as if it was set in the same policy whith its default value.</p>
+implies the <code>input-protection</code> directive as if it was set in the same policy with its default value.</p>
 </p>
 
 <pre>
@@ -472,7 +482,7 @@
 <code>before</code>, <code>above</code>, <code>after</code> and <code>below</code>
 respectively, unless the bi-directional text properties of the event target suggest otherwise: for instance,
 if the target's direction is RTL, <code>before</code> translates to <code>right</code> and <code>after</code>
- translates to <code>left</code> (similarly to the <a href="#input-protection-padding"><code>input-protection-padding</code></a> directive).
+ translates to <code>left</code> (similarly to the <a href="#input-protection-clip"><code>input-protection-clip</code></a> directive).
 </section>
 
 <section>
@@ -642,7 +652,7 @@
   "Cursorjacking".</li>
   <!-- 3 --> <li><strong>Obstruction check</strong> - By using an off-screen HTML 5 canvas
     element, take two screenshots of the area defined by the
-    <a href="#input-protection-padding"><code>input-protection-padding</code></a> and
+    <a href="#input-protection-clip"><code>input-protection-clip</code></a> and
     <a href="#input-protection-selectors"><code>input-protection-selectors</code></a>
     directives and containing the DOM element
     which is about to receive the event:
@@ -686,21 +696,33 @@
 <p>This section provides some sample use cases and accompanying security
 policies.</p>
 
-<p><strong>Example 1:</strong> A resource wishes to block delivery of UI events
-to any HTML button and suggests a 15% tolerance
+<p><strong>Example 1:</strong>
+A resource wishes to block delivery of UI events to the document unless its whole body
+has been entirely visible (no tolerance) during the past 1 second (default display-time value):
+<pre>Content-Security-Policy: input-protection</pre>
+
+<p><strong>Example 2:</strong>
+A resource wishes to block delivery of UI events to the element with id "send-box", all the elements with class
+".tweet" and all the forms in the page unless those elements have been visible for the past 800 milliseconds at least,
+(their intrinsic sizes is used as a reference for screenshot comparison): 
+<pre>
+Content-Security-Policy: input-protection display-time 800;
+        input-protection-selectors #send-button, .tweet, form</pre>
+
+<p><strong>Example 3:</strong> A resource wishes to block delivery of UI events
+to any obstructed HTML button and suggests a 15% tolerance
 threshold for determining obstruction of the element with a 200 pixels wide margin above and before (on the top and on the left,
 if orientation is LTR) the triggering element:</p>
 <pre>Content-Security-Policy: input-protection tolerance=15;
-                         input-protection-selectors above=200 before=200 after=0 below=0 button, input[type=submit], input[type=button];
-                         input-protection-padding none;</pre>
+                input-protection-selectors above=200 before=200 after=0 below=0 button, input[type=submit], input[type=button]</pre>
 
-<p><strong>Example 2:</strong>A resource wishes to receive reports when the
+<p><strong>Example 4:</strong>A resource wishes to receive reports when the
 UI Safety heuristic is triggered for any element in the <code>&lt;body&gt;</code>,
-with the default 300 by 300 pixels reference area and 0 tolerance:</p>
-<pre>Content-Security-Policy-Report-Only: input-protection;
+with the default 300 by 300 pixels clipped reference area and 0 tolerance:</p>
+<pre>Content-Security-Policy-Report-Only: input-protection; input-protection-clip;
                                      report-uri https://example.com/csp-report?unique_id=XKSJ9KAAHJDK9928KKSJEQ</pre>
 
-<p><strong>Example 3:</strong> A resource wants to react to potential clickjacking
+<p><strong>Example 5:</strong> A resource wants to react to potential clickjacking
 directly, without sending a report, so it sets a report-only header but does not 
 specify a report-uri. When a <code>UIEvent</code> is sent, the <code>unsafe</code>
 attribute will still be set when the heuristic is triggered:</p>