Django向React.js传递变量时|safe过滤器的作用是什么？

核心作用 #

Django模板引擎默认开启HTML自动转义机制，会将变量中的<、>、"、'、&等特殊字符转义为对应的HTML实体，从默认规则层面避免XSS跨站脚本攻击风险。

safe过滤器的作用就是标记该变量的内容是安全可信的，通知模板引擎跳过转义步骤，直接将变量内容原样输出到页面。

你提到的将Django上下文变量传递给JavaScript（含React场景）的用法，就是safe最常见的使用场景之一：后端一般会先把要传递给前端的结构化数据序列化为JSON字符串，要是不加safe，JSON里的双引号、大括号等符号会被转义为HTML实体，输出到页面后无法被JS识别为合法语法，加safe后才能原样输出合法的JSON内容，让JS正常解析为可用变量。

举个实际示例：
后端视图代码：

# views.py
import json
from django.shortcuts import render

def demo_view(request):
    # 后端序列化数据为JSON字符串
    react_props = json.dumps({
        "username": "小明",
        "notify_count": 3,
        "is_vip": False
    })
    return render(request, "demo.html", {"react_props": react_props})

模板中不加safe的写法：

const props = {{ react_props }}

最终输出到页面的实际内容会变成非法JS语法：

const props = {"username": "小明", "notify_count": 3, "is_vip": false}

加safe后的写法：

const props = {{ react_props | safe }}

输出的就是合法可直接使用的JS代码：

const props = {"username": "小明", "notify_count": 3, "is_vip": false}

适用场景 #

仅在你完全确认变量内容不存在恶意代码的场景下使用，常见场景包括：

• 传递后端序列化完成的JSON数据给前端JS/React等框架使用
• 输出后端生成的安全HTML片段，比如已经过XSS校验的后台富文本内容、服务端渲染的组件HTML
• 输出后端拼接的合法JS代码片段

注意事项 #

不要随意给所有变量加safe，尤其是变量内容来自普通用户输入的场景，直接使用safe会完全暴露XSS攻击风险。如果需要输出用户提交的内容且要保留部分HTML格式，建议先使用专门的XSS过滤库对内容做安全清洗后，再搭配safe过滤器使用。

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