--- a/user-interface-safety.html Fri Oct 25 18:56:03 2013 +0000
+++ b/user-interface-safety.html Thu Oct 31 20:39:40 2013 +0000
@@ -24,7 +24,7 @@
// subtitle : "an excellent document",
// if you wish the publication date to be other than today, set this
- publishDate: "2013-10-25",
+ publishDate: "2013-10-31",
// if the specification's copyright date is a range of years, specify
// the start date here:
@@ -87,7 +87,7 @@
// local bibliography
localBiblio: {
"CSP" : "B. Sterne and A. Barth <a href=\"http://www.w3.org/TR/CSP/\"><cite>Content Security Policy 1.0</cite></a>. W3C Candidate Recommendation. (Work in progress.) URL: <a href=\"http://www.w3.org/TR/2012/CR-CSP-20121115/\">http://www.w3.org/TR/2012/CR-CSP-20121115/</a>",
-"XFRAMEOPTIONS" : "D. Ross and T. Gondrom, IETF <a href=\"http://tools.ietf.org/html/draft-ietf-websec-x-frame-options-01\"><cite>HTTP Header X-Frame-Options</cite></a>. Internet Draft. (Work in Progress.) URL: <a href=\"http://tools.ietf.org/html/draft-ietf-websec-x-frame-options-01\">http://tools.ietf.org/html/draft-ietf-websec-x-frame-options-01</a>",
+"RFC7034" : "D. Ross and T. Gondrom, IETF <a href=\"http://tools.ietf.org/html/rfc7034\"><cite>HTTP Header X-Frame-Options</cite></a>. Internet RFC 7034 URL: <a href=\"http://tools.ietf.org/html/rfc7034\">http://tools.ietf.org/html/rfc7034</a>",
"CLEARCLICK" : "G. Maone <a href=\"http://noscript.net/downloads/ClearClick_WAS2012_rv2.pdf\"><cite>ClearClick: Effective Client-Side Protection Against UI Redressing Attacks</cite></a>. (Work in progress.) URL: <a href=\"http://noscript.net/downloads/ClearClick_WAS2012_rv2.pdf\">http://noscript.net/downloads/ClearClick_WAS2012_rv2.pdf</a>",
"UIREDRESS" : "M. Zalewski <a href=\"http://code.google.com/p/browsersec/wiki/Part2#Arbitrary_page_mashups_(UI_redressing)\"><cite>Browser Security Handbook, part 2</cite></a>. URL: <a href=\"http://code.google.com/p/browsersec/wiki/Part2#Arbitrary_page_mashups_(UI_redressing)\">http://code.google.com/p/browsersec/wiki/Part2#Arbitrary_page_mashups_(UI_redressing)</a>",
"FRAMEBUSTING" : "Boneh, et al. <a href=\"http://seclab.stanford.edu/websec/framebusting/\"><cite>Busting frame busting: a study of clickjacking vulnerabilities at popular sites</cite></a>. URL: <a href=\"http://seclab.stanford.edu/websec/framebusting/\">http://seclab.stanford.edu/websec/framebusting/</a>",
@@ -112,7 +112,7 @@
<section id=sotd>
<p>This is a Working Draft of the User Interface Security Directives for Content Security Policy. [[!CSP]]
-<p>Portions of the technology described in this document were originally developed as part of <code>X-Frame-Options</code> [[XFRAMEOPTIONS]], the ClearClick module of the Mozilla Firefox add-on NoScript, [[CLEARCLICK]] and in the InContext system implemented experimentally in Internet Explorer [[INCONTEXT]]. </p>
+<p>Portions of the technology described in this document were originally developed as part of <code>X-Frame-Options</code> [[!RFC7034]], the ClearClick module of the Mozilla Firefox add-on NoScript, [[CLEARCLICK]] and in the InContext system implemented experimentally in Internet Explorer [[INCONTEXT]]. </p>
<p>In addition to the documents in the W3C Web Application Security working group, the work on this document is also informed by the work of the <a href="http://tools.ietf.org/wg/websec/">IETF websec working group</a>, particularly that working group's requirements document: <a href="http://tools.ietf.org/id/draft-hodges-websec-framework-reqs">draft-hodges-websec-framework-reqs</a>. </p>
@@ -126,7 +126,7 @@
<p>Content Security Policy (CSP) is a declarative policy that lets the authors (or server administrators) of a web application restrict the behavior of a document, e.g. the origins where it can load its resources from or the ways it can execute scripts. This document defines directives to restrict the presentation or the interactivity of a resource when its interaction with the user may be happening in an ambiguous or deceitful context due to the spatial and/or temporal contiguity with other content displayed by the user agent. </p>
-<p>A user agent may implement the core directives of CSP independently from the directives in this specification, but this specification requires the policy conveyance and reporting mechanisms described in CSP. The interpretation of terms imported into this document from CSP may vary depending on the version implemented by the user agent. For example, a <code>source-expression</code> in Content Security Policy 1.0 is at the granularity of an <code>>origin</code> [[!ORIGIN]] but may be more granular in future versions of the core Content Security Policy. </p>
+<p>A user agent may implement the core directives of CSP independently from the directives in this specification, but this specification requires the policy conveyance and reporting mechanisms described in CSP. The interpretation of terms imported into this document from CSP may vary depending on the version implemented by the user agent. For example, a <code>source-expression</code> in Content Security Policy 1.0 is at the granularity of an <code>origin</code> [[!ORIGIN]] but may be more granular in future versions of the core Content Security Policy. </p>
<p>Application authors SHOULD transmit the directives in this specification as part of a single, complete Content Security Policy, as indicated by that specification. </p>
@@ -265,7 +265,7 @@
<p>Consider a service providing a payments application at <code>https://payments/makeEmbedded</code>. The service allows this resource to be embedded by both merchant Alice and merchant Bob, who compete with each other. Sending
<pre>Content-Security-Policy: frame-options https://alice https://bob</pre>
-would allow Bob to re-frame Alice's resource and create fradulent clicks, perhaps discrediting Alice with her customers or the payments service. If the payments service required additional information (e.g. <code>https://payments/makeEmbedded?merchant=alice</code>) to send individually-tailored headers listing only the <code>host-source</code> values needed by each merchant, this attack would be eliminated.</p>
+would allow Bob to re-frame Alice's resource and create fradulent clicks, perhaps discrediting Alice with her customers or the payments service. If the payments service used additional information (e.g. as part of a URL like <code>https://payments/makeEmbedded?merchant=alice</code>) to send individually-tailored headers listing only the <code>host-source</code> values needed by each merchant, this attack would be eliminated.</p>
</section>
</section>
@@ -678,7 +678,7 @@
handler of the same kind and therefore be able to prevent any event from
being handled by the content, if needed. </li>
<li><strong>Display changes tracking</strong> - whenever a repaint occurs in the topmost window or in one of its descendants,
- create a record containing a weak reference to the document causing the repaint, the screen coordinates of the
+ create a record containing a weak reference to the Origin causing the repaint, the screen coordinates of the
regions being repainted and a timestamp detailing when the repaint occurred, and add this record
to a screen-global list named "Display Changes List".
Records older than the maximum value for <code>input-protection</code> <code>display-time</code> can be discarded on update.
@@ -692,7 +692,7 @@
check whether the "Display Change List" contains any record younger than the
<code>input-protection</code> <code>display-time</code> value, whose repainted regions
intersect with the protected UI elements <em>and</em> whose repaint-causing
- document is <em>different</em> than the protected one. If this is true, hinting at
+ Origin is <em>different</em> than the protected one. If this is true, hinting at
a recent change in the way the protected UI is displayed, with causes external to the UI
itself (e.g. an overlapping element in an ancestor document or a
floating window being suddenly moved away), assume a timing attack is happening
@@ -749,7 +749,7 @@
</ol>
</section>
-
+</section>
<section id="alt_heuristic" class=informative>
<h2>Alternate Heuristic</h2>
<p>Some user agents use a strategy for hit testing and delivering
@@ -777,14 +777,16 @@
<p>If a resource is being loaded in a <code>frame</code>, <code>iframe</code>,
<code>object</code>, <code>embed</code> or <code>applet</code> context
-specifies an <code>input-protection</code> directive, apply the following steps:
-
+specifies an <code>input-protection</code> directive, apply the following steps:</p>
+<section>
+<h4>Preparation</h4>
<ol>
-<li><strong>Tracking protected hit test rectangles:</strong> Hook the creation of event
+<li><strong>Protected hit test rectangle tracking:</strong> Hook the creation of event
handlers for protected events and elements and add the DOM nodes with any such
handler to a collection. After a layout occurs, or when an event handler is
-added or removed,iterate across all DOM nodes to generate a vector of rectangles
-where events must be checked for safety. If the input-protection applies to
+added or removed, iterate across all DOM nodes to generate a vector of rectangles and
+their associated Origins where events must be checked for safety.
+If the <code>input-protection</code> applies to
the DOMWindow or Document node, avoid this expensive process of walking the
renderers and simply use the view's bounds, as they're guaranteed to be inclusive.
</li>
@@ -796,6 +798,18 @@
layer which can serve as a cached <strong><em>control image</em></strong>.
</li>
+<li><strong>Display changes tracking:</strong> whenever a region in a protected
+hit test rectangle is invalidated, create a record containing a weak reference to the
+Origin causing the repaint, the screen coordinates of the regions being
+repainted and a timestamp detailing when the repaint occurred, and add this
+record to a screen-global list named "Display Changes List". Records older than
+the maximum value of <code>input-protection display-time</code> can be discarded
+on update.</li>
+</ol>
+</section>
+<section>
+<h4>UI Event handling</h4>
+<ol>
<li><strong>Hit testing in the compositor:</strong> When an event is received, check
whether it is on any layer and then walk the layer hierarchy checking the
protected hit test rectangles on every layer. If there is a hit, continue this heuristic.
@@ -805,7 +819,7 @@
<li><strong>Timing attacks countermeasure</strong> check whether the "Display
Change List" contains any record younger than the <code>input-protection display-time</code>
value, whose repainted regions intersect with the protected regions <em>and</em>
-whose repaint-causing document is <em>different</em> than the protected one.
+whose repaint-causing Origin is <em>different</em> than the protected one.
If this is true, hinting at a recent change in the way the protected UI is
displayed, with causes external to the UI itself (e.g. an overlapping element
in an ancestor document or a floating window being suddenly moved away), assume
@@ -842,6 +856,12 @@
be 100% different, not 1% different. If portions of the <strong><em>control
image</em></strong> are clipped by the view port or otherwise occluded, all such pixels must be
considered not to match.</p>
+
+ <p>As a short-cut, a user agent MAY choose to treat any pixels in a protected layer with an
+ opacity of less than 100% as failing to match by definition. In cases where a fully-composited
+ user view is not available or extremely expensive to calculate, this optimization allows
+ the obstruction check to be performed with only a knowledge of the layers that fall on top of
+ the protected layer.</p>
</li>
<li><strong>Violation management</strong> -
@@ -862,6 +882,10 @@
</ol>
</section>
+</section>
+
+
+
<section>
<h2>Examples</h2>
@@ -937,7 +961,209 @@
"original-policy": "input-protection; report-uri https://example.org/csp-report.cgi?unique_id=12345"
}
}</pre>
-</section></section>
+</section>
+
+
+<section>
+<h3>Example Boundary Calculations for the Obstruction Check</h3>
+<p>A resource at OriginX embeds a resource at OriginY. The OriginY resource has the following policy:</p>
+<p><code>Content-Security-Policy: input-protection tolerance=50; input-protection-selectors div;</code></p>
+<p>and results in the following layout:</p>
+
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="650">
+
+ <!-- hostile resource -->
+ <text x="224" y="14" font-size="14" text-anchor="left" fill="fuchsia">OriginX resource, 500x600 @ 0,0</text>
+ <rect x="10" y="20" width="500" height="600"
+ style="stroke:fuchsia;stroke-width:5;fill:transparent;"/>
+
+ <!-- protected resource -->
+ <text x="260" y="100" font-size="14" text-anchor="left" fill="darkorange">OriginY protected resource,</text>
+ <text x="260" y="115" font-size="14" text-anchor="left" fill="darkorange">500x450 @ 100,100</text>
+ <rect x="110" y="120" width="500" height="450" style="stroke:darkorange;stroke-width:5;fill:transparent;"/>
+
+ <!-- div 1 -->
+ <text x="245" y="225" font-size="14" text-anchor="left" fill="darkorange"><div id=div1>, 450x200 @ 110,110</text>
+ <rect x="120" y="130" width="450" height="200" style="stroke:darkorange;stroke-width:1;fill:transparent;"/>
+
+ <!-- div 2 -->
+ <text x="245" y="445" font-size="14" text-anchor="left" fill="darkorange"><div id=div2>, 450x200 @ 110,330</text>
+ <rect x="120" y="350" width="450" height="200" style="stroke:darkorange;stroke-width:1;fill:transparent;"/>
+
+ <!-- root viewport -->
+ <text x="10" y="14" font-size="14" text-anchor="left" fill="black">root viewport, 500x500 @ 0,0</text>
+ <rect x="10" y="20" width="500" height="500" style="stroke:black;stroke-width:2;fill:transparent;" stroke-dasharray="7,7"/>
+
+ <!-- iframe viewport -->
+ <text x="110" y="100" font-size="14" text-anchor="left" fill="black">iframe viewport,</text>
+ <text x="110" y="115" font-size="14" text-anchor="left" fill="black">100x100 @ 100,100</text>
+ <rect x="110" y="120" width="100" height="100" style="stroke:black;stroke-width:2;fill:transparent;" stroke-dasharray="7,7"/>
+
+
+</svg>
+
+<p>The element with the id "div1" has an <code>onClick</code> handler defined, and a click event is triggered
+at 120,120 in the OriginX document's coordinate system. The red dot indicates the position of the event.
+The event is delivered to "div1", which matches the <code>input-protection-selectors</code>, and no parent of
+"div1" matches. As no <code>input-protection-clip</code> value is defined, the entire area of "div1" becomes the boundaries for
+the <strong><em>obstruction check</em></strong>, indicated by the cyan fill. As more than 50% of this
+area is occluded behind the iframe viewport, and so does not match by definition, this will trigger a violation.</p>
+
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="650">
+
+ <!-- protected area -->
+ <rect x="120" y="130" width="450" height="200" fill="cyan"/>
+
+ <!-- hostile resource -->
+ <text x="224" y="14" font-size="14" text-anchor="left" fill="fuchsia">OriginX resource, 500x600 @ 0,0</text>
+ <rect x="10" y="20" width="500" height="600"
+ style="stroke:fuchsia;stroke-width:5;fill:transparent;"/>
+
+ <!-- protected resource -->
+ <text x="260" y="100" font-size="14" text-anchor="left" fill="darkorange">OriginY protected resource,</text>
+ <text x="260" y="115" font-size="14" text-anchor="left" fill="darkorange">500x450 @ 100,100</text>
+ <rect x="110" y="120" width="500" height="450" style="stroke:darkorange;stroke-width:5;fill:transparent;"/>
+
+ <!-- div 1 -->
+ <text x="245" y="225" font-size="14" text-anchor="left" fill="darkorange"><div id=div1>, 450x200 @ 110,110</text>
+ <rect x="120" y="130" width="450" height="200" style="stroke:darkorange;stroke-width:1;fill:transparent;"/>
+
+ <!-- div 2 -->
+ <text x="245" y="445" font-size="14" text-anchor="left" fill="darkorange"><div id=div2>, 450x200 @ 110,330</text>
+ <rect x="120" y="350" width="450" height="200" style="stroke:darkorange;stroke-width:1;fill:transparent;"/>
+
+ <!-- root viewport -->
+ <text x="10" y="14" font-size="14" text-anchor="left" fill="black">root viewport, 500x500 @ 0,0</text>
+ <rect x="10" y="20" width="500" height="500" style="stroke:black;stroke-width:2;fill:transparent;" stroke-dasharray="7,7"/>
+
+ <!-- iframe viewport -->
+ <text x="110" y="100" font-size="14" text-anchor="left" fill="black">iframe viewport,</text>
+ <text x="110" y="115" font-size="14" text-anchor="left" fill="black">100x100 @ 100,100</text>
+ <rect x="110" y="120" width="100" height="100" style="stroke:black;stroke-width:2;fill:transparent;" stroke-dasharray="7,7"/>
+
+ <!-- event -->
+ <circle cx="130" cy="140" r="2" fill="red"/>
+ <circle cx="130" cy="140" r="4" fill="transparent" stroke="red"/>
+
+</svg>
+
+
+<p>If the OriginY protected resource set the following policy, instead:</p>
+<p><code>Content-Security-Policy: input-protection tolerance=50; input-protection-selectors div; input-protection-clip before=60 after=60 above=60 below=60;</code></p>
+<p>The region for the <strong><em>obstruction check</em></strong>, still indicated in solid cyan, is now only
+the intersection of the boundaries of the protected element handling the event, indicated by diagonal cyan lines, and the clipping
+window around the event, indicated by the green dotted line. If the OriginX resource has not painted anything over the iframe viewport, this check will not trigger
+a violation because the entire cyan area will be identical in the <strong><em>user image</em></strong> and <strong><em>control image</strong></em>.</p>
+
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="650">
+
+ <defs>
+ <pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(45 2 2)">
+ <path d="M -1,2 l 6,0" stroke="cyan" stroke-width="1"/>
+ </pattern>
+ </defs>
+
+ <!-- protected area -->
+ <rect x="120" y="130" width="70" height="70" fill="cyan"/>
+
+ <!-- hostile resource -->
+ <text x="224" y="14" font-size="14" text-anchor="left" fill="fuchsia">OriginX resource, 500x600 @ 0,0</text>
+ <rect x="10" y="20" width="500" height="600"
+ style="stroke:fuchsia;stroke-width:5;fill:transparent;"/>
+
+ <!-- protected resource -->
+ <text x="260" y="100" font-size="14" text-anchor="left" fill="darkorange">OriginY protected resource,</text>
+ <text x="260" y="115" font-size="14" text-anchor="left" fill="darkorange">500x450 @ 100,100</text>
+ <rect x="110" y="120" width="500" height="450" style="stroke:darkorange;stroke-width:5;fill:transparent;"/>
+
+ <!-- div 1 -->
+ <rect x="120" y="130" width="450" height="200" style="stroke:darkorange;stroke-width:1;" fill="url(#diagonalHatch)"/>
+ <text x="245" y="225" font-size="14" text-anchor="left" fill="darkorange"><div id=div1>, 450x200 @ 110,110</text>
+
+ <!-- div 2 -->
+ <text x="245" y="445" font-size="14" text-anchor="left" fill="darkorange"><div id=div2>, 450x200 @ 110,330</text>
+ <rect x="120" y="350" width="450" height="200" style="stroke:darkorange;stroke-width:1;fill:transparent;"/>
+
+ <!-- root viewport -->
+ <text x="10" y="14" font-size="14" text-anchor="left" fill="black">root viewport, 500x500 @ 0,0</text>
+ <rect x="10" y="20" width="500" height="500" style="stroke:black;stroke-width:2;fill:transparent;" stroke-dasharray="7,7"/>
+
+ <!-- iframe viewport -->
+ <rect x="110" y="120" width="100" height="100" style="stroke:black;stroke-width:2;fill:transparent;" stroke-dasharray="7,7"/>
+ <text x="110" y="100" font-size="14" text-anchor="left" fill="black">iframe viewport,</text>
+ <text x="110" y="115" font-size="14" text-anchor="left" fill="black">100x100 @ 100,100</text>
+
+ <!-- event -->
+ <circle cx="130" cy="140" r="2" fill="red"/>
+ <circle cx="130" cy="140" r="4" fill="transparent" stroke="red"/>
+
+ <!-- clip -->
+ <text x="70" y="74" font-size="14" text-anchor="left" fill="green">clip before=60 after=60 above=60 below=60</text>
+ <rect x="70" y="80" height="120" width="120" style="stroke:green;stroke-width=3;fill:transparent;" stroke-dasharray="2,2"/>
+
+</svg>
+
+<p>If the OriginY protected resource omitted selectors, as in this policy:</p>
+<p><code>Content-Security-Policy: input-protection tolerance=50; input-protection-clip before=60 after=60 above=60 below=60;</code></p>
+<p>The region for the <strong><em>obstruction check</em></strong>, still indicated in solid cyan, is now
+the intersection of the boundaries of the entire document, indicated by diagonal cyan lines, and the clipping
+window around the event, indicated by the green dotted line. This demonstrates that portions of the protected resource may be
+included in the obstruction check region, even if they do not have event listeners. Thus, the hit test rectangles which trigger the
+heuristic do not necessarily compose the entire region that must be checked.</p>
+<p>As in the previous example, if the OriginX resource has not painted anything over the iframe viewport, this check will not trigger
+a violation because the entire cyan area will be identical in the <strong><em>user image</em></strong> and <strong><em>control image</strong></em>.</p>
+
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="650">
+
+ <defs>
+ <pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(45 2 2)">
+ <path d="M -1,2 l 6,0" stroke="cyan" stroke-width="1"/>
+ </pattern>
+ </defs>
+
+ <!-- protected area -->
+ <rect x="110" y="120" width="80" height="80" fill="cyan"/>
+
+ <!-- hostile resource -->
+ <text x="224" y="14" font-size="14" text-anchor="left" fill="fuchsia">OriginX resource, 500x600 @ 0,0</text>
+ <rect x="10" y="20" width="500" height="600"
+ style="stroke:fuchsia;stroke-width:5;fill:transparent;"/>
+
+ <!-- protected resource -->
+ <text x="260" y="100" font-size="14" text-anchor="left" fill="darkorange">OriginY protected resource,</text>
+ <text x="260" y="115" font-size="14" text-anchor="left" fill="darkorange">500x450 @ 100,100</text>
+ <rect x="110" y="120" width="500" height="450" style="stroke:darkorange;stroke-width:5;" fill="url(#diagonalHatch)"/>
+
+ <!-- div 1 -->
+ <rect x="120" y="130" width="450" height="200" style="stroke:darkorange;stroke-width:1;fill:transparent"/>
+ <text x="245" y="225" font-size="14" text-anchor="left" fill="darkorange"><div id=div1>, 450x200 @ 110,110</text>
+
+ <!-- div 2 -->
+ <text x="245" y="445" font-size="14" text-anchor="left" fill="darkorange"><div id=div2>, 450x200 @ 110,330</text>
+ <rect x="120" y="350" width="450" height="200" style="stroke:darkorange;stroke-width:1;fill:transparent;"/>
+
+ <!-- root viewport -->
+ <text x="10" y="14" font-size="14" text-anchor="left" fill="black">root viewport, 500x500 @ 0,0</text>
+ <rect x="10" y="20" width="500" height="500" style="stroke:black;stroke-width:2;fill:transparent;" stroke-dasharray="7,7"/>
+
+ <!-- iframe viewport -->
+ <rect x="110" y="120" width="100" height="100" style="stroke:black;stroke-width:2;fill:transparent;" stroke-dasharray="7,7"/>
+ <text x="110" y="100" font-size="14" text-anchor="left" fill="black">iframe viewport,</text>
+ <text x="110" y="115" font-size="14" text-anchor="left" fill="black">100x100 @ 100,100</text>
+
+ <!-- event -->
+ <circle cx="130" cy="140" r="2" fill="red"/>
+ <circle cx="130" cy="140" r="4" fill="transparent" stroke="red"/>
+
+ <!-- clip -->
+ <text x="70" y="74" font-size="14" text-anchor="left" fill="green">clip before=60 after=60 above=60 below=60</text>
+ <rect x="70" y="80" height="120" width="120" style="stroke:green;stroke-width=3;fill:transparent;" stroke-dasharray="2,2"/>
+
+</svg>
+
+</section>
+
+</section>
<section id="security-considerations" class=informative>
<h2>Security Considerations</h2>