Flask jinja2模板中的Javascript未正确呈现

Question

我正在用jinja2编写一个Flask应用程序，并尝试将Python变量都传递到一些Javascript和HTML中。我制作了Javascript和HTML模板，但由于某些原因，Javascript呈现和显示在错误的地方，我不知道问题出在哪里。在

传递Python数据并呈现模板的控制器代码是：

@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的模板是：

^{pr2}$

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保存在一个单独的文件中，因为它会很长。为什么这个不管用？在这个例子中，{{powertree}}在我的js中，我如何轻松地将变量传递到Javascript代码中以便引用？因为它只是在我的网页顶部明显地打印了Javascript，它让我觉得这是一个简单的语法错误，有一个缺失或类似的东西，但我找不到任何东西。在

谢谢。在

Answer 1

另一种解决方案是使用^{}类，将js变量标记为可直接包含在python代码中：

from jinja2 import Markup

infoDict['js']= Markup(js)

这比在模板代码中使用|safe过滤器更好，因为：

1. 您可以指示变量在定义它的地方是安全的；这避免了必须记住这些信息，并可能防止双重转义。在
2. 如果模板和Python代码是分开编写的（例如由两个不同的人编写，或者在不同的时间编写），则不需要将变量的安全性传递给模板设计者。在

Answer 2

对于文件扩展名为.html（和a few others）的所有文件，都应用了某些安全措施，即通过将html特殊字符转换为等价的html实体，过滤掉html特殊字符（如<，>和其他一些字符refer to the documentation）。要确保字符串不会转义，请将渲染部分更改为：

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

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