如何使用帶有Vanilla JS的dropzone.js和MVC 5的AntiforgeryToken？

我困在當下試圖找出如何使用Dropzone.js和香草javascript（無jQuery）發送antiforgery令牌。如何使用帶有Vanilla JS的dropzone.js和MVC 5的AntiforgeryToken？

這是目前我的初始化代碼：

$(document).ready(function (e) { 
     var myDropzone = new Dropzone("#myDropzone", { url: "/Media/AjaxUpload", maxFilesize: 10, addRemoveLinks: true, maxFiles: 1 }); 
     myDropzone.on("success", function (response) { 
      //Do some personal stuff. 
     }); 
     myDropzone.on("sending", function (xhr, formData) { 
      formData["__RequestAntiForgeryToken"] = document.getElementsByName("__RequestVerificationToken")[1].value 
     }); 

    });

我試圖追加令牌上懸浮窗的發送事件無濟於事，甚至在標題中。有關如何實現這一目標的任何建議？

來源

2015-08-29 Jose A

我最終實現這一目標的方式是通過Stackoverflow的許多建議。我在MVC上創建了一個特殊的過濾器，並通過標頭傳遞了令牌。就像這樣：

以從這裏的想法： http://johan.driessen.se/posts/Updated-Anti-XSRF-Validation-for-ASP.NET-MVC-4-RC

我設法通過懸浮窗的頭球送令牌：

代碼弄成這個樣子：

var myDropzone = new Dropzone("#myDropzone", { 
      url: "/Media/AjaxUpload", maxFilesize: 10, addRemoveLinks: true, maxFiles: 1, 
      headers: { "__RequestVerificationToken": document.getElementsByName("__RequestVerificationToken")[1].value } 
     });

我說「頭「到Dropzone實例化，並將過濾器添加到MVC：

[AttributeUsage(AttributeTargets.Method | AttributeTargets.Class, AllowMultiple= false, Inherited = false)] 
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"]); 
    } 
}

然後應用到你的控制器：

[ValidateJsonAntiForgeryToken] 
    public JsonResult AjaxUpload(HttpPostedFileBase file) 
    { 
     //Do Logic here! 

     return Json("Success"); 
}

來源

2015-08-29 15:54:36

我想你幾乎釘它那裏第一次去，何塞。你犯的一個小錯誤是在事件處理函數中缺少一個參數。

從Dropzone documentation：

調用發送每個文件之前。獲取xhr對象和 formData對象作爲第二個和第三個參數，因此您可以修改它們（例如添加CSRF令牌）或添加其他數據。

事件參數實際上是file, xhr, formData，如果包含所有三個參數，則可以成功操作表單。這樣做的好處是無需創建自定義屬性，只需使用ValidateAntiForgeryToken屬性即可。

myDropzone.on("sending", function (file, xhr, formData) { 
    formData["__RequestAntiForgeryToken"] = document.getElementsByName("__RequestVerificationToken")[1].value; 
});

我有一個稍微不同的implemetation比你的進行了測試，它工作得很好。

來源

2015-09-28 14:50:43

對於我使用'formData.append（「__ RequestAntiForgeryToken」，tokenElement）'也有效。 – Pablo

如何使用帶有Vanilla JS的dropzone.js和MVC 5的AntiforgeryToken？

回答

相關問題