在 javascript 创建的元素表单中使用 csrf_token

Question

Well i have created form element using javascript. The reason is, i am updating user page using ajax.

I have the created form element bellow

  var tagform =document.createElemenet('form')
  var tagbutton =document.createElemenet('button')
   tagform.setAttribute('method','post');
   tagform.setAttribute('action','/businesshub/comment_delete/');

   tagbutton.setAttribute('type','submit');
   tagform.appendChild(tagbutton );

The only problem i face when submitting the created form is, i get the error

Forbidden (403)

CSRF verification failed. Request aborted.

I am using django . How can i implemented {% csrf_token %} to my created Element form using javascript. Thanks

Answer 1

Get CSRF Token using

<script>
        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                }
            }
            return;
        }

    </script>

And Ajax will be

$.ajax({
            url: 'your url',
            type: 'POST',
            data: formData,
            headers: {"X-CSRFToken": getCookie('csrftoken')},

            success: function (data) {


            },

})

Answer 2

You need the csrf_token to be passed to the server too.

<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">

in you case something like:

var csrf =document.createElemenet('input')
csrf.setAttribute('type','hidden');
csrf.setAttribute('value','{{ csrf_token }}');
tagform.appendChild(csrf);

Answer 3

I got a simple and a better solution . Since in my django template i can use {% csrf_token %} is used

i just need to access it using jquery or javascript

  <script>
   var csrfToken = document.getElementsByName('csrfmiddlewaretoken')[0].value

  var tagform =document.createElemenet('form')
  var tagbutton =document.createElemenet('button')
  var csrftoken = document.createElement("input");
  csrftoken.setAttribute("type", "hidden");
  csrftoken.setAttribute("name", 'csrfmiddlewaretoken');
  csrftoken.setAttribute("value", csrfToken);
  </script>