CSPヘッダー生成ツール

1. 各ディレクティブ左端のトグルで有効・無効を切り替えます
2. テキスト入力欄にスペース区切りで許可するオリジンや値を入力します
3. よく使う値はプリセットボタンをクリックすると自動追加されます
4. 生成されたCSPヘッダー文字列を「クリップボードにコピー」で取得します
5. 既存のCSPヘッダーを「インポート」欄に貼り付けると設定を取り込めます

コアロジックはCSP文字列のビルドとパースのみ。セミコロン区切りで各ディレクティブを結合・分解します。 外部ライブラリ不要でそのままコピーしてご利用いただけます。

export function buildCspHeader(config: Record<string, string[]>): string {
  return Object.entries(config)
    .filter(([, values]) => values.length > 0)
    .map(([directive, values]) => `${directive} ${values.join(' ')}`)
    .join('; ')
}

export function parseCspHeader(header: string): Record<string, string[]> {
  const result: Record<string, string[]> = {}
  const directives = header.split(';').map(d => d.trim()).filter(Boolean)
  for (const directive of directives) {
    const parts = directive.split(/\s+/)
    const name = parts[0].toLowerCase()
    const values = parts.slice(1)
    result[name] = values
  }
  return result
}

このツールのソースコード（テストコードを含む）はGitHubで公開しています。 MITライセンスで自由に利用・改変できます。