How to Safely Use JSON Data Rendered from a Jinja Template in JavaScript?

JavaScript Raises SyntaxError with Data Rendered in Jinja Template

Issue:

Attempting to utilize JSON data rendered in a Jinja template within JavaScript fails with a "SyntaxError: Unexpected token '&'." error. How can this rendered JSON data be effectively used in JavaScript?

Solution:

Flask's Jinja environment inherently escapes data rendered in HTML templates for security purposes. When passing Python objects to be interpreted as JSON, the tojson filter should be employed to appropriately convert and mark the data as safe:

return render_template('tree.html', tree=tree)

var tree = {{ tree|tojson }};

If JSON is not being rendered or has been previously converted to a string, the safe filter or Markup wrapper can be utilized to ensure safe rendering:

# already dumped to json
return render_template('tree.html', tree=json.dumps(tree))

var tree = {{ tree|safe }};

# already dumped and marked safe
return render_template('tree.html', tree=Markup(json.dumps(tree)))

var tree = {{ tree }};

Alternatively, if the data is being utilized solely within Jinja and not passed to JavaScript, JSON is not required. The original Python data can be passed and used directly in the template:

return render_template('tree.html', tree=tree)

{% for item in tree %}
    <li>{{ item }}</li>
{% endfor %}

The above is the detailed content of How to Safely Use JSON Data Rendered from a Jinja Template in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!