Jinja传变量到JS的安全方式

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《Jinja 传递变量到 JS 的安全方法》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

Jinja 变量无法直接在外部 JS 文件中渲染，需通过内联 `

在 Flask、Django（Jinja2 后端）等模板驱动的 Web 应用中，开发者常需将服务端动态数据（如用户 ID、配置项、API 路径）传递给前端 JavaScript 逻辑。虽然 {{ var }} 在内联

// static/js/app.js
console.log('User ID:', APP_CONFIG.userId);        // ✅ 正常输出
console.log('API endpoint:', APP_CONFIG.apiUrl);   // ✅ 字符串自动加引号
console.log('Features:', APP_CONFIG.features);       // ✅ 支持数组、对象、布尔值、null

⚠️ 重要注意事项：

• 务必使用 | tojson 过滤器（Jinja2 内置）：它会自动转义特殊字符、添加引号，并保证输出合法的 JSON，避免 XSS 风险和语法错误。切勿直接写 {{ var }}（尤其当 var 是字符串时易引发 JS 解析失败）。
• 避免污染全局命名空间：建议将多个变量封装进单一命名对象（如 APP_CONFIG），而非声明多个全局变量，便于维护和 Tree-shaking（若后续接入模块打包）。
• 加载顺序不可颠倒：