# ブラウザの自動入力

## 概要 <a href="#overview" id="overview"></a>

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

以下はRBIレコードの一例で、Amazon AWSのログインページで認証情報を自動入力します。

<figure><img src="/files/CpumSX9nAEsbyZ7h6VEq" alt=""><figcaption><p>リモートブラウザ分離レコード</p></figcaption></figure>

### 使用できる認証情報 <a href="#eligible-credentials" id="eligible-credentials"></a>

認証情報を自動入力するには、該当レコードをゲートウェイに関連付けられた共有フォルダに追加する必要があります。

この例では、「craigdemouser」というAWSのIDが、Keeperゲートウェイによって管理されている共有フォルダに保存されています。

<figure><img src="/files/6MZq0jvCfI59M92Lcrmq" alt=""><figcaption><p>自動入力に使用するPAMユーザー</p></figcaption></figure>

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

<figure><img src="/files/CGqEnN9iaZfadp0sS1HB" alt=""><figcaption><p>アプリケーションに関連付けられた共有フォルダ</p></figcaption></figure>

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

<figure><img src="/files/WY576WR7K5V5L10iaRpj" alt=""><figcaption><p>アプリケーションにリンクされたKeeperゲートウェイ</p></figcaption></figure>

自動入力を設定するには、レコードのPAM設定セクションで **\[編集]** をクリックし、自動入力の設定を編集します。

リモートブラウザ分離の構成では、どの認証情報を自動入力するかを選択することができます。

<figure><img src="/files/WqtbblOY1rHQyqx3cdj3" alt=""><figcaption><p>ブラウザの自動入力設定</p></figcaption></figure>

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

<figure><img src="/files/KZ2ooBgbFpeBo9NUToZO" alt=""><figcaption><p>Amazon AWS を使用した自動入力の例</p></figcaption></figure>

## 自動入力の対象 <a href="#autofill-targets" id="autofill-targets"></a>

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セレクタ。

以下はユーザー名とパスワードのフィールドがある単一ページのウェブアプリケーションの例となります。

```yaml
- 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の例となります。

```yaml
- page: "login.microsoftonline.com"
  username-field: "input[autocomplete='username webauthn']"

- page: "login.live.com"
  password-field: "input[autocomplete='current-password']"
  submit: "input[id='idSIButton9']"
```

以下は同じもののJSON形式です。

```json
[
    {
        "page": "login.microsoftonline.com",
        "username-field": "input[autocomplete='username webauthn']"
    },
    {
        "page": "login.live.com",
        "password-field": "input[autocomplete='current-password']",
        "submit": "input[id='idSIButton9']"
    }
]
```

<figure><img src="/files/R2KfP119UhuyRvoI9IH9" alt=""><figcaption><p>JSON Azure自動入力ターゲットの例</p></figcaption></figure>

Keeperによる自動送信を避けたい例としてよくあるのは、ページにCAPTCHAが表示されている場合です。以下はその例です。

```yaml
- 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式は、先頭を `/` とする必要があります。

### フィールド識別 <a href="#field-identification" id="field-identification"></a>

リモートブラウザ分離は、JSONまたはYAMLコードで定義された特定のフィールド要素に基づいて認証情報を自動入力します。フォームフィールドのセレクタは、ページの内容を検査し、特定のフィールド要素を見つけることで識別できます。

1. **ページを検査する**: ウェブページを右クリックして **\[検証]** を選択し、デベロッパーツールを開きます。
2. **フィールドを選択する**: 要素セレクタツールを使って識別したいフォームフィールドをクリックします。
3. **属性を確認する**: 強調表示されたHTMLコードを見て、`autocomplete`、`type`、`name`、`id` などの識別子を確認します。

**例1: `autocomplete`**

* **HTMLコード**:`<input type="password" autocomplete="current-password" ...>`
* **説明**: パスワードフィールドは、`autocomplete` 属性が `current-password` に設定されていることで識別できます。

**例2: `type`**

* **HTMLコード**:`<input type="password" ...>`
* **説明**: パスワードフィールドは、`type` 属性が `password` に設定されていることで識別できます。

**例3: `name`**

* **HTMLコード**:`<input type="password" name="some_name_xyz" ...>`
* **説明**: パスワードフィールドは、`name` 属性が `some_name_xyz` に設定されていることで識別できます。

**例4: `id`**

* **HTMLコード**:`<input type="password" id="some_id_1234" ...>`
* **説明**: パスワードフィールドは、`id` 属性が `some_id_1234` に設定されていることで識別できます。

**フィールド識別のテスト**

Chromeブラウザでデベロッパーツールを開き、**\[コンソール]** タブに移動します。\
フォームフィールドの識別をテストするには、JavaScriptの `document.querySelector()` を使用します。

例として、以下を入力してから **\[Enter]** キーを押します。

```
document.querySelector("input[type='password']")
```

フィールドが見つかった場合はDOM要素が表示されます。見つからない場合はエラーが表示されます。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.keeper.io/keeperpam/jp/privileged-access-manager/remote-browser-isolation/setting-up-rbi/browser-autofill.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.