Algunos formularios tienen campos en iframes, lo que causa problemas para autocompletar el navegador. Con el autocompletado compartido, el marco superior puede designar la confiabilidad de los iframes de origen cruzado para brindar una mejor experiencia de autocompletado para el usuario.
Hay una propuesta disponible para realizar pruebas para permitir el autocompletado en un iframe de origen cruzado. Con esta función, un marco superior puede designar los marcos cuyos campos deben poder autocompletarse. Esto es particularmente útil para los formularios de pago, en los que es muy común que los campos sensibles (para el cumplimiento de PCI DSS) se carguen desde un origen externo, como un proveedor de servicios de pago (PSP).
En el siguiente ejemplo, el nombre del titular de la tarjeta y la fecha de vencimiento se encuentran en la página de nivel superior (o en el marco principal), pero el número de la tarjeta de crédito y el código de verificación están 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 PCI DSS.
- Los campos de formulario en diferentes marcos se pueden organizar y diseñar para que coincidan con la apariencia 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 fotogramas, lo que genera preguntas sobre el modelo de seguridad de los formularios. Para los usuarios, los formularios de varios fotogramas pueden generar una mala experiencia de autocompletado, como en el siguiente ejemplo:
La política de mismo origen es un modelo de referencia sólido para el autocompletado entre fotogramas, pero no proporciona un nivel de detalle suficiente para que el navegador diferencie entre marcos confiables 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 autocompletado compartido, Chrome completará correctamente el número de tarjeta de crédito de origen cruzado:
<!-- 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 brindar una mejor experiencia de autocompletado para el usuario:
Probar la función de autocompletado compartido de forma local
Puedes probar el autocompletado compartido para un solo usuario en Chrome 93.0.4577.0 y versiones posteriores en computadoras de escritorio y dispositivos móviles si configuras marcas desde la línea de comandos.
--flag-switches-begin --enable-features=AutofillAcrossIframes,AutofillSharedAutofill
Detecta la compatibilidad de 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!');
}
¿Qué sigue?
El autocompletado compartido es una propuesta inicial para agregar una función de autocompletado a la política de permisos. El equipo de Chrome está trabajando con otros proveedores de navegadores para que revisen la propuesta. También se están analizando otras propuestas sobre cómo aumentar la experiencia del usuario para el autocompletado en todos los iframes.
Seguiremos proporcionando actualizaciones a medida que avancemos con esta propuesta. Mientras tanto, si tienes una página de confirmación de compras en la que los campos sensibles de <input> (número de tarjeta de crédito, cvc) están incorporados desde un proveedor externo, comunícate con nosotros. Nos encantaría saber si el autocompletado compartido en distintos iframes podría mejorar potencialmente la experiencia de autocompletado de tus usuarios durante el proceso de confirmación de la compra.
Más información
- Propuesta actual
- Opinión de la TAG de W3C
- Ejemplo de formulario de pago utilizado en esta publicación
- ¿Qué son las funciones experimentales de Chrome?
Foto de Jessica Ruscello en Unsplash.