Flask单页多表单csrf_token ID重复及自定义ID报错求助

我刚好碰到过类似的坑，给你几个靠谱的解决方案，不用拆页面也不用全改成Ajax：

方案1：手动渲染csrf_token字段（最直接） #

hidden_tag()的问题在于它会自动渲染所有隐藏字段（默认主要是csrf_token），而且不支持直接传id参数——这就是你触发TypeError的原因。所以我们可以跳过hidden_tag()，手动渲染csrf_token并给它设置唯一ID：

原来的代码：

{{ form1.hidden_tag() }}
{{ form2.hidden_tag() }}

改成：

{{ form1.csrf_token(id="csrf_token_form1") }}
{{ form2.csrf_token(id="csrf_token_form2") }}

如果你的表单里还有其他自定义的HiddenField，记得把它们也手动渲染出来（比如{{ form1.some_hidden_field() }}），不然这些字段会丢失。这个方案最简单，能立刻解决ID重复的问题，而且完全不影响CSRF验证逻辑。

方案2：用Jinja宏封装渲染逻辑（适合多表单场景） #

如果页面里有很多表单，写重复的手动渲染代码太麻烦，可以写一个Jinja宏来复用：

{% macro render_unique_csrf(form, csrf_id) %}
    {{ form.csrf_token(id=csrf_id) }}
    <!-- 如果有其他固定隐藏字段，也可以在这里统一渲染 -->
{% endmacro %}

然后在模板里调用：

{{ render_unique_csrf(form1, "csrf_token_form1") }}
{{ render_unique_csrf(form2, "csrf_token_form2") }}

这样维护起来更方便，后续加新表单直接调用宏就行，不用重复写渲染代码。

方案3：在表单类中自定义csrf_token的ID（不用改模板） #

如果你不想修改模板代码，可以在表单类的初始化方法里重写csrf_token的ID属性：

from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField

# 第一个表单
class Form1(FlaskForm):
    name = StringField('Name')
    submit = SubmitField('Submit')

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 给csrf_token设置唯一ID
        self.csrf_token.id = "csrf_token_form1"

# 第二个表单
class Form2(FlaskForm):
    email = StringField('Email')
    submit = SubmitField('Submit')

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.csrf_token.id = "csrf_token_form2"

这样模板里依然可以用{{ form.hidden_tag() }}，渲染出来的csrf_token会自动带上你设置的唯一ID，完美兼容原有模板代码。

关键提醒 #

不管用哪个方案，CSRF验证的逻辑都不会受影响——因为验证是靠csrf_token的值，而不是ID。只要每个表单的csrf_token值正确（Flask-WTF会自动生成对应请求的有效值），ID只是DOM元素的标识，重复的ID只会触发浏览器警告，不会影响功能，但修复后能消除警告，让页面更规范。

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