【Puppeteer実用講座】Puppeteer操作だけでreCAPTCHA v2は突破したときの話〜クッキー活用編


2022/05/06

前の回で、「ヘッドレスブラウザからのpuppeteer操作だけだと、クイズ形式の画像認証が突破できない」という結論を得ました。

今回はreCAPTCHA v2だけでなく他の色々な認証方式のプロテクトを回避できる汎用な方法として、
「保存済みクッキー」をPuppeteerで使ってみます。


ログイン後にCookieを保存する拡張機能を利用する

探すと各ブラウザには使用済みのCookieをJSON形式で保存してくれるような便利な拡張機能が存在します。

Google Chromeブラウザの場合は、
EditThisCookieという拡張機能を使われている方が多いようですので、こちらを手元のChromeブラウザへ追加しておきます。

EditThisCookieを追加後に、そこからお目当てのサイトに先にログインを済ませておきます。

ブラウザ右上「EditThisCookie」のアイコンをクリックしてみます。

合同会社タコスキングダム|蛸壺の技術ブログ

すると、ログインしたサイトのCookie情報が表示されているのが分かります。

合同会社タコスキングダム|蛸壺の技術ブログ

このクッキーをJSON形式で保存するには、下のように
エクスポートボタンを押して、クリップボードにJSON文字列を取得するだけです。

合同会社タコスキングダム|蛸壺の技術ブログ

後は適当なエディタからjsonファイルを作成して、先程のクリップボードの内容をコピペします。

ちなみにクッキーとは以下のようなJSON形式のデータオブジェクト配列で表される構造データです。

            
            [
    {
        "domain": ".***.com",
        "expirationDate": 1714874950,
        "hostOnly": false,
        "httpOnly": false,
        "name": "_dga",
        "path": "/",
        "sameSite": "unspecified",
        "secure": false,
        "session": false,
        "storeId": "0",
        "value": "GA1.2.11111111.111111111",
        "id": 1
    },
    {
        "domain": ".***.com",
        "expirationDate": 1651889350,
        "hostOnly": false,
        "httpOnly": false,
        "name": "_dga_gid",
        "path": "/",
        "sameSite": "unspecified",
        "secure": false,
        "session": false,
        "storeId": "0",
        "value": "GA1.2.22222222.22222222",
        "id": 2
    },
    //....中略
    {
        "domain": "****.***.com",
        "expirationDate": 1652020150.803603,
        "hostOnly": true,
        "httpOnly": false,
        "name": "XSRF-TOKEN",
        "path": "/",
        "sameSite": "no_restriction",
        "secure": true,
        "session": false,
        "storeId": "0",
        "value": "e..............D",
        "id": 13
    }
]
        
ここらへんはログインするサイトによってもブラウザに付与されるクッキーが異なるので、よく確認してください。

このクッキーをPuppeteerプログラムで使えるような何処かのフォルダに保存しておきます。


Puppeteerへの実装

では先程保存しておいたクッキーをpuppeteerのプロジェクトのルートフォルダにコピーして、このjsonファイルを読み込んで使ってみます。

            
            import { readFile } from 'fs/promises';
import puppeteer from 'puppeteer';

const browser: puppeteer.Browser = await puppeteer.launch({headless: true});
const page: puppeteer.Page = await browser.newPage();

try {
    //👇保存したクッキーを読み込む
    const cookieStr = await readFile('./cookie.json', 'utf-8');
    const cookies = JSON.parse(cookieStr);

    //👇ページアクセスより先にPupperteerページにクッキーをセットする
    await page.setCookie(...cookies as any[]);

    //👇ログイン先のトップページ等に移動
    await page.goto('https://某D●M証券/mypage');


    //...ログイン済みのページを色々操作


    //👇とりあえずページをキャプチャ
    await page.screenshot({path: './capture_after_login.png'});
}
catch (error) { console.log(error); }
finally { browser.close(); }
        

これを実行すると、

合同会社タコスキングダム|蛸壺の技術ブログ

というように既にログイン認証済みのセッションを利用してスムーズにページにアクセスできました。めでたしめでたし。

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。