Некоторые формы имеют поля в iframes, что вызывает проблемы с автозаполнением браузера. С помощью shared-autofill родительский фрейм может определять надежность кросс-источниковых iframes, чтобы поддерживать лучший опыт автозаполнения для пользователя.
Предложение разрешить автозаполнение в кросс-источник iframe доступно для тестирования. С помощью этой функции родительский фрейм может назначать фреймы, поля которых должны быть автозаполняемыми. Это особенно полезно для платежных форм, где очень часто конфиденциальные поля (для соответствия PCI DSS ) загружаются из стороннего источника, например, поставщика платежных услуг (PSP).
В следующем примере имя владельца карты и дата окончания срока действия находятся на странице верхнего уровня (или в главном фрейме), но номер кредитной карты и код проверки находятся в iframe от 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>
Следующая диаграмма представляет структуру формы:
Для торговцев этот дизайн сочетает в себе безопасность и гибкость:
- Кросс-источниковые фреймы iframe изолируют конфиденциальные платежные данные от инфраструктуры продавца, что способствует соблюдению требований PCI DSS .
- Поля формы в разных фреймах можно расположить и оформить в соответствии с внешним видом и стилем веб-сайта продавца.
С точки зрения браузера это означает, что существуют общие и законные случаи использования многофреймовых форм, что поднимает вопросы о модели безопасности для форм. Для пользователей многофреймовые формы могут привести к плохому опыту автозаполнения, как в следующем примере:
Политика одинакового источника является надежной основой для автозаполнения между фреймами, но не обеспечивает достаточной детализации, чтобы браузер мог различать доверенные и ненадежные фреймы для автозаполнения.
Чтобы обеспечить лучший опыт автозаполнения, сохраняя при этом безопасность пользовательских данных, команда Chrome работает над предложением, позволяющим автозаполнение в кросс-источник iframe. Если форма изменена для использования общего автозаполнения, Chrome успешно заполняет номер кредитной карты кросс-источника:
<!-- 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>
Это может улучшить процесс автозаполнения для пользователя:
Попробуйте локальное автозаполнение с общим доступом
Вы можете протестировать функцию общего автозаполнения для одного пользователя в Chrome 93.0.4577.0 и более поздних версиях на настольных компьютерах и мобильных устройствах, установив флаги из командной строки .
--flag-switches-begin --enable-features=AutofillAcrossIframes,AutofillSharedAutofill
Поддержка функции обнаружения
Используйте следующий код, чтобы определить, доступно ли свойство shared-autofill :
if (document.featurePolicy && document.featurePolicy
.features().includes('shared-autofill')) {
console.log('shared-autofill available!');
}
Что дальше?
Shared-autofill — это первоначальное предложение по добавлению функции автозаполнения в политику разрешений . В настоящее время команда Chrome работает с другими поставщиками браузеров, чтобы рассмотреть это предложение. Также обсуждаются дополнительные предложения по улучшению пользовательского опыта для автозаполнения через iframes.
Мы продолжим предоставлять обновления по мере продвижения этого предложения. В то же время, если у вас есть страница оформления заказа, где конфиденциальные поля <input> (номер кредитной карты, cvc) встроены от стороннего поставщика, свяжитесь с нами . Мы бы с удовольствием узнали, может ли совместное автозаполнение через iframe потенциально улучшить опыт автозаполнения для ваших пользователей во время процесса оформления заказа.
Узнать больше
- Текущее предложение
- Обзор W3C TAG
- Пример платежной формы, использованной в этом посте
- Что такое флаги Chrome?
Фото Джессики Расцелло на Unsplash .