Algunos formularios tienen campos en iframes, lo que causa problemas con la función de autocompletar del navegador. Con el autorrelleno compartido, el marco superior puede designar la confiabilidad de los iframes de origen cruzado para admitir una mejor experiencia de autorrelleno para el usuario.
Hay disponible para pruebas una propuesta que permite el autocompletado en un iframe de origen cruzado. Con esta función, un marco superior puede designar los marcos cuyos campos se deben autocompletar. Esto es útil, en particular, para los formularios de pago, en los que es muy común que los campos sensibles (para el cumplimiento de la PCI DSS) se carguen desde un origen de terceros, como un proveedor de servicios de pago (PSP).
En el siguiente ejemplo, el nombre y la fecha de vencimiento del titular de la tarjeta se encuentran en la página de nivel superior (o marco principal), pero el número de tarjeta de crédito y el código de verificación se encuentran en iframes de una 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>
En el siguiente diagrama, se representa la estructura del formulario:
Para los comercios, este diseño combina seguridad y flexibilidad:
- Los iframes de origen cruzado aíslan los datos de pago sensibles de la infraestructura del comercio, lo que ayuda con el cumplimiento de las PCI DSS.
- Los campos de formulario en diferentes marcos se pueden organizar y aplicarles diseño para que coincidan con el aspecto del sitio web del comercio.
Desde la perspectiva del navegador, esto significa que hay casos de uso comunes y legítimos para los formularios de varios marcos, lo que plantea preguntas sobre el modelo de seguridad de los formularios. Para los usuarios, los formularios de varios marcos pueden generar una experiencia de autocompletado deficiente, como en el siguiente ejemplo:
La política de mismo origen es un modelo de referencia sólido para el autocompletado en todos los marcos, pero no proporciona suficiente nivel de detalle para que el navegador diferencie entre marcos de confianza y no confiables para el autocompletado.
Para permitir una mejor experiencia de autocompletado y, al mismo tiempo, mantener la seguridad de los datos del usuario, el equipo de Chrome está trabajando en una propuesta que permita el autocompletado en un iframe de origen cruzado. Si se cambia el formulario para usar la función de autocompletar compartida, Chrome completa correctamente el número de tarjeta de crédito entre orígenes:
<!-- 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>
Esto puede generar una mejor experiencia de autocompletado para el usuario:
Prueba el autocompletado compartido de forma local
Puedes probar la función de autocompletado compartido para un solo usuario en Chrome 93.0.4577.0 y versiones posteriores en computadoras y dispositivos móviles si configuras marcas desde la línea de comandos.
--flag-switches-begin --enable-features=AutofillAcrossIframes,AutofillSharedAutofill
Cómo detectar la compatibilidad con funciones
Usa el siguiente código para detectar si la propiedad shared-autofill está disponible:
if (document.featurePolicy && document.featurePolicy
.features().includes('shared-autofill')) {
console.log('shared-autofill available!');
}
Próximos pasos
La función Autocompletar compartido es una propuesta inicial para agregar una función de autocompletar a la política de permisos. Actualmente, el equipo de Chrome está trabajando con otros proveedores de navegadores para que se revise la propuesta. También se están analizando otras propuestas para mejorar la experiencia del usuario en el autocompletado en iframes.
Seguiremos brindando actualizaciones a medida que avancemos con esta propuesta. Mientras tanto, si tienes una página de confirmación de la compra en la que se incorporan campos <input> sensibles (número de tarjeta de crédito, CVC) de un proveedor externo, comunícate con nosotros. Nos encantaría saber si el autocompletado compartido en iframes podría mejorar la experiencia de autocompletado de tus usuarios durante el proceso de confirmación de la compra.
Más información
- Propuesta actual
- Revisión de la etiqueta del W3C
- Ejemplo de formulario de pago que se usa en esta publicación
- ¿Qué son las funciones experimentales de Chrome?
Foto de Jessica Ruscello en Unsplash.