Question

I have a web application where the user has a list of images from the server like so:

 <div class="uncat">
        <img src="/static/media/images/2012/1019/zKGsa.jpg" id="12"/>
      </div>
        <div style="float:left;"><a href="/delete/12/">x</a></div>

      <div class="uncat">
        <img src="/static/media/images/2012/1019/vk5au.jpg" id="11"/>
      </div>
        <div style="float:left;"><a href="/delete/11/">x</a></div>

      <div class="uncat">
        <img src="/static/media/images/2012/1019/main-qimg-fa20c3f66a50e7a28c4e425b388303fc.jpeg" id="10"/>
      </div>

Then the user can drag and drop any image into a select area with the following Javascript:

addEvent(bin, 'drop', function(e) {
if (e.stopPropagation)
  e.stopPropagation();

  var csrftoken = getCookie('csrftoken');

  // AJAX call 
  $.post('/image_in_folder/', {

    // figure out better way to retrieve id
      // id not passed from masonry
    image:DRAGSOURCE.id,
    folder:this.id,
    'csrfmiddlewaretoken': csrftoken  
  }, function(data){
      console.log(data);
  });
}

});

What non-client-side information can I POST over to identify the meme the user dragged? Currently, I use the ‘id’ attribute as a temporary solution. But users could potentially modify the data to hijack the drag-and-drop.

Any help would be appreciated!

Answer 1

What non-client-side information can I POST

None. The POST request comes from the client. You can only send information that is available to the client.

Currently, I use the ‘id’ attribute as a temporary solution. But users could potentially modify the data

So authenticate the user, then check if they are authorised to upload a file for that id.