将Flask中的JSON对象传递给JavaScript

一尘不染

将Flask中的JSON对象传递给JavaScript

flask

我很难将Flask / Python变量传递给Javascript。

基本上，我是从MySQL导入的，并尝试以三种不同的方式呈现返回值。

(43.8934276, -103.3690243), (47.052060, -91.639868), (45.1118, -95.0396) 那是我的dict项目上运行以下命令时的输出。
new_list = [tuple(d.values()) for d in MySQL_Dict]
output = ', '.join('(' + ', '.join(i) + ')' for i in new_list)

此方法不好，但是我添加了详细信息，根本不是正确的格式。

我直接将python dict传递给看起来像这样的模板

({'lat': '43.8934276', 'lng': '-103.3690243'}, {'lat': '47.052060', 'lng': '-91.639868'}, {'lat': '45.1118', 'lng': '-95.0396'})

然后在模板方面，我尝试了以下JavaScript行

 var other_coords = {{ MySQL_Dict|tojson }}; 
 var other_coords = {{ MySQL_Dict|tojson|safe }};
 var still_more = JSON.parse(other_coords);

没有一个可以一起工作或单独工作。

我也尝试过从视图发送字典，该视图json_out = json.dumps(My_Dict)也不起作用。
所有这些都是为了将MySQL数据库的经纬度坐标转换为Google Maps API脚本。让我感到困惑的是，如果我只是将视图中的json.dump结果粘贴到Google Maps脚本中，它就可以完美地工作（在删除引号之后），但是如果我使用一个变量，它将对我不起作用。有人有建议吗？

阅读 1215

2020-04-06

共1个答案

一尘不染

似乎当前接受的答案中存在一个可能的安全漏洞：如果我们传递给javascript的对象的某个字符串中带有单引号，则该单引号不会被逸出json.dumps，因此允许注入任意代码转换成javascript。最好使用Flask的tojson()模板过滤器，请参阅docs，因为它可以对所有此类字符进行正确的转义（将它们替换为unicode代码）。

这是我的解决方案：

view.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def hello_world():
    user = {'firstname': "Mr.", 'lastname': "My Father's Son"}
    return render_template("index.html", user=user)

if __name__ == '__main__':
    app.run()

index.html

<p>Hello, <span id="username"></span></p>
<script>
    var user = JSON.parse('{{ user | tojson | safe}}');
    document.getElementById('username').innerHTML = user.firstname + " " +
            user.lastname;
</script>

生成的JS看起来像：

var user = JSON.parse('{"firstname": "Mr.", "lastname": "My Father\u0027s Son"}');

这是绝对安全的。例如，如果我们使用json.dumps-powered解决方案，我们将得到

var user = JSON.parse('{"firstname": "Mr.", "lastname": "My Father's Son"}');

这在语法上是不正确的（至少可以这样说）。

2020-04-06