你如何在 jquery 驗證插件中傳遞 Django csrf 令牌？

Question

我正在嘗試創建客戶端驗證，以查看是否在注冊時使用了用戶名。 此驗證應該在用戶提交表單之前發生。

為了實現這一點，我使用了 jquery 驗證插件：http: //jqueryvalidation.org/

我遇到的問題是我收到 403 錯誤：

POST example.com/check-username 403 (FORBIDDEN)

這是客戶端驗證的代碼： $(document).ready(function () {

      $('#register-form').validate({ // initialize the plugin
        rules: {
          username: {
            required: true,
            remote: {
              url: "/check-username",
              type: "post",
              data: {
                csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value,
                username: function() {
                  return $( "#id_username" ).val();
                }
              }
            }
          }
        }
      });
});

這是我在views.py中的驗證函數：

def check_username(request):
    username = request.POST.get('username', None)

    if not username:
        return HttpResponseBadRequest("Invalid username")
    return User.objects.exists(username=username) 

我懷疑這是一個 csrf 錯誤，但我不太確定如何與 jquery 驗證插件一起工作。 我該怎么做呢？

Answer 1

您確定要將CSRF令牌輸出到您的表單嗎？

{% csrf_token %}

必須位於您的<form>標記之間。

一旦這樣做，您的代碼就對我有用，並修改了您的check_username視圖以返回正確的HTTP響應。

from django.http import HttpResponse
def check_username(request):
    username = request.POST.get('username', False)

    if not username:
        return HttpResponseBadRequest("Invalid username")
    return HttpResponse(User.objects.filter(username=username).exists())

Answer 2

步驟 1. 在表單中添加帶有 csrf 名稱和哈希的輸入標簽

<input type="text" class="txt_csrfname" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>" hidden>

步驟 2. 在腳本中獲取名稱和哈希

var csrfName = $('.txt_csrfname').attr('name');
   var csrfHash = $('.txt_csrfname').val();

步驟 3. 發送 csrf 令牌

<script>
       var csrfName = $('.txt_csrfname').attr('name');
       var csrfHash = $('.txt_csrfname').val();    

  $('#register-form').validate({ // initialize the plugin
            rules: {
              username: {
                required: true,
                remote: {
                  url: "/check-username",
                  type: "post",
                  data: {
                    username: function() {
                      return $( "#id_username" ).val();
                    },
                    [csrfName]: function() {
                     return csrfHash;
                    }
                  }
                }
              }
            }
          });
</script>