--- 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><body></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>