Shared autofill across iframes: an initial proposal

Shared autofill across iframes: an initial proposal

A proposal to allow autofill into a cross-origin iframe is available for testing. With this feature, a parent frame can designate the frames whose fields should be autofillable. This is particularly useful for payment forms, where it is very common for sensitive fields (for PCI DSS compliance) to be loaded from a third-party origin such as a payment service provider (PSP).

In the following example, the cardholder name and expiration date are in the top-level page (or main frame), but the credit card number and verification code are in iframes from a PSP.

<!-- Top-level document URL: https://merchant.com/... -->
<form>
Cardholder name: <input id="name">
Credit card number: <iframe src="https://psp.com/..."><input id="num"></iframe>
Expiration date: <input id="exp">
CVC: <iframe src="https://psp.com/..."><input id="cvc"></iframe>
</form>

The following diagram represents the structure of the form:

Tree diagram showing how different fields are in different frames in a payment form

For merchants, this design combines security and flexibility:

  • The cross-origin iframes isolate the sensitive payment data from the merchant’s infrastructure, which helps with PCI DSS compliance.
  • Form fields in different frames can be arranged and styled to match the merchant website’s look and feel.

From the browser perspective, this means there are common and legitimate use cases for multi-frame forms, which raises questions about the security model for forms. For users, multi-frame forms can lead to a poor autofill experience, like the following example:

The same-origin policy is a solid baseline for autofilling across frames, but does not provide sufficient granularity for the browser to differentiate between trusted and untrusted frames for autofill.

To allow a better autofill experience while maintaining the safety of user data, the Chrome team is working on a proposal allowing autofill into a cross-origin iframe. If the form is changed to use shared-autofill, Chrome successfully fills the credit card number cross-origin:

<!-- Top-level document URL: https://merchant.com/... -->
<form>
Cardholder name: <input id="name">
Credit card number: <iframe src="https://psp.com/..." allow="shared-autofill"><input id="num"></iframe>
Expiration date: <input id="exp">
CVC: <iframe src="https://psp.com/..." allow="shared-autofill"><input id="cvc"></iframe>
</form>

This can result in a better autofill experience for the user:

Try shared-autofill locally

Caution

This proposal is being made available for testing and feedback behind a flag, but is subject to change and may not be implemented in its current form for general availability.

You can test shared-autofill for a single user in Chrome 93.0.4577.0 and above on desktop and mobile by setting flags from the command line.

--flag-switches-begin --enable-features=AutofillAcrossIframes,AutofillSharedAutofill

Detect feature support

Use the following code to detect whether the shared-autofill property is available:

if (document.featurePolicy && document.featurePolicy
.features().includes('shared-autofill')) {
console.log('shared-autofill available!');
}

What’s next?

Shared-autofill is an initial proposal to add an autofill feature to the permissions policy. The Chrome team is currently working with other browser vendors to get the proposal reviewed. Further proposals on how to increase the user experience for autofill across iframes are also in discussion.

We’ll continue to provide updates as we make progress with this proposal. In the meantime, if you have a checkout page where the sensitive <input> fields (credit card number, cvc) are embedded from a third-party provider, reach out to us. We would love to hear if shared-autofill across iframes could potentially improve your users’ autofill experience during the checkout process.

Find out more


Photo by Jessica Ruscello on Unsplash.

This post is also available in: Norsk bokmål