FormDataと共にAntiForgeryToken（CSRF）をjquery ajax経由で送信する方法

Question

だから、POSTファイルをアップロードし、AJAX経由でAntiForgeryTokenと一緒にアップロードします。私は

偽造防止トークンを復号化することができませんでしたを取得

ビュー

@using (Html.BeginForm("Upload", "RX", FormMethod.Post, new {id = "frmRXUpload", enctype = "multipart/form-data"})) 
{ 
    @Html.AntiForgeryToken() 
    @Html.TextBoxFor(m => m.RXFile, new {.type = "file"}) 
    ...rest of code here 
} 

<script> 
    $(document).ready(function(){ 
     $('#btnRXUpload').click(function() { 
      var form = $('#frmRXUpload') 

      if (form.valid()) { 
       var formData = new FormData(form); 
       formData.append('files', $('#frmRXUpload input[type="file"]')[0].files[0]); 
       formData.append('__RequestVerificationToken', fnGetToken()); 

       $.ajax({ 
        type: 'POST', 
        url: '/RX/Upload', 
        data: formData, 
        contentType: false, 
        processData: false 
       }) 
      } 
     }) 
    }) 
</script> 

コントローラ

[HttpPost] 
[ValidateAntiForgeryToken] 
public ActionResult Upload() 
{ 
    //rest of code here 
} 

：ここに私のコードです。このアプリケーションがWebファームまたはクラスタによってホストされている場合

error via fiddler。どのようにこの問題を解決するための任意のアイデア？

私は答えを見つけ：

<script> 
     $(document).ready(function(){ 
      $('#btnRXUpload').click(function() { 
       var form = $('#frmRXUpload') 

       if (form.valid()) { 
        var formData = new FormData(form.get(0)); //add .get(0) 
        formData.append('files', $('#frmRXUpload input[type="file"]')[0].files[0]); 

        $.ajax({ 
         type: 'POST', 
         url: '/RX/Upload', 
         data: formData, 
         contentType: false, 
         processData: false 
        }) 
       } 
      }) 
     }) 
    </script> 

Answer 1

は最終的に答えを見つけ：

私はちょうど形で .get(0)を追加する必要が

、ここではコードです：

<script> 
     $(document).ready(function(){ 
      $('#btnRXUpload').click(function() { 
       var form = $('#frmRXUpload') 

       if (form.valid()) { 
        var formData = new FormData(form.get(0)); //add .get(0) 
        formData.append('files', $('#frmRXUpload input[type="file"]')[0].files[0]); 
        //formData.append('__RequestVerificationToken', fnGetToken()); //remark this line 

        $.ajax({ 
         type: 'POST', 
         url: '/RX/Upload', 
         data: formData, 
         contentType: false, 
         processData: false 
        }) 
       } 
      }) 
     }) 
    </script> 

Answer 2

あなたがリクエストヘッダではなく、フォームにトークンを追加する必要があります。このように：

 if (form.valid()) { 
      var formData = new FormData(form); 
      formData.append('files', $('#frmRXUpload input[type="file"]')[0].files[0]); 

      $.ajax({ 
       type: 'POST', 
       url: '/RX/Upload', 
       data: formData, 
       contentType: 'multipart/form-data', 
       processData: false, 
       headers: { 
        '__RequestVerificationToken': fnGetToken() 
       } 
      }) 
     } 

編集 私はこの問題を自分で解決する方法を振り返って、私は標準ValidateAntiForgeryTokenAttributeは常にAJAX要求のために読み込まれないのRequest.Formオブジェクトに見えることを覚えておいてください。 （CSRFトークンのフォームのポストはあなたがcontentType=falseを設定します。application/x-www-form-urlencodedが必要ですが、二つの操作が問題の一部であってもよい競合コンテンツタイプを、必要とするのに対し、あなたのケースでは、ファイルのアップロードは、multipart/form-dataコンテンツタイプを必要とします）。

public sealed class ValidateJsonAntiForgeryTokenAttribute 
          : FilterAttribute, IAuthorizationFilter 
{ 
    public void OnAuthorization(AuthorizationContext filterContext) 
    { 
     if (filterContext == null) 
     { 
      throw new ArgumentNullException("filterContext"); 
     } 

     var httpContext = filterContext.HttpContext; 
     var cookie = httpContext.Request.Cookies[AntiForgeryConfig.CookieName]; 
     AntiForgery.Validate(cookie != null ? cookie.Value : null, 
          httpContext.Request.Headers["__RequestVerificationToken"]); 
    } 
} 

詳細情報（現在の日付のうちビット：だから、サーバー上のトークンを検証するために、あなたは、要求ヘッダー内のトークンをチェックあなたのアクションメソッドのカスタム属性を記述する必要があります）here。