Python Jinja2模板中安全传递与解析JSON的正确实践-Python教程-PHP中文网

Python Jinja2模板中安全传递与解析JSON的正确实践

本文详解如何在Python脚本中将JSON数据安全、准确地传递至Jinja2 HTML模板，并在前端JavaScript中可靠解析使用，避免因双重序列化导致的undefined访问错误。

本文详解如何在python脚本中将json数据安全、准确地传递至jinja2 html模板，并在前端javascript中可靠解析使用，避免因双重序列化导致的`undefined`访问错误。

在使用Jinja2渲染动态HTML时，一个常见但极易踩坑的操作是：对JSON数据进行重复序列化（double-encoding）。正如问题中所示，开发者在Python端调用 json.dumps(diff_data['diff']) 将字典转为字符串，再在模板中用 {{ diff_values | tojson }} 二次处理——这会导致最终注入页面的 diffValues 变量是一个被双引号包裹的JSON字符串字面量，而非可直接操作的JavaScript对象。

例如，原始Python字典：

{
  "values_changed": {
    "root['key1']": {"old_value": "value9", "new_value": "value1"}
  }
}

经 json.dumps(...).replace('', ' 后变为字符串：

"{\"values_changed\": {\"root['key1']\": {\"old_value\": \"value9\", \"new_value\": \"value1\"}}}"

再经Jinja2的 |tojson 过滤器（它会对字符串做HTML转义并加外层引号），最终生成的JS代码实际为：

jm-jsjkxyjs02-pzl-803

查询全球任意城市的实时天气和未来天气预报

下载

var diffValues = "{\"values_changed\": {\"root['key1']\": {\"old_value\": \"value9\", \"new_value\": \"value1\"}}}";

此时 diffValues 是字符串，diffValues.values_changed 必然为 undefined，后续访问自然报错。

✅ 正确做法：只序列化一次，且交由Jinja2的 |tojson 完成全部工作
Jinja2内置的 tojson 过滤器专为此场景设计：它会将Python原生对象（dict, list, bool, None等）安全地转换为等效的、HTML转义的JavaScript字面量，并自动处理引号、斜杠、Unicode等边界情况。你只需把原始Python对象（非字符串！）传入模板即可。

✅ 修正后的 Python 代码（helper.py）

import json
from jinja2 import Environment, FileSystemLoader

def create_html_content(diff_data):
    env = Environment(loader=FileSystemLoader('.'))
    template = env.get_template('template.html')

    # 关键修正：直接传入原始 diff 字典，不调用 json.dumps()
    data = {
        'suite_name': diff_data['suite_name'],
        'test_case_name': diff_data['test_case_name'],
        'expected_json_path': diff_data['expected_json_path'],
        'diff': diff_data['diff']['values_changed'],  # 用于表格渲染
        'diff_values': diff_data['diff']  # ← 原始 dict，非字符串！
    }

    html_content = template.render(data)
    return html_content

✅ 修正后的模板片段（template.html）

<script>
// ✅ 正确：|tojson 将 Python dict 转为 JS object 字面量
var diffValues = {{ diff_values | tojson }};

function submitSelected() {
    // 现在 diffValues 是真正的 JS 对象，可直接访问属性
    const selectedDiffs = {
        values_changed: {}
    };

    document.querySelectorAll('input[type="checkbox"]:checked').forEach(function(checkbox) {
        const attribute = checkbox.getAttribute('data-attribute');
        // ✅ 安全访问：diffValues.values_changed[attribute] 现在有效
        if (diffValues.values_changed.hasOwnProperty(attribute)) {
            selectedDiffs.values_changed[attribute] = diffValues.values_changed[attribute];
        }
    });

    // 发送请求...
    const xhr = new XMLHttpRequest();
    xhr.open("POST", "http://localhost:8000/submit", true);
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhr.send(JSON.stringify(selectedDiffs));

    xhr.onload = function() {
        alert(xhr.status === 200 
            ? 'Selected changes submitted' 
            : 'Failed to submit selected changes');
    };
}
</script>

⚠️ 注意事项与最佳实践

永远不要手动 json.dumps() + |tojson：这是最典型的双重编码陷阱。|tojson 已内置完整JSON序列化逻辑。
|tojson 是HTML安全的：它会自动转义 , <code>>, &, " 等字符，防止XSS；无需额外 replace('', '。
前端校验必不可少：即使后端数据可信，也建议在JS中用 hasOwnProperty() 或可选链 ?.（如 diffValues?.values_changed?.[attribute]）增强健壮性。
调试技巧：在浏览器控制台直接打印 typeof diffValues 和 console.dir(diffValues)，确认其为 object 而非 string。
扩展场景：若需在模板中复用 diff_values 渲染其他结构（如隐藏JSON字段），仍用 {{ diff_values | tojson }} —— Jinja2会保证每次输出一致、安全。