ブラウザの自動入力

リモートブラウザ分離セッションに認証情報を自動入力

概要

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

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

リモートブラウザ分離レコード

使用できる認証情報

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

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

自動入力に使用するPAMユーザー

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

アプリケーションに関連付けられた共有フォルダ

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

アプリケーションにリンクされたKeeperゲートウェイ

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

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

ブラウザの自動入力設定

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

Amazon 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']"

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

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

[
    {
        "page": "login.microsoftonline.com",
        "username-field": "input[autocomplete='username']"
    },
    {
        "page": "login.live.com",
        "password-field": "input[autocomplete='current-password']"
    }
]
JSON Azure自動入力ターゲットの例

自動送信を行わない方が良い例としては、ページにキャプチャがある場合が挙げれれます。以下はその例です。

- 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コードを見て、autocompletetypenameidなどの識別子を確認します。

例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要素が表示されます。見つからない場合はエラーが表示されます。

最終更新