search

kannna5296 / myblog-backend

0 stars 0 forks source link

SPAでのSCRFトークン周り勉強 #2

Open kannna5296 opened 3 months ago

kannna5296 commented 3 months ago

CSRFTokenはどこが発行するんすか？

ChatGPT: ChatGPT CSRFトークンは、Spring Securityが自動的に生成して管理します。通常、以下のような流れでCSRFトークンが発行されます。

  1. CSRFトークンの生成 Spring Securityは、最初のリクエストまたはセッションが生成されたときにCSRFトークンを自動的に生成します。このトークンは、サーバーがクライアントに送信するHTMLフォームや、APIリクエストで使用されることが一般的です。

  2. CSRFトークンのクライアントへの提供 トークンは、HTMLテンプレートエンジン（Thymeleafなど）を使用している場合は、自動的にフォームに埋め込まれます。また、JavaScriptを使って動的にトークンを取得することもできます。

例えば、Thymeleafを使用している場合、フォームには自動的に以下のような隠しフィールドが追加されます。

html コードをコピーする

  1. CSRFトークンの取得方法 Metaタグを使用して取得: Springは通常、CSRFトークンをHTMLのmetaタグとして提供します。これをJavaScriptで取得して、Ajaxリクエストに使用できます。

html コードをコピーする

JavaScriptでこのトークンを取得して、リクエストに追加する例:

javascript コードをコピーする const csrfToken = document.querySelector('meta[name="_csrf"]').getAttribute('content'); const csrfHeader = document.querySelector('meta[name="_csrf_header"]').getAttribute('content');

axios.post('/api/post', data, { headers: { [csrfHeader]: csrfToken, // ヘッダーにCSRFトークンを追加 'Authorization': Bearer ${jwtToken} } }); カスタムエンドポイント: 特定のエンドポイントにアクセスすると、サーバーはCSRFトークンを返すこともできます。この方法は、フロントエンドアプリケーションで動的にトークンを取得したい場合に役立ちます。

  1. リクエストにCSRFトークンを添付 クライアント側で取得したCSRFトークンを、次のリクエスト時にヘッダーまたはフォームフィールドとして送信します。

javascript コードをコピーする axios.post('/api/post', data, { headers: { 'X-CSRF-TOKEN': csrfToken, // ここでCSRFトークンをヘッダーに追加 'Authorization': Bearer ${jwtToken} } });

  1. サーバー側でのCSRFトークン検証 サーバー側では、受信したリクエストに含まれるCSRFトークンを検証し、一致しない場合はリクエストを拒否します。

このプロセスにより、Spring Securityはクライアントとサーバー間のリクエストがクロスサイトリクエストフォージェリ（CSRF）攻撃から保護されていることを確認します。