Skip to content

Commit

Permalink
Extend note and example
Browse files Browse the repository at this point in the history 
This commit extends the example to explain how and why payment forms
today use cross-origin iframes.

It also extends the note to explain why a user agent might ignore
share-autofill or fill in controls even when shared-autofil is disabled.
  • Loading branch information
@schwering
schwering committed May 30, 2023
1 parent 0d7e403 commit f95851e
Showing 1 changed file with 40 additions and 29 deletions.
69 changes: 40 additions & 29 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44575,7 +44575,7 @@ interface <dfn interface>HTMLTableCellElement</dfn> : <span>HTMLElement</span> {


<p class="note">User agents are not limited to the form controls of a specific <code>form</code>
in their automatic filling. In particular, they might consider fields from different documents
in their automatic filling. In particular, they can consider fields from different documents
as explained in the <span>eligible for autofill</span> section.</p>


Expand Down Expand Up @@ -55578,13 +55578,13 @@ form.method === input; // => true</code></pre>

<h5>Autofill</h5>

<p>Some user agents have features for helping users fill forms in, for example prefilling the
<p>Some user agents have features for helping users fill in forms, for example prefilling the
user's address based on earlier user input. They may autofill either an individual form control or
multiple controls at once.</p>

<div class="example">
<p>A user agent might offer the user to automatically fill their address in a form like the
following.</p>
<p>A user agent might offer the user to automatically fill their address in the following
form.</p>

<pre><code class="html">&lt;form method=post action="https://pizza.exampe.com/order.cgi">
&lt;label> Name: &lt;input>&lt;/textarea> &lt;/label>
Expand All @@ -55594,11 +55594,11 @@ form.method === input; // => true</code></pre>
&lt;label> Country: &lt;select>...&lt;/select> &lt;/label>
&lt;/form></code></pre>

<p>For example, the user agent could suggest values to fill when the user focuses or types in
<p>For example, the user agent could suggest values to fill when the user focuses or types into
one of the controls.</p>
</div>

<p>The user agent may fill multiple controls at once even if they have different
<p>The user agent may fill in multiple controls at once even if they have different
<span data-x="form owner">form owners</span>, <span>root</span> nodes, or even
<span data-x="node document">node documents</span>. However, the user agent should only fill in
controls that are <span>eligible for autofill</span>.</p>
Expand All @@ -55607,7 +55607,7 @@ form.method === input; // => true</code></pre>

<p>A form control <var>control</var> is <dfn>eligible for autofill</dfn> if <var>control</var>'s
<span>node document</span> <var>document</var> is a <span>fully active descendant of a top-level
traversible with user attention</span> and one of the following is true:</p>
traversable with user attention</span> and one of the following is true:</p>

<ul>
<li><p>Some element is <span>focused</span> and its <span>node document</span>'s
Expand All @@ -55620,7 +55620,15 @@ form.method === input; // => true</code></pre>
</ul>

<div class="example" id="sharedAutofillExample">
<p>Consider the following page <code data-x="">https://pizza.example.com/</code>:</p>
<p>In this example, the pizza store has outsourced payment processing to a service provider. To
comply with the payment industry standard <cite>PCI-DSS</cite>, certain form controls are hosted
in cross-origin iframes. Visually, these form controls integrate seamlessly with the pizza
store's look and feel; the user is not made aware of the controls' origins.
<ref spec=PCI-DSS></p>

<p>The checkout form on <code data-x="">https://pizza.example.com/</code> has enabled
<code data-x="shared-autofill-feature">shared-autofill</code> as a hint to the user agent to fill
in the entire payment form.</p>

<pre><code class="html">&lt;form method=post>
&lt;p> Cardholder name: &lt;input>
Expand All @@ -55630,7 +55638,7 @@ form.method === input; // => true</code></pre>
&lt;/form>
&lt;iframe src="https://ads.example.com/ad.html">&lt;/iframe></code></pre>

<p>Let <code data-x="">number.html</code> and <code data-x="">cvc.html</code> each contain an
<p><code data-x="">number.html</code> and <code data-x="">cvc.html</code> each contain an
<code>input</code>:</p>

<pre><code class="html">&lt;!doctype html>
Expand All @@ -55639,34 +55647,34 @@ form.method === input; // => true</code></pre>
&lt;input>
&lt;/html></code></pre>

<p>Suppose the user starts filling the cardholder name and the user agent offers to fill the
<p>Suppose the user starts typing the cardholder name and the user agent offers to fill in the
entire credit card form. The cardholder name and expiration date controls are eligible by means
of their origin, and the controls in <code data-x="">number.html</code> and
<code data-x="">cvc.html</code> are eligible due to the
<code data-x="shared-autofill-feature">shared-autofill</code> feature.
By contrast, none of the controls in <code data-x="">ad.html</code> are eligible because of the
distinct origins and the absent <code data-x="shared-autofill-feature">shared-autofill</code>
feature; this prevents leaking information to the ad server.</p>
None of the controls in <code data-x="">ad.html</code> is eligible because of the distinct
origins and the absent <code data-x="shared-autofill-feature">shared-autofill</code> feature;
this prevents leaking information to the ad server.</p>
</div>

<div class="note">
<p>The user agent does not have to fill in all eligible form controls, and it can fill
in form controls that are not eligible. In particular, it can ignore
<code data-x="shared-autofill-feature">shared-autofill</code> depending on the type of data
to be filled and the relationships of the controls' <span>node navigable</span>s. For example:</p>
<p>Whether a form control is <span>eligible for autofill</span> by means of
<code data-x="shared-autofill-feature">shared-autofill</code> might be beyond control of the
focused document: <span data-x="concept-policy-controlled-feature">policy-controlled
features</span> can be enabled or disabled by a parent document in its children, but not vice
versa. This reflects how form controls in cross-origin iframes are commonly seamlessly integrated
with the top-level document. The user agent might ignore
<code data-x="shared-autofill-feature">shared-autofill</code> in documents that are not
descendants of the focused document, perhaps depending on the value that would be filled.</p>

<ul>
<li><p>The user agent can ignore <code data-x="shared-autofill-feature">shared-autofill</code>
when filling in usernames and passwords which are associated to a specific
<span data-x="concept-document-origin">origin</span>.</p></li>
<li><p>The user agent can ignore <code data-x="shared-autofill-feature">shared-autofill</code>
in <code>Document</code>s whose <span>navigable</span> is not a <span>descendant</span>
of the <span>fully active descendant of a top-level traversible with user attention</span>
because payment form controls are frequently hosted in cross-origin <code>iframe</code>s
like in the <a href="#sharedAutofillExample">example above</a>.
<li><p>The user agent can fill in cross-origin form controls because the user
consented.</p></li>
</ul>
<p>The user agent might generally ignore
<code data-x="shared-autofill-feature">shared-autofill</code> in cross-origin frames
when filling in usernames and passwords since these credentials might be associated to a specific
<span data-x="concept-document-origin">origin</span>.</p>

<p>On the other hand, the user agent might fill in cross-origin form controls in the absence of
<code data-x="shared-autofill-feature">shared-autofill</code> if it thinks this is the user's
intention, for example, because the user consented.</p>
</div>


Expand Down Expand Up @@ -133898,6 +133906,9 @@ INSERT INTERFACES HERE
<dt id="refsPAYMENTREQUEST">[PAYMENTREQUEST]</dt>
<dd><cite><a href="https://w3c.github.io/payment-request/">Payment Request API</a></cite>, M. Cáceres, D. Wang, R. Solomakhin, I. Jacobs. W3C.</dd>

<dt id="refsPCI-DSS">[PCI-DSS]</dt>
<dd>(Non-normative) <cite><a href="https://listings.pcisecuritystandards.org/pdfs/best_practices_securing_ecommerce.pdf">PCI Data Security Standard &mdash; Information Supplement: Best Practices for Securing E-commerce</a></cite>. Payment Card Industry Security Standards Council.</dd>

<dt id="refsPDF">[PDF]</dt>
<dd>(Non-normative) <cite><a href="https://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/PDF32000_2008.pdf">Document management &mdash; Portable document format &mdash; Part 1: PDF</a></cite>. ISO.</dd>

Expand Down

0 comments on commit f95851e

Please sign in to comment.