Setting csrf for dynamic generated form

Aug. 7, 2020

Front-End

Back-End

If the form is dynamic generated in template, inclusion of {% csrf_token %} in form will not be rendered.

In this case we have to set csrf token in form using javascript which value could be retrieved from:

{% csrf_token %} included in template (not in form itself)

from page cookies.

<form  id="form1" action="" method="post" enctype="application/x-www-form-urlencoded">       
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname"><br>
  <input type="file" name="file"><br>
  <input type="submit" value="Submit1">
  <input type="hidden" name="form" value="yes">
</form>

<script>

function csrf_in_form(id){
    try {
        var csrfValue =  document.getElementsByName("csrfmiddlewaretoken")[0].value;
    }
    catch(err) {}

    if(csrfValue == undefined) {
        try {
            var csrfValue = Cookies.get('csrftoken');
        }
        catch(err) {
            console.log("Add {% csrf_token %} in template or use js cookie library!")
            return;
        }
    }

    var csrfToken = document.createElement("input");
    csrfToken.setAttribute("type","hidden");
    csrfToken.setAttribute("name","csrfmiddlewaretoken");
    csrfToken.setAttribute("value",csrfValue);

    var form = document.getElementById(id);
    form.appendChild(csrfToken);
}

document.getElementsByTagName("body")[0].onload = function() {  
    csrf_in_form("form1");   
};

</script>

Setting csrf for dynamic generated form

Tags