CSRF 対策

このミドルウェアは、Origin と Sec-Fetch-Site ヘッダーの両方を確認して CSRF 攻撃を防ぎます。いずれかの検証に通ればリクエストを許可します。

このミドルウェアは、次の条件を満たすリクエストだけを検証します。

• 安全でない HTTP メソッドを使う（GET、HEAD、OPTIONS 以外）
• HTML フォームで送信可能なコンテンツタイプを持つ（application/x-www-form-urlencoded、multipart/form-data、text/plain）

Origin ヘッダーを送信しない古いブラウザーや、リバースプロキシがこれらのヘッダーを削除する環境では、正しく動作しない場合があります。そのような環境では、他の CSRF トークン方式を使用してください。

インポート

import { Hono } from 'hono'
import { csrf } from 'hono/csrf'

使い方

const app = new Hono()

// Default: both origin and sec-fetch-site validation
app.use(csrf())

// Allow specific origins
app.use(csrf({ origin: 'https://myapp.example.com' }))

// Allow multiple origins
app.use(
  csrf({
    origin: [
      'https://myapp.example.com',
      'https://development.myapp.example.com',
    ],
  })
)

// Allow specific sec-fetch-site values
app.use(csrf({ secFetchSite: 'same-origin' }))
app.use(csrf({ secFetchSite: ['same-origin', 'none'] }))

// Dynamic origin validation
// It is strongly recommended that the protocol be verified to ensure a match to `$`.
// You should *never* do a forward match.
app.use(
  '*',
  csrf({
    origin: (origin) =>
      /https:\/\/(\w+\.)?myapp\.example\.com$/.test(origin),
  })
)

// Dynamic sec-fetch-site validation
app.use(
  csrf({
    secFetchSite: (secFetchSite, c) => {
      // Always allow same-origin
      if (secFetchSite === 'same-origin') return true
      // Allow cross-site for webhook endpoints
      if (
        secFetchSite === 'cross-site' &&
        c.req.path.startsWith('/webhook/')
      ) {
        return true
      }
      return false
    },
  })
)

オプション

optional origin: string | string[] | Function

CSRF 対策で許可するオリジンを指定します。

• string：許可する単一のオリジン（例：'https://example.com'）
• string[]：許可するオリジンの配列
• Function：柔軟なオリジン検証や検証を省略するロジックのための、カスタムハンドラー (origin: string, context: Context) => boolean

デフォルト：リクエスト URL と同じオリジンのみ

関数ハンドラーは、リクエストの Origin ヘッダー値とリクエストコンテキストを受け取ります。パス、ヘッダー、その他のコンテキストデータなどのリクエスト属性に基づく動的な検証が可能です。

optional secFetchSite: string | string[] | Function

Fetch Metadata による CSRF 対策で許可する Sec-Fetch-Site ヘッダー値を指定します。

• string：許可する単一の値（例：'same-origin'）
• string[]：許可する値の配列（例：['same-origin', 'none']）
• Function：柔軟な検証のためのカスタムハンドラー (secFetchSite: string, context: Context) => boolean

デフォルト：'same-origin' のみ許可

標準の Sec-Fetch-Site の値：

• same-origin：同一オリジンからのリクエスト
• same-site：同一サイト（異なるサブドメイン）からのリクエスト
• cross-site：異なるサイトからのリクエスト
• none：Web ページ以外からのリクエスト（ブラウザーのアドレスバーやブックマークなど）

関数ハンドラーは、リクエストの Sec-Fetch-Site ヘッダー値とリクエストコンテキストを受け取り、リクエスト属性に基づいて動的に検証できます。