H5P Platform/Editor Requests?

Submitted by daveb on Fri, 02/10/2017 - 19:48
Forums: 
Feature requests

I am working on integrating H5P into Django.

Working on the editor I see that h5peditor-file-upload.js creates an iframe and uploads a file from a form in the iframe. This form does not include a CSRF token and I am having trouble capture the code necessary to add a Django style CSRF token.

I am wondering if I can detect the "upload" event that is triggered and handle it there by adding the token to the form.

So far I haven't been able to figure out how this work by looking at the existing integrations for PHP (Drupal and Moodle).

Also is there a more appropirate place to discuss integration/platform questions?

 

0
0
Supporter votes Members of the Supporter Network can vote for feature requests. When the supporter network has generated sufficient funding for the top voted feature request it will normally be implemented and released. More about the H5P Supporter Network
icc's picture

icc

Mon, 02/13/2017 - 09:36

Cool to hear that you're making progress on getting H5P into Django.

Regarding your question, the PHP implementations specify the token as part of the upload URL which is used by the form. This is probably the easiest way of getting about this.

daveb

Wed, 03/22/2017 - 16:44

Thanks. Putting the token in the URL seems not ideal since the rest of the data is sent in a POST form-data. I am not sure if there is an easy way to get the GET url query parameters and POST data at the same time with Django but it might be one solution.

 

mjd75

Wed, 03/22/2017 - 10:27

Hi Dave,

We are using H5P in Django and have a workaround for your problem. I'm sure this is not the best possible solution because it involves patching h5p.js in order to work, but it is a "simple" patch at the bottom of the file. We added the following code inside the H5P.init function:

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = $.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    });

It is basically just hooking in to all  AJAX requests and appending the csrf token to the request header, grabbing the csrf token from cookies.

I'd be curious to hear from other Django developers if anyone has a better workaround?

/Mark.

 

daveb

Wed, 03/22/2017 - 16:42

Mark,

 

Thank you. This was the solution I was leaning towards. Right now we are working on an internal implementation, and supplying a custom h5p.js is fine for our clients.

I am curious if you have any tips on implementing h5p along with the Django platform. Is there any possibility of sharing code for the actual h5p player or editor integrated into Django? We are interested in working with other Django users on the basic h5p implemenation.

Dave

icc's picture

icc

Thu, 03/23/2017 - 09:38

That seems like a good workaround, and I guess it doesn't have to be inside h5p.js – you could add an overrides.js or something. One potential issue here is adding the token to the iframe form used for uploading files. Hopefully, we can figure out a nice way of customizing these things easily in the 'core' library from the plugin or framework who's implementing this.

Thank you for sharing.