フォームのAJAXポストリクエストでCSRFトークンを渡す方法は？

Question

私はScala Playを使用しています！ 2.6フレームワークですが、それは問題ではないかもしれません。私は彼らのJavascriptルーティングを使用しています - それは問題なく動作しているようですが、問題があります。

<form method="post" id="myForm" action="someURL"> 

<input name="csrfToken" value="5965f0d244b7d32b334eff840...etc" type="hidden"> 
    <input type="text" id="sometext"> 
    <button type="submit"> Submit! </button> 

</form> 

そして、ここではおおよそですが、私のAJAX：

$(document).on('submit', '#myForm', function (event) { 

event.preventDefault(); 
    var data = { 
    textvalue: $('#sometext').val() 
    } 
var route = jsRoutes.controllers.DashboardController.postNewProject() 
$.ajax({ 
    url: route.url, 
    type: route.type, 
    data : JSON.stringify(data), 
    contentType : 'application/json', 
    success: function (data) { ...  }, 
    error: function (data) { ... } 
     }) 

}); 

しかし、私はこれを投稿する場合、私は戻って不正な応答を取得しています私はCSRFトークンを使用して描画されたときは、これを生産するフォームを、持っていますIntelliJのコンソールでCSRFチェックが失敗していると私に伝えています。要求にCSRFトークンをどのように渡しますか？

Answer 1

これを数時間戦い、Playの頻繁に欠けている文脈解読をsubjectで解読しようとしたら、私はそれを手に入れました。そのドキュメントからそう

、：

のみをチェックし、ヘッダー内のクッキーと 要求を再生する、非ブラウザ要求のためのシンプルな保護を可能にします。 AJAXでリクエストする場合は、HTMLページにCSRFトークンを置き、をCsrf-Tokenヘッダーを使用して要求に追加できます。

コードや例はありません。ありがとうPlay。非常に説明的。とにかく、ここで方法は次のとおりです。で

ごview.html.formTemplateあなたはのIntelliJで書くかもしれません：

@() 
<form method="post" id="myForm" action="someURL"> 

@helper.CSRF.formField <!-- This auto-generates a token for you --> 
    <input type="text" id="sometext"> 
    <button type="submit"> Submit! </button> 

</form> 

をし、クライアントに配信する場合、これは次のようにレンダリングされます：[OK]を、ほとんどそこ

<form method="post" id="myForm" action="someURL"> 

<input name="csrfToken" value="5965f0d244b7d32b334eff840...etc" type="hidden"> 
    <input type="text" id="sometext"> 
    <button type="submit"> Submit! </button> 

</form> 

、今AJAX呼び出しを作成する必要があります。私は別のmain.jsファイルにすべて私のものを持っていますが、あなたが望むならば、これをあなたのview.html.formTemplateに入れることもできます。このラインでは

$(document).on('submit', '#myForm', function (event) { 

event.preventDefault(); 
    var data = { 
    myTextToPass: $('#sometext').val() 
    } 
// LOOK AT ME! BETWEEN HERE AND 
var token = $('input[name="csrfToken"]').attr('value') 
    $.ajaxSetup({ 
     beforeSend: function(xhr) { 
      xhr.setRequestHeader('Csrf-Token', token); 
     } 
    }); 
// HERE 
var route = jsRoutes.controllers.DashboardController.postNewProject() 
$.ajax({ 
    url: route.url, 
    type: route.type, 
    data : JSON.stringify(data), 
    contentType : 'application/json', 
    success: function (data) { ...  }, 
    error: function (data) { ... } 
     }) 

}); 

： var token = $('input[name="csrfToken"]').attr('value') あなたのフォームフィールドで生成されたCSRFトークンの自動車を摘採し、あなたのJavascriptで使用するVARにその値をつかんでいます。

AJAXはここにある全ての他の重要なチャンク：$.ajaxSetupを使用して

$.ajaxSetup({ 
      beforeSend: function(xhr) { 
       xhr.setRequestHeader('Csrf-Token', token); 
      } 
     }); 

は、あなたはヘッダに何を設定することができます。これは、ドキュメントから推測する必要があります。

Csrf-Tokenヘッダーを使用してリクエストに追加します。

幸運！これが明らかな場合はお知らせください。

Answer 2

Csrf-Tokenヘッダーを使用してリクエストに追加します。

ありがとうございましたNateH06ヘッダー名！私はAjaxの関数呼び出しと「削除」ボタンのCSRFトークンを送信しようとしていたと私は次のように貼り付けた。

@import helper._ 
.... 
<button id="deleteBookBtn" class="btn btn-danger" 
     data-csrf-name="@helper.CSRF.getToken.name" 
     data-csrf-value="@helper.CSRF.getToken.value" 
     data-delete-url="@routes.BooksController.destroy(book.id)" 
     data-redirect-url="@routes.HomeController.index()">Delete</button> 

は私が原因CSPのonclick()イベント内でオンラインJSを追加することができませんでしたプレイ2.6にも設定されています。

「default-src 'self'」のContent Security Policyディレクティブに違反しているため、インラインイベントハンドラの実行を拒否しました。

そして、JSファイルに：

function sendDeleteRequest(event) { 
    url = event.target.getAttribute("data-delete-url") 
    redirect = event.target.getAttribute("data-redirect-url") 
    csrfTokenName = event.target.getAttribute("data-csrf-name") 
    csrfTokenValue = event.target.getAttribute("data-csrf-value") 
    $.ajax({ 
    url: url, 
    method: "DELETE", 
    beforeSend: function(request) { 
     //'Csrf-Token' is the expected header name, not $csrfTokenName 
     request.setRequestHeader(/*csrfTokenName*/'Csrf-Token', csrfTokenValue); 
    }, 
    success: function() { 
     window.location = redirect; 
    }, 
    error: function() { 
     window.location.reload(); 
    } 
    }) 
} 

var deleteBookBtn = document.getElementById("deleteBookBtn"); 
if(deleteBookBtn) { 
    deleteBookBtn.addEventListener("click", sendDeleteRequest); 
}