Javascript 在 Flask jinja2 模板中无法正确渲染

Question

我正在使用 jinja2 编写 Flask 应用程序，并且尝试将我的 Python 变量传递到一些 Javascript 和 HTML 中。我制作了 Javascript 和 HTML 模板，但由于某种原因，Javascript 被渲染并显示在错误的位置，我不知道问题出在哪里。

传递 Python 数据并呈现模板的 Controller 代码是:

@info_page.route('/info.html', methods=['GET'])

def info():
    ''' Documentation here. '''

    session = db.Session()
    infoDict = {}
    jsDict = {}

    ... 

    infoDict['character'] = character
    infoDict['name']=name
    jsDict['powertree']=powertree

    js = render_template('powertree.js', **jsDict)
    infoDict['js']=js

    return render_template("info.html", **infoDict)

info.html 的模板是:

{% extends "layout.html" %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="    {{url_for('static',filename='css/index.css')}}">
{% endblock head %}

{% block code %}
   {{js}}
{% endblock code %}

{% block body %}
    <h1>{{name}}</h1>
  ...
{% endblock body %}

以及 powertree.js 的模板是:

 <script type='text/javascript'>
    $(document).ready(function() {

    var data = {{powertree}};
    console.log('hello, inside powertree');

    });
 </script>

渲染的 Javascript 代码明显地打印在我的网页顶部。查看 DOM 会发现它显示在 HTML 主体内，而不是显示在它所属的 HTML 头部内。如果我删除 {{js}}并将其替换为 powertree.js 中的实际代码，一切都呈现良好，并且按预期工作。不过，我宁愿将 Javascript 保存在一个单独的文件中，因为它会变得很长。为什么这不起作用？如何轻松地将变量传递到 Javascript 代码中以便我可以引用，在此示例中 {{powertree}}在我的js中？因为它只是在我的网页顶部明显地打印了 Javascript，这让我认为这是一个简单的语法错误，缺少或类似的东西，但我找不到任何东西。

谢谢。

Answer 1

对于所有文件扩展名为 .html 的文件来说，发生的情况是这样的(和 a few others )应用了某些安全性，即通过将 HTML 特殊字符(如 < 、 > 和其他一些 refer to the documentation )转换为等效的 html 实体来过滤它们。为了确保字符串不被转义，您需要将渲染部分更改为:

{% block code %}
   {{js|safe}}
{% endblock code %}

请注意，您必须确保您的代码不会包含任何原始用户输入，因为这会引发 XSS 漏洞。