[2026/9/16]

[WEB App] CORS Bulk Inspector — ブラウザ直接実行型CORSチェッカー

[WEB App] CORS Bulk Inspector — ブラウザ直接実行型CORSチェッカー

CORS Bulk Diagnostics & Inspector

Web API開発やフロントエンド構築で頻出するCORSポリシー問題を、ブラウザから直接 fetch() を発行することで100%正確に判定・検証できる一括診断ツール。

プロキシサーバーを経由する従来のチェッカーで多発していた「WAFやBotフィルターによる誤判定（偽陰性）」を完全に排除。複数URLのバルクテスト、レスポンスヘッダーのインスペクション、Web Crypto APIを用いたクライアントサイド認証、バックエンド向けのCORS設定コード自動生成機能を備えている。

スクリーンショット

起動画面（3パネルUIレイアウト）

CORS CHECKER — 起動画面

スキャン中（一括診断シーケンス実行）

CORS CHECKER — スキャン中

リザルト画面（ステータス・レイテンシ・ヘッダー解析結果）

CORS CHECKER — リザルト画面

動画（GIF）

CORS CHECKER 動作デモ

特徴

  • ブラウザ直接実行による100%正確な判定:
    プロキシサーバーを介さず、ユーザーのブラウザから直接 fetch(url, { mode: 'cors' }) を発行。閲覧環境そのままの正確なCORS疎通状況を判定。

  • 一括バルクテスト & 応答速度計測:
    複数URL（改行区切り）を一括投入可能。各エンドポイントのCORS許可状態（ALLOWED / BLOCKED）、HTTPステータスコード、レスポンスレイテンシ（ms）を可視化。

  • Web Crypto API によるマスターキー認証:
    クライアントサイドで SHA-256 ハッシュ照合を実行。通常モードのレート制限（300msディレイ / 最大5件）を無効化する開発者向け無制限モードを搭載。

  • CORSヘッダー・インスペクター:
    Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers、Access-Control-Allow-Credentials などの応答ヘッダーを詳細解析。

  • CORS Fix Snippet Generator:
    CORSエラーが発生しているサーバー側の修正コードを自動生成。Express, Cloudflare Workers, Nginx の各種設定スニペットを即座にコピー可能。

  • PROTOCOL.LAIN UI:
    レトロフューチャー＆サイバーパンクテイストをあしらったダークモード3パネルUIレイアウト。

モジュール構成

モジュール名主要機能
BULK DIAGNOSTICS複数URLの一括CORS疎通判定・HTTPステータスおよび応答速度（Latency）計測
RATE LIMIT & MASTER KEYWeb Crypto API (SHA-256) による暗号化キー照合とレート制限解除制御
HEADER INSPECTORレスポンスヘッダー解析（Allow-Origin / Methods / Headers / Credentials 等）
CORS FIX GENERATORバックエンド側CORS許可設定コードの自動作成（Express / Cloudflare Workers / Nginx）
PROTOCOL.LAIN UIレトロフューチャーなサイバーパンク風3パネルUI・ネオンカラー表示

使い方

1. 診断ターゲットURLの入力

左パネルのテキストエリアに、診断したいAPIやWebサイトのURLを改行区切りで入力します。

2. リクエストオプションの設定

HTTPメソッド（GET, POST, OPTIONS 等）を選択し、認証情報を含める場合は Include Credentials にチェックを入れます。

3. 一括診断の実行

RUN DIAGNOSTIC ボタンをクリックすると順次 fetch() リクエストが実行され、中央パネルに結果カード（ALLOWED / BLOCKED、応答時間、HTTPステータス）が生成されます。

4. ヘッダー解析 & 修正スニペットの確認

結果カードを選択すると、右パネルに該当エンドポイントの詳細なCORSヘッダー情報と、サーバー側でCORSを許可するための設定スニペットが表示されます。

技術スタック

  • Astro 5 — Webアプリケーション基盤
  • Vanilla JavaScript (ES6+) — 非同期リクエスト制御・動的DOM描画
  • Fetch API (mode: 'cors') — ブラウザ標準CORS通信
  • Web Crypto API (crypto.subtle) — SHA-256 マスターキーハッシュ検証

更新履歴

  • [2026-09-15]: v1.0 初回公開。
    • ブラウザ直接実行型 CORS 疎通診断エンジン実装
    • 複数URL一括バルクテスト & レイテンシ計測機能
    • Web Crypto API (SHA-256) によるマスターキー認証機能
    • CORSヘッダー解析（Inspector）機能
    • バックエンド別設定スニペット自動生成（Express / Cloudflare Workers / Nginx）
    • PROTOCOL.LAIN サイバーパンク風3パネルUI構築

技術記事

[Astro] #150 CORS Bulk Diagnostics & Inspector — ブラウザ直接実行型CORSチェッカーの実装とフロントエンド完結の設計思想

[Astro] #150 CORS Bulk Diagnostics & Inspector — ブラウザ直接実行型CORSチェッカーの実装とフロントエンド完結の設計思想

Web API開発やフロントエンド構築で頻出するCORSエラーを多角的に診断するブラウザ完結型ツールの開発記録。Proxyを挟まない直接リクエストによる正確なCORS判定、一括バルクテスト、Web Crypto API (SHA-256) を利用したマスターキー機能、Astroで innerHTML による動的描画を行った際にスコープ付きCSSが効かない問題（data-astro-cid）の解決手法を解説。

lain-lab.com