Jquery : 여러 이미지를 업로드하는 중 게시물 요청이 깨졌습니다.

Question

하나의 요청으로 여러 이미지를 업로드하려면 Plupload js 플러그인을 사용하고 있습니다. 이 플러그인은 한 번에 5 개의 이미지를 추가 한 다음 다른 사용자가 이미지를 개별적으로 업로드하는 데 5 번 요청하는 것처럼 작동합니다. 우리가 알고 있듯이 게시 요청에 고유 한 csrf 토큰이 필요하지만 한 번에 동일한 토큰으로 인해 제 경우에 게시 요청이 실패합니다.

다음

내 코드는 ... 여기

<c:set var="csrfTokenVal"><csrf:token-value uri="<%=request.getRequestURI()%>"/></c:set> 

<script> 
var csrftokenV="${csrfTokenVal}"; 

$("#uploader").plupload({ 

    // General settings 
    runtimes : 'html5,flash,silverlight,html4', 
    url:'/view/SurgeryNotesComponentController?uploadSurgeryImage=true&'+csrftokenN+'='+csrftokenV, 

    // User can upload no more then 20 files in one go (sets multiple_queues to false) 
    max_file_count: 10, 

    chunk_size: '1mb', 

    // Resize images on clientside if we can 
    resize : { 
     width : 600, 
     height : 610, 
     quality : 90, 
     //crop: true // crop to exact dimensions 
    }, 

    filters : { 
     // Maximum file size 
     max_file_size : '1mb', 
     // Specify what files to browse for 
     mime_types: [ 
      {title : "Image files", extensions : "jpg,gif,png"}, 
      {title : "Zip files", extensions : "zip"} 
     ] 
    }, 

    // Rename files by clicking on their titles 
    rename: true, 

    // Sort files 
    sortable: true, 

    // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that) 
    dragdrop: true, 

    // Views to activate 
    views: { 
     list: true, 
     thumbs: false, // Show thumbs 
     active: 'thumbs' 
    }, 
    init: { 
     FilesAdded: function(up, files) { 
      $("#uploader_filelist").show(); 

     }, 


     FileUploaded: function(up, file, info, res) { 
      var imageObjectArray=$.parseJSON(info.response); 
      for(i=0;i<imageObjectArray.objectList.length; i++){ 
       $('#showfilelist ul').append("<li><a class='delIcon-image' href='#delete' id='delSurgeryImageIcon'></a><a id=" + imageObjectArray.objectList[i].uid + " class='cboxElement imguid' href='${contextPath}/view/SurgeryNotesComponentController?surgeryImage=true&"+csrftokenN+ "="+ csrftokenV+"&attachmentLocation="+imageObjectArray.objectList[i].attachmentLocation+"' target='_blank'><img src='${contextPath}/view/SurgeryNotesComponentController?surgeryImage=true&"+csrftokenN+ "="+ csrftokenV+"&attachmentLocation="+imageObjectArray.objectList[i].attachmentLocation+"' border='0'>"+"</a> <strong>"+noteAddedMsg+"</strong><span class='image-created'>"+imageObjectArray.objectList[i].formattedDate+" "+byMsg+" "+imageObjectArray.objectList[i].userName+" </span></li>"); 
      } 

      $("#uploader_filelist").empty().hide(); 
      _SPINE.colorboxOverlay.coloboxPopup(); 
      _SPINE.surgeryNotes.deleteImages(); 

      $(".plupload_done .plupload_file_thumb").removeClass("hide") 
     }, 
     ChunkUploaded: function (up, file, response) { 
      response = $.parseJSON(response.response || "null"); 
      if (response.chunk == 3) { 
       up.stop(); 
       up.start(); 
      } 
      console.log(file.loaded); 

     } 

    }, 
    // Flash settings 
    flash_swf_url : '${siteAssetsUrl}/assets/spine/js/external/Moxie.swf', 

    // Silverlight settings../assets/js 
    silverlight_xap_url : '${siteAssetsUrl}/assets/spine/js/external/Moxie.xap' 
}); 
</script> 

당신은 내가 scrf 토큰 (csrftokenV)를 생성하고 지원 게시 할 수 있도록 URL에 그것을 보낸다 볼 수 있습니다.

이제 문제는 이미지를 두 개 이상 업로드하는 경우입니다 (3 개라고 말하면됩니다). 그러면 3 시간의 게시물 요청이 전송됩니다. 때마다 나는 같은 CSRF 토큰을 얻을 것이다 첫 번째 이미지를 uploaing 후, furthure 이미지가 작동하지 않습니다와 나는이 예외 ....

WARNING: potential cross-site request forgery (CSRF) attack thwarted (user:<anonymous>, ip:127.0.0.1, uri:/**/image, error:request token does not match session token) 

날이 문제를 해결하는 데 도움이 제발을 얻을 것이다. 감사합니다

Answer 1

마지막으로 내 친구 중 한 명이 문제를 해결했습니다. 클라이언트 측 스크립트를 통해이 문제를 처리 할 수 ​​없으므로 Java의 힘을 십분 활용합니다. 새로운 요청을 기반으로 csrfToken을 업데이트하고 응답으로 보냈습니다. 여기

는

   response.setResult(this.updateToken(request)); 
      return response; 

이제 우리는 beforeUpload 이벤트 URL을 변경하고 URL에 새 토큰을 설정할 수 있습니다 ..... 솔루션입니다 응답 newToken 설정

 private String updateToken(HttpServletRequest request) 
     { 
      final HttpSession session = request.getSession(false); 
      CsrfGuard csrfGuard = CsrfGuard.getInstance(); 
      csrfGuard.updateTokens(request); 
      String newToken=(String) session.getAttribute(REQUEST_TOKEN); 
      return newToken; 
     } 

.

BeforeUpload: function(up, file) 
      { 

       up.settings.url='/view/SurgeryNotesComponentController?uploadSurgeryImage=true&'+csrftokenN+'='+tokenRefresh 

      } 

FileUploaded: function(up, file, info, res) 
      { 
       var imageObjectArray=$.parseJSON(info.response); 
       tokenRefresh=imageObjectArray.result; 
      }