Some forms have fields in iframes, which causes problems for browser autofill. With shared-autofill, the parent frame can designate the trustworthiness of cross-origin iframes, to support a better autofill experience for the user.
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:
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
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.