Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Define eligibility for autofill #8801

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Define eligibility for autofill #8801

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
01a2700
Define eligibility for autofill
schwering Nov 15, 2022
44e9a29
Feedback: remove input names and add iframe content
schwering Mar 23, 2023
88abc23
The agent "should" instead of "must" only autofill eligible fields
schwering Mar 28, 2023
c4ad614
Feedback: ...traversible with user attention, indentation, newlines
schwering May 25, 2023
6e26441
Add note with examples for ignoring eligibility/shared-autofill
schwering May 25, 2023
37a17c0
Extend note and example
schwering May 30, 2023
61821b7
Fix line wrapping; remove blank line; fix typo
schwering Jun 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 114 additions & 5 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4707,6 +4707,9 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
data-x="">cross-origin-isolated</code></dfn>", which has a <span
data-x="concept-default-allowlist">default allowlist</span> of <code
data-x="">'self'</code>.</li>
<li>"<dfn data-x="shared-autofill-feature"><code data-x="">shared-autofill</code></dfn>", which
has a <span data-x="concept-default-allowlist">default allowlist</span> of <code
data-x="">'self'</code>.</li>
</ul>


Expand Down Expand Up @@ -44716,6 +44719,10 @@ interface <dfn interface>HTMLTableCellElement</dfn> : <span>HTMLElement</span> {
&lt;p>&lt;button>Submit order&lt;/button>&lt;/p>
&lt;/form></code></pre>

<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 can consider fields from different documents
as explained in the <span>eligible for autofill</span> section.</p>


<h5>Improving the user experience on mobile devices</h5>

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

<h5>Autofill</h5>

<h6>Autofilling form controls: the <code data-x="attr-fe-autocomplete">autocomplete</code> attribute</h6>
<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 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>
&lt;label> Address: &lt;input>&lt;/textarea> &lt;/label>
&lt;label> City: &lt;input> &lt;/label>
&lt;label> Postal Code: &lt;input> &lt;/label>
&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 into
one of the controls.</p>
</div>

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

<h6>Eligibility for autofill</h6>

<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
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 <span
data-x="concept-document-origin">origin</span> is the <span>same origin</span> as
<var>document</var>'s <span data-x="concept-document-origin">origin</span>.</p></li>

<li><p>The <code data-x="shared-autofill-feature">shared-autofill</code> feature is enabled in
<var>document</var> for <var>document</var>'s <span
data-x="concept-document-origin">origin</span>.</p></li>
</ul>

<div class="example" id="sharedAutofillExample">
<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>
&lt;p> Credit card number: &lt;iframe src="https://pay.example.com/number.html" allow=shared-autofill>&lt;/iframe>
&lt;p> Expiration date: &lt;input>
&lt;p> CVC: &lt;iframe src="https://pay.example.com/cvc.html" allow=shared-autofill>&lt;/iframe>
&lt;/form>
&lt;iframe src="https://ads.example.com/ad.html">&lt;/iframe></code></pre>

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

<p>User agents sometimes have features for helping users fill forms in, for example prefilling the
user's address based on earlier user input. The <dfn element-attr
for="button,fieldset,input,object,output,select,textarea"><code
<pre><code class="html">&lt;!doctype html>
&lt;html>
&lt;body>
&lt;input>
&lt;/html></code></pre>

<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. 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>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>

<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 with 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>


<h6>The <code data-x="attr-fe-autocomplete">autocomplete</code> attribute</h6>

<p>The <dfn element-attr for="button,fieldset,input,object,output,select,textarea"><code
data-x="attr-fe-autocomplete">autocomplete</code></dfn> content attribute can be used to hint to
the user agent how to, or indeed whether to, provide such a feature.</p>
the user agent how to, or indeed whether to, autofill a form control.</p>

<!-- "mode" is already used by enumerated attributes... "role" is used by role=""... "mantle" it is. -->

Expand Down Expand Up @@ -134069,6 +134174,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 Expand Up @@ -134551,6 +134659,7 @@ INSERT INTERFACES HERE
Christian Johansen,
Christian Schmidt,
Christoph P&auml;per,
Christoph Schwering,
Christophe Dumez,
Christopher Aillon,
Christopher Cameron,
Expand Down