如何在外部 JavaScript 文件中安全传递 Jinja2 变量

jinja2 模板变量无法直接在外部 js 文件中使用,但可通过内联 `

在 Flask、Django(启用 Jinja2)等支持 Jinja2 的 Web 框架中,模板引擎仅处理 .html(或 .j2)文件中的 {{ }} 和 {% %} 语法;而外部 .js 文件由浏览器直接加载,不经过服务端渲染,因此其中的 {{ var }} 不会被解析,直接导致语法错误或空值。

✅ 正确做法:在 HTML 模板中,先用内联 ,确保变量在外部脚本执行前已挂载到全局作用域(如 window 或独立常量):


  

Hello, {{ user.name }}!

⚠️ 关键注意事项:

  • 永远使用 | tojson 过滤器(Jinja2 内置)序列化 Python 对象,它会自动转义特殊字符、添加引号,并生成合法的 JavaScript 字面量(如字符串加双引号、None → null、True → true),防止 XSS 和语法错误;
  • 避免直接写 const myVar = {{ var }}(未过滤),尤其当 var 是字符串或含 HTML 内容时,极易引发解析失败或安全漏洞;
  • 不要依赖 window.myVar 隐式挂载,显式声明(const / let)更清晰可控;若需跨模块访问,可统一挂载至 window.APP_DATA;
  • 外部 JS 中应校验变量存在性:
    // externalJs.js
    if (typeof APP_CONFIG !== 'undefined') {
      console.log('User ID:', APP_CONFIG.userId);
    } else {
      console.error('APP_CONFIG not provided by template');
    }

? 进阶建议:对复杂场景(如多页面共享配置),可封装为自定义 Jinja 宏或使用 data-* 属性 + document.currentScript 动态提取,但上述