Javascript無法在Flask jinja2模板中正確呈現

Question

我正在使用jinja2編寫Flask應用，並且試圖將我的Python變量都傳遞給某些Javascript和HTML。 我制作了Javascript和HTML模板，但是由於某種原因Java語言被渲染並顯示在錯誤的位置，因此我無法弄清楚問題出在哪里。

傳遞我的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的模板為：

{% 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代碼中，以便在js中的本示例{{powertree}}中進行引用？ 因為它只是在頁面頂部明顯地顯示Javascript，所以讓我認為這是一個簡單的語法錯誤，缺少內容或類似內容，但是我什么也找不到。

謝謝。

Answer 1

發生的事情是，對於文件擴展名為.html所有文件（以及其他一些文件 ），都應用了某些安全措施，即通過將html特殊字符（例如< ， >和其他一些文件 ， 請參見文檔 ）轉換為HTML特殊字符進行過濾等效的html實體。 為了確保不對字符串進行轉義，您想將渲染部分更改為：

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

請注意，您必須確保您的代碼不會包含任何原始用戶輸入，因為這會打開XSS漏洞。

Answer 2

另一個解決方案是使用Markup類將js變量標記為可以安全地直接包含在python代碼中：

from jinja2 import Markup

infoDict['js']= Markup(js)

這比在模板代碼中使用|safe過濾器更可取，因為：

1. 您可以指示變量在定義的位置是安全的； 這避免了必須記住此信息，並可能防止了兩次轉義。
2. 如果模板和Python代碼是分開編寫的（例如，由兩個不同的人或在不同的時間編寫），則無需向模板設計者傳達變量的安全性。