0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@fuso-mobility(株式会社扶桑モビリティ)

AIにパスワードを渡さずにWebログインを自動化する：Playwrightとブラウザ保存機能のセキュアな連携術

0
Posted at

はじめに

最近、AI にブラウザを操作してもらって「Webサイトから定期的にデータを集める」「定例の管理作業を自動化する」といった活用が身近になってきました。

しかし、ログインが必要なWebサイトをAIに任せようとすると、「AIにログインパスワードを教えるのが怖い」「チャットのログにパスワードが残ってしまう」という大きな問題にぶつかります。

「AIにパスワード文字列を一切見せず、ブラウザに保存されたパスワードを使って、安全に自動ログインさせることはできないか？」

本記事では、この課題を解決するために「デスクトップにAI専用ブラウザのショートカットを用意し、人間が初回だけパスワードを保存しておく」という、誰でも実践できる安全でシンプルな方法を解説します。

  • この記事で解決できること:
    • AI のチャット履歴や画面ログにパスワードを一切残さず、安全に自動ログインさせる
    • 普段使っているブラウザと競合させず、AI専用の環境でパスワードを管理する
    • 「パスワード保存」は人間が手動で行い、「日々のログイン・巡回」はAIに完全自動で任せる運用ができる
  • 対象読者:
    • AI にブラウザ操作（Playwright 等）を任せてみたいけれど、パスワード管理の安全性が心配な方
    • 難しい認証サーバーや有償ツールを入れず、ブラウザ標準の機能で手軽に安全自動化したい方

なぜAIにパスワードを直接教えてはいけないのか？

通常、自動化ツールでログインさせようとすると、AIにパスワードを渡してフォームに入力させがちです。

// 危険なやり方：AIにパスワード文字列を渡して打ち込ませる
await page.fill('input[type="password"]', "私の秘密のパスワード");

しかし、これを行うと以下のリスクがあります：

  1. チャットログや実行履歴にパスワードが丸見えで残る: AIとのやり取り履歴やツールの実行ログはローカルに保存されることが多く、そこにパスワードの平文がずっと残ってしまいます。
  2. AIの誤動作や漏洩リスク: AIが予期せぬ外部サイトへ誤って送信してしまったり、プロンプトインジェクション等でパスワードを聞き出されてしまう危険があります。

そのため、「パスワードの文字そのものはAIに見せない・触らせない」仕組みを作ることが重要です。

解決策：デスクトップに「AI専用ブラウザ」を用意する

普段人間が使っているブラウザ（EdgeやChrome）には、安全にパスワードを暗号化して保存する機能（パスワードマネージャー）が最初から備わっています。

これを利用して、「AI専用のブラウザ環境（プロファイル）を1つ作り、デスクトップのショートカットから人間が手動でパスワードを保存しておく」のが最もシンプルで安全なアプローチです。

【人間がやること（初回1回だけ）】
1. デスクトップの「AI専用ブラウザ」ショートカットを開く
2. 対象サイトで手動ログインし、ブラウザの「パスワードを保存」を押す
   （※ AIにはパスワードを教えない！）

【AIがやること（日々の自動化）】
1. AIが専用ブラウザに外から接続する
2. ログイン画面を開き、入力欄をクリック
3. ブラウザが保存済みパスワードを自動入力（オートフィル）
4. ログイン完了！パスワードの文字はAIのログに一切出ない

ステップ1：デスクトップに「AI専用ブラウザ」のショートカットを作成する

普段使いのブラウザと履歴やパスワードが混ざらないよう、専用の保管場所（フォルダ）を指定して起動するショートカットをデスクトップに作成します。

PowerShellスクリプトで一発作成

以下のスクリプトを実行すると、デスクトップに「Edge (AI自動化専用)」というショートカットが作成されます。

# Create-AIShortcut.ps1
$WshShell = New-Object -ComObject WScript.Shell
$desktop = [Environment]::GetFolderPath("Desktop")
$shortcutPath = Join-Path $desktop "Edge (AI自動化専用).lnk"

# 専用の保存先フォルダ
$profileDir = "$env:LOCALAPPDATA\AI-Edge-Profile"

$shortcut = $WshShell.CreateShortcut($shortcutPath)
$shortcut.TargetPath = "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe"
# リモート接続ポート(9222)と、個人アカウントの勝手な同期を防ぐフラグを指定
$shortcut.Arguments = "--remote-debugging-port=9222 --user-data-dir=`"$profileDir`" --disable-sync --disable-features=msImplicitSignIn --no-first-run"
$shortcut.Description = "AI自動化用 Microsoft Edge"
$shortcut.IconLocation = "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe,0"
$shortcut.Save()

Write-Host "デスクトップにショートカットを作成しました！" -ForegroundColor Green

普段のブラウザと同時に開ける！
専用の保存先（AI-Edge-Profile）を分けているため、普段お使いのEdgeを開いたままでも、同時に起動して共存させることができます。

ステップ2：手動でパスワードを保存する（初回のみ）

ショートカットができたら、AIに操作させたいWebサイトのログイン情報を人間が手動で保存します。

  1. ショートカットを起動:
    デスクトップにできた「Edge (AI自動化専用)」をダブルクリックして開きます。
  2. Microsoftアカウントが紐づいていないことを確認:
    アドレスバーに edge://settings/profiles と入力し、個人アカウントでサインインされていたら「サインアウト（同期オフ）」にして、ローカルプロファイル（プロファイル1）の状態にしておきます。
    • ※ ローカルプロファイルでもパスワード保存機能は普通に使えます。
  3. Webサイトにログインしてパスワードを保存:
    AIに操作させたいサイト（例: 会員ページや管理画面）を開き、IDとパスワードを手動入力してログインします。
  4. 「パスワードを保存しますか？」で [保存] をクリック:
    画面右上に保存確認ポップアップが出たら、[保存] を押します。

これで準備完了です！ブラウザは開いたままでも、閉じてしまっても問題ありません。

ステップ3：AIに自動ログインさせる（Playwright連携）

準備ができたら、AI（または自動化プログラム）から専用ブラウザに接続してログインさせます。

AI側はパスワード欄をクリックするだけで、ブラウザが自動的にパスワードを流し込んでくれます。

実装コード（Python例）

import time
from playwright.sync_api import sync_playwright

def login_with_browser_autofill(url: str, submit_selector: str):
    with sync_playwright() as p:
        # 1. 起動しているAI専用ブラウザに接続（ポート 9222）
        browser = p.chromium.connect_over_cdp('http://127.0.0.1:9222')
        context = browser.contexts[0]
        page = context.pages[0] if context.pages else context.new_page()

        # 2. ログイン画面を開く
        page.goto(url, wait_until='domcontentloaded')

        # 3. パスワード欄をクリック（ブラウザの自動入力が発火）
        pwd = page.locator('input[type="password"]').first
        pwd.wait_for(state='visible', timeout=10000)
        pwd.click()
        page.keyboard.press("ArrowDown")  # 候補選択用

        # 4. パスワードが入るのを待つ（AIには中身は見えない）
        page.wait_for_function(
            """() => {
                const el = document.querySelector('input[type="password"]');
                return el && el.value && el.value.length > 0;
            }""",
            timeout=10000
        )

        # 5. モダンなWebサイト（ReactやVue等）向けの入力イベント送出
        page.evaluate(
            """() => {
                const el = document.querySelector('input[type="password"]');
                if (el) {
                    el.dispatchEvent(new Event('input', { bubbles: true }));
                    el.dispatchEvent(new Event('change', { bubbles: true }));
                }
            }"""
        )

        # 6. 送信ボタンをクリックしてログイン完了
        page.click(submit_selector)
        page.wait_for_load_state('domcontentloaded')
        print("ログイン成功！パスワード文字列はログに一切出ていません。")

        browser.close()

TypeScript (Node.js) の場合も同様

import { chromium } from 'playwright';

// ポート9222に合流してパスワード欄をクリックするだけ
const browser = await chromium.connectOverCDP('http://127.0.0.1:9222');
const page = browser.contexts()[0].pages()[0];

await page.goto('https://example.com/login');
await page.click('input[type="password"]');

// 自動入力後に送信ボタンを押す
await page.click('button[type="submit"]');

この方法の大きなメリット

  1. パスワードがどこにも漏れない:
    パスワードの文字はブラウザの暗号化領域（OS標準の保護）に保存されており、AIのプロンプト・チャットログ・コマンド履歴には一切出力されません。
  2. 手動でいつでもメンテできる:
    パスワードを変更したい時や新しいサイトを追加したい時は、デスクトップのアイコンをダブルクリックして普通にブラウザとして開いてログイン・保存するだけで済みます。
  3. 日常のブラウザを邪魔しない:
    専用のプロファイルに分かれているため、自分が普段見ているWebサイトの履歴やお気に入りが混ざることもありません。

まとめ

  • AIにパスワードを教える必要はない: チャットにパスワードを打ち込むのはセキュリティ上とても危険です。
  • ブラウザのパスワード保存を活用する: 普段使っているブラウザのパスワード保存機能を使えば、安全かつ簡単にログインできます。
  • デスクトップショートカットで管理が劇的にラクになる: 専用プロファイルのショートカットを1つ置いておくだけで、人間による事前保存とAIによる自動実行をきれいに分担できます。

安全でストレスのないAIブラウザ自動化の環境づくりに、ぜひ試してみてください。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?