Question

我现在陷入困境，试图弄清楚如何使用Dropzone.js和vanilla javascript（没有jQuery）发送防伪令牌。

这是我目前的初始化代码：

$(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
        });

    });

我尝试将令牌附加到Dropzone的发送事件上，即使在标题处也是如此。有关如何实现这一目标的任何建议？

Answer 1

我认为你一开始就把它钉在那里，何塞。你犯的小错误是在事件处理函数中缺少一个参数。

来自Dropzone documentation：

在每个文件发送之前调用。获取xhr对象和 formData对象为第二个和第三个参数，因此您可以修改它们（例如添加CSRF令牌）或添加其他数据。

事件参数实际上是file, xhr, formData，如果包含所有三个参数，则可以成功操作表单。这样做的好处是不需要创建自定义属性，只需使用ValidateAntiForgeryToken属性。

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

我使用与您的实现略有不同的测试来测试它，并且它运行良好。

Answer 2

我最终实现这一目标的方式是通过Stackoverflow上的许多建议。我在MVC上创建了一个特殊的过滤器，并通过标头传递了令牌。像这样：

从这里接受这个想法： http://johan.driessen.se/posts/Updated-Anti-XSRF-Validation-for-ASP.NET-MVC-4-RC

我设法通过dropzone的标题发送令牌：

代码最终如下：

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

我向Dropzone实例添加了“headers”，并将过滤器添加到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");
}

如何将AntiforgeryToken与dropzone.js和MVC 5与Vanilla JS一起使用？

2 个答案: