Spring security under FileUpload upload file was intercepted

FileUpload plugin GitHub URL
FileUpload Plugin jquery Site
Spring Mvc+fileupload Example

Well, from the beginning of the introduction of JS file into the pit:

<script src= "Js/jquery.1.9.1.min.js" ></script>
<script src= "Js/jquery.fileupload.js" ></ script>
<script src= "js/vendor/jquery.ui.widget.js" ></script>
<script src= "js/ Jquery.iframe-transport.js "></script>
<script src=" Bootstrap/js/bootstrap.min.js "></ script>
<link href= "bootstrap/css/bootstrap.css" type= "Text/css" rel= "stylesheet"/>

I introduce the time in accordance with the above order. Later discovered that the method was not found directly:

$ (' #file '). FileUpload ();

Found to be in the following order:

<script src= "Js/jquery.1.9.1.min.js" ></script>
<script src= "Js/vendor/jquery.ui.widget.js" ></script>
<script src= "js/jquery.iframe-transport.js" ></script>
<script src= "JS /jquery.fileupload.js "></script>
<script src=" Bootstrap/js/bootstrap.min.js "></script>
<link href= "bootstrap/css/bootstrap.css" type= "Text/css" rel= "stylesheet"/>

Put the jquery.fileupload.js on the last side, so that you can refer to other JS files inside.

Then in the security to post data, must have CSRF token, otherwise there must be 403 access to the wall to touch ...
There are three different ways:
1. Directly placed Multipartfilter on the Springsecurityfilterchain, so that when uploading files will be multipartfilter interception, and will not be protected by security:
Override this method:

public class Securityapplicationinitializer extends Abstractsecuritywebapplicationinitializer {

    @Override
    protected void Beforespringsecurityfilterchain (ServletContext servletcontext) {
        insertfilters (ServletContext, New Multipartfilter ());
    }

Ensure that Multipartfilter is placed before springsecurityfilterchain in the XML configuration:

<filter>
    <filter-name>MultipartFilter</filter-name>
    <filter-class> org.springframework.web.multipart.support.multipartfilter</filter-class>
</filter>
< filter>
    <filter-name>springSecurityFilterChain</filter-name>
    <filter-class> org.springframework.web.filter.delegatingfilterproxy</filter-class>
</filter>
< filter-mapping>
    <filter-name>MultipartFilter</filter-name>
    <url-pattern>/*</ url-pattern>
</filter-mapping>
<filter-mapping>
    <filter-name> springsecurityfilterchain</filter-name>
    <url-pattern>/*</url-pattern>
</ Filter-mapping>

In this way, the simple and rough solution (at that time, who can upload files to the server, was briefly saved, only authorized users can upload a file to be processed by the application.) In most cases, these temporarily saved files do not have much of a problem because the framework is automatically cleaned up periodically. ）

2. Use the CSRF token as the URL parameter:

 
But this led to token leaking out.
If you put it in the hidden area:

<input type= "hidden"
    name= "${_csrf.parametername}" value=
    "${_csrf.token}"/>
 
There may be a problem with CSRF support because the Commons-fileupload component encapsulates the request, and no CSRF value is passed. So it was over. Upload with Ajaxupload:

var uploader = new Ajaxupload ({
        URL: '/file/upload ',
        name: ' UploadFile ',
        multipart:true,
        Customheaders: {' ${_csrf.headername} ': ' ${_csrf.token} '},
        ...
        Oncomplete:function (filename, response) {
            ...
        },
        onerror:function (filename, type, status, response) {
  ...
        }
});
 
But this plugin was not found on the internet ... pass off

4. With FileUpload Plug-ins:

$ (' #file '). FileUpload ({
                    dataType: ' json ',
                    add:function (e, data) {
                        Data.context = $ (' <button/> '). Text (' Upload ')
                                . Appendto (document.body).
                                Click (function () {
                                    Data.context = $ (' <p/> '). Text (' Uploading ... '). ReplaceAll ($ (this));
                                    Data.submit ();
                                });
                    },
                    done:function (e, data) {
                        data.context.text (' Upload finished. '}
                });
 
But in Jquery.fileupload.js search for a long time, found a way: _initxhrdata:function (options) and set up request headers a bit of a relationship. But how to speak CSRF header and token pass in it. Later thought I can use the ajaxsend to set the Requestheader first not to be OK ...
Solve the problem of csrf invalidation of the Spring security form upload file

$ (document). Ready (function () {var token = $ ("meta[name= ' _csrf ')"). attr ("content");
            var Header = $ ("Meta[name= ' _csrf_header ']"). attr ("content");
            $ (document). Ajaxsend (function (E, XHR, options) {Xhr.setrequestheader (header, token);
            });
                        $ (' #file '). FileUpload ({dataType: ' json ', Add:function (e, data) {
                                Data.context = $ (' <button/> '). Text (' Upload '). Appendto (Document.body) . Click (function () {Data.context = $ (' <p/> '). Text ('
                                    Uploading ... '). ReplaceAll ($ (this));
                                Data.submit ();
                    });
                    }, Done:function (e, data) {Data.context.text (' Upload finished. ');
}
                }); <body> <div&Gt <input type= "File" name= "file" id= "file" data-url= "/upload"/><br/> </div> </body>
 
On the purple, toss a half-day document, or use this method to solve ...
PS: If you are using the Thymeleaf template, pay attention to the use of:th:content

 
Reference: Similar solutions on StackOverflow
StackOverflow another URL

Pay another taglib solution with JSP

<%@ taglib prefix= "SEC" uri= "http://www.springframework.org/security/tags"%> <form
    "POST" action= "/do/something" >
        <sec:csrfinput/> name:<br/> <input type= "
        text" name= "Name" /> ...
    </form>
    also has one: <sec:csrfmetatags/> method.