# ブラウザの自動入力 ## 概要 KeeperPAMでは、リモートブラウザ分離 (RBI) セッションに対して認証情報を自動入力することが可能です。認証情報がユーザーに表示されることはなく、KeeperゲートウェイがChromiumセッション内で入力処理を行い、そのセッションがユーザーのボルトに視覚的に投影されます。以下はRBIレコードの一例で、Amazon AWSのログインページで認証情報を自動入力します。

## 使用できる認証情報認証情報を自動入力するには、該当レコードをゲートウェイに関連付けられた共有フォルダに追加する必要があります。この例では、「craigdemouser」というAWSのIDが、Keeperゲートウェイによって管理されている共有フォルダに保存されています。

共有フォルダは、Keeperゲートウェイを保持するアプリケーションと共有されます。

アプリケーションはKeeperゲートウェイに関連付けられています。これにより、ゲートウェイは共有された認証情報にアクセスし、復号化できるようになります。

自動入力を設定するには、レコードのPAM構成セクションにある **\[編集]** をクリックして、自動入力の設定を編集します。リモートブラウザ分離の構成では、どの認証情報を自動入力するかを選択することができます。

セッションを開始すると、AWSコンソールのユーザー名とパスワードがリモートブラウザ分離セッション内で自動入力されます。認証情報はユーザーに表示されることなく、フォームフィールドを確認することもできません。

## 自動入力の対象 KCMで使用される自動入力ルールは、JSONまたはYAML形式のオブジェクトの配列であり、各オブジェクトには少なくとも以下のプロパティを指定します。 * `page`\ 自動入力ルールが適用されるページのURLパターン。このパターンは、ナビゲーション/リソースルールで受け入れられるパターンと同じです。加えて以下から1つ以上のプロパティを指定します。 * `username-field`\ 自動入力されたユーザー名を受け取るべきフィールドに一致するCSSセレクタ。Keeperゲートウェイは、Keeperレコードからユーザー名フィールドの値を挿入します。 * `password-field`\ 自動入力されたパスワードを受け取るべきフィールドに一致するCSSセレクタ。入力される値は接続のパスワードパラメータの値です。 * `totp-code-field`\ 自動入力されたTOTPコードを受け取るべきフィールドに一致するCSSセレクタ。入力される値は接続のTOTPパラメータの値です。 * `submit`\ すべての適用可能なユーザー名/パスワードフィールドが入力された後にクリックされるべき要素のCSSセレクタ。必要な場合のみ指定します (例: 対象のログインページが適切なHTMLを使用していない場合)。省略すると、KCMはユーザーが「Enter」を押したかのようにログインフォームを送信しようとします。 * `cannot-submit`\ 一致する要素が存在する限り、KCMに自動送信を行わないよう指示するCSSセレクタ。以下はユーザー名とパスワードのフィールドがある単一ページのウェブアプリケーションの例となります。 ``` - page: "http://172.31.8.134:8080/login" username-field: "input[name='j_username']" password-field: "input[name='j_password']" ``` 一部のログインフローでは複数のルールが必要になります。例えば、Microsoft Azure Portalのログインフローがその一例です。以下は、Microsoft Azure に必要な自動入力ルールのYAMLの例となります。 ``` - page: "login.microsoftonline.com" username-field: "input[autocomplete='username webauthn']" - page: "login.live.com" password-field: "input[autocomplete='current-password']" ``` 以下は同じもののJSON形式です。 ``` [ { "page": "login.microsoftonline.com", "username-field": "input[autocomplete='username webauthn']" }, { "page": "login.live.com", "password-field": "input[autocomplete='current-password']" } ] ```

自動送信を行わない方が良い例としては、ページにキャプチャがある場合が挙げれれます。以下はその例です。 ``` - page: "https://dash.cloudflare.com/login" username-field: "input[id='email']" password-field: "input[id='password']" cannot-submit: "div[data-testid=challenge-widget-container]" ``` CSSだけでは不十分な、特に複雑なページの場合、代わりにXPath式を使用することができます。そのようなXPath式は、「/」で始めます。 ## フィールド識別リモートブラウザ分離は、JSONまたはYAMLコードで定義された特定のフィールド要素に基づいて認証情報を自動入力します。フォームフィールドのセレクタは、ページの内容を検査し、特定のフィールド要素を見つけることで識別できます。 1. **ページを検査する**: ウェブページを右クリックして **\[検証]** を選択し、デベロッパーツールを開きます。 2. **フィールドを選択する**: 要素セレクタツールを使って識別したいフォームフィールドをクリックします。 3. **属性を確認する**: 強調表示されたHTMLコードを見て、`autocomplete`、`type`、`name`、`id`などの識別子を確認します。 **例1: `autocomplete`** * **HTMLコード**:`` * **説明**: パスワードフィールドは、`autocomplete`属性が`current-password`に設定されていることで識別できます。 **例2: `type`** * **HTMLコード**:`` * **説明**: パスワードフィールドは、`type`属性が`password`に設定されていることで識別できます。 **例3: `name`** * **HTMLコード**:`` * **説明**: パスワードフィールドは、`name`属性が`some_name_xyz`に設定されていることで識別できます。 **例4: `id`** * **HTMLコード**:`` * **説明**: パスワードフィールドは、`id`属性が`some_id_1234`に設定されていることで識別できます。 ### フィールド識別のテスト Chromeブラウザからデベロッパーツールを開き、\[コンソール] タブに移動します。\ フォームフィールドの識別をテストするには、JavaScriptの`document.querySelector()`コマンドを使用します。例として、以下を入力してから「enter」キーを押します。 ``` document.querySelector("input[type='password']") ``` フィールドが見つかった場合はDOM要素が表示されます。見つからない場合はエラーが表示されます。