iframe をまたいだ自動入力の共有: 最初の提案

一部のフォームには iframe にフィールドがあるため、ブラウザの自動入力で問題が発生します。共有自動入力を使用することで、親フレームでクロスオリジンの iframe の信頼性を指定できるため、自動入力のユーザー エクスペリエンスが向上します。

Dominik Mengelt 氏
Dominik Mengelt
Twitter GitHub Mastodon
サム・ダットン

テスト向けに、クロスオリジンの iframe への自動入力を許可する提案を利用できます。この機能により、親フレームは、フィールドを自動入力可能にするフレームを指定できます。これは、支払いサービス プロバイダ（PSP）などのサードパーティの送信元から機密性の高いフィールド（PCI DSS コンプライアンスのため）が読み込まれることが多く、支払いフォームで特に有用です。

次の例では、カード所有者の名前と有効期限はトップレベルのページ（またはメインフレーム）にありますが、クレジット カード番号と確認コードは PSP の iframe 内にあります。

<!-- 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 以降では、コマンドラインからフラグを設定することで、1 人のユーザーに対して共有自動入力をテストできます。

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

検出機能のサポート

次のコードを使用して、shared-autofill プロパティが使用可能かどうかを検出します。

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

次のステップ

共有自動入力は、権限ポリシーに自動入力機能を追加するための最初の提案です。Chrome チームは現在、他のブラウザ ベンダーと協力して、提案の審査を進めています。また、iframe をまたいだ自動入力のユーザー エクスペリエンスを向上させる方法について、さらなる提案も検討中です。

この提案の進捗状況については、引き続きお知らせいたします。それまでの間、機密情報である <input> フィールド（クレジット カード番号、CVC）が埋め込まれている購入手続きページがある場合は、Google にお問い合わせください。iframe 間での自動入力を共有することで、購入手続き中のユーザーの自動入力エクスペリエンスを改善できるかどうか、ぜひお聞かせください。

補足説明

写真撮影: Jessica Ruscello（出典: Unsplash）