HTMX/Django多表单列表的CSRF令牌重复提交问题

问题原因 #

首次提交成功后，Django返回的新表单会携带最新的CSRF token，但HTMX仍在使用之前缓存的旧token（可能是页面加载时获取的meta标签值或全局配置的header值），导致后续提交的token与Django会话中存储的有效token不匹配，触发Forbidden错误。

具体解决方案 #

1. 优先使用表单内置CSRF字段提交（最稳妥） #

放弃通过HTTP header传递CSRF token，直接依赖表单自带的隐藏csrfmiddlewaretoken字段提交，确保每次提交的都是当前表单的最新token：

• 确保所有表单模板中包含{% csrf_token %}标签，Django会自动生成当前有效的token：

  <form method="post" hx-post="{{ request.path }}" hx-target="this" hx-swap="outerHTML">
      {% csrf_token %}
      {{ form.color }}
      <button type="submit">保存颜色</button>
  </form>
  

• 移除HTMX全局配置中手动设置X-Csrftoken header的代码（如果有），比如：

  // 删掉这类代码
  htmx.config.headers['X-Csrftoken'] = document.querySelector('meta[name="csrf-token"]').content;
  

2. 动态更新HTMX的CSRF header（保留header提交方式） #

如果必须通过X-Csrftoken header传递token，需在每次DOM替换后刷新HTMX的token配置：

• 在页面头部添加CSRF meta标签，确保其内容随请求更新：

  <meta name="csrf-token" content="{{ csrf_token }}">
  

• 监听HTMX的htmx:afterSwap事件，每次表单替换后重新读取最新token：

  document.body.addEventListener('htmx:afterSwap', function(evt) {
      // 从meta标签获取最新token并更新HTMX配置
      const newCsrfToken = document.querySelector('meta[name="csrf-token"]').content;
      htmx.config.headers['X-Csrftoken'] = newCsrfToken;
  });
  

  也可以直接从新表单的隐藏字段读取token：

  document.body.addEventListener('htmx:afterSwap', function(evt) {
      const form = evt.target.closest('form');
      if (form) {
          const csrfField = form.querySelector('[name="csrfmiddlewaretoken"]');
          if (csrfField) {
              htmx.config.headers['X-Csrftoken'] = csrfField.value;
          }
      }
  });
  

3. 检查Django配置与视图逻辑 #

• 确保PlacementUpdateView在表单验证成功后，返回渲染后的表单HTML片段而非重定向：

  from django.views.generic.edit import UpdateView
  from .models import Placement
  
  class PlacementUpdateView(UpdateView):
      model = Placement
      fields = ['color']
      template_name = 'placement_form.html'
  
      def form_valid(self, form):
          # 保存数据后返回表单片段，用于DOM替换
          self.object = form.save()
          return self.render_to_response(self.get_context_data(form=form))
  

• 若CSRF_COOKIE_HTTPONLY设置为True，则JavaScript无法读取CSRF Cookie，必须使用meta标签或表单字段传递token；若为False，也可直接从Cookie读取最新token更新HTMX配置。

内容的提问来源于stack exchange，提问作者Hanny