使用Jinja模板嵌入动态HTML按钮显示为纯文本问题求助

问题场景 #

我通过函数从数据库获取数据，生成对应数量的HTML按钮代码，返回的示例代码如下：

<form method="post" action="/all/1">
    <button type="submit" id="button">
        <div>
            <p id="1_name">name</p>
            <p id="1_description">description</p>
        </div>
    </button>
</form>

后端Python代码通过FastAPI的TemplateResponse传递变量：

@router.get("/")
async def test(request: Request):
    buttons = generate_buttons()  # 调用生成按钮的函数
    return templates.TemplateResponse("home.html", {"request": request, "buttons": buttons})

前端模板home.html中引用变量：

<div id="all">
    {{buttons}}
</div>

结果HTML代码被当作纯文本显示，按钮无法正常渲染，且不允许使用{% include %}方式嵌入，需要解决这个问题。

解决方法 #

FastAPI默认使用的Jinja2模板引擎会自动转义HTML内容（防止XSS攻击），所以直接传递字符串会被转义成纯文本。有两种可行的解决方式：

方法一：模板中使用safe过滤器 #

直接在模板变量后添加|safe标记，告诉Jinja2这段内容是安全的，不需要转义：

<div id="all">
    {{ buttons|safe }}
</div>

方法二：Python代码中用Markup包装HTML字符串 #

从jinja2导入Markup类，将生成的HTML字符串用Markup包裹后再传递给模板：

from jinja2 import Markup
from fastapi import Request, APIRouter
from fastapi.templating import TemplateResponse

router = APIRouter()

def generate_buttons():
    # 模拟生成按钮的函数
    buttons = """
<form method="post" action="/all/1">
    <button type="submit" id="button">
        <div>
            <p id="1_name">name</p>
            <p id="1_description">description</p>
        </div>
    </button>
</form>
"""
    return buttons

@router.get("/")
async def test(request: Request):
    buttons_html = generate_buttons()
    # 用Markup包装，标记为安全的HTML
    safe_buttons = Markup(buttons_html)
    return templates.TemplateResponse("home.html", {"request": request, "buttons": safe_buttons})

注意：无论用哪种方法，都要确保生成的HTML内容是安全的，避免包含用户输入的恶意代码，防止XSS漏洞。

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