Zenn
🔒

PostmanでCSRFトークンを使う時はPre-request Scriptが便利だった話

2024/04/20に公開
CSRF
Postman
tech

PostmanでAPIの実装とドキュメント作成を行っていると、CSRFトークンをヘッダーに設定する必要がある場面があると思います。
その際に、Pre-request Scriptを使うと毎回手動でセットする必要がなく、便利だったので、その方法を紹介します。

TL;DR

コレクションのPre-request Scriptに以下のスクリプトを記述することで、CSRFトークンを自動的に環境変数に設定し、その値をヘッダーにセットするという話です。

// CSRFトークン取得用のエンドポイントからトークンを取得
// この場合は環境変数からURLとポートを取得して組み立てている
const url = `${pm.environment.get('APP_URL')}:${pm.environment.get('APP_PORT')}/auth/csrf`;

// CSRFトークン取得のリクエストを送信
pm.sendRequest({
    url: url,
    method: 'GET'
}, (err, res) => {
    if (err) {
        console.log('Error fetching CSRF token:', err);
    }

    const csrfToken = res.json().csrfToken; // ここはレスポンスの形式の応じて設定
    pm.environment.set('csrf_token', csrfToken); // Postmanの環境変数を更新
});

Pre-request Scriptとは？

Postmanのリクエストを送信する前に実行されるスクリプトです。
エンドポイント単位でも、コレクション単位でも設定できます。


エンドポイントごとの設定箇所


コレクションごとの設定箇所

設定するスクリプトの内容

以下のスクリプトをPre-request Scriptに記述することで、CSRFトークンを取得して環境変数に設定してしまいます。
この場合、csrf_tokenという環境変数にトークンを設定しています。
設定したら保存することを忘れずに。

// CSRFトークン取得用のエンドポイントからトークンを取得
// この場合は環境変数からURLとポートを取得して組み立てている
const url = `${pm.environment.get('APP_URL')}:${pm.environment.get('APP_PORT')}/auth/csrf`;

// CSRFトークン取得のリクエストを送信
pm.sendRequest({
    url: url,
    method: 'GET'
}, (err, res) => {
    if (err) {
        console.log('Error fetching CSRF token:', err);
    }

    const csrfToken = res.json().csrfToken; // ここはレスポンスの形式の応じて設定
    pm.environment.set('csrf_token', csrfToken); // Postmanの環境変数を更新
});

リクエストのヘッダーにCSRFトークンを設定する

最後に、CSRFトークンが必要なリクエスト（POST, PUT, DELETEなど）のヘッダーに環境変数に設定したトークンをセットするように設定しておきます。


ヘッダーの設定箇所

まとめ

Pre-request Scriptは便利ですね。ほかにも便利な使い方があればぜひコメント欄で教えてください。

Discussion