Jinja テンプレートから JSON データをレンダリングするときに、JSON.parse が「SyntaxError: Unexpected token '&'」で失敗するのはなぜですか?

Jinja テンプレートから JSON データをレンダリングするときに JavaScript SyntaxError が発生する

問題の説明

JavaScript を使用して Jinja テンプレートでレンダリングされた JSON データを反復処理しようとすると、ブラウザは「SyntaxError: Unexpected token '&'」エラーをスローします。この問題は、レンダリングされたデータに対して JSON.parse を呼び出すときに発生します。

解決策

Flask のテンプレート エスケープ

Flask の Jinja 環境は、セキュリティを軽減するためにテンプレートでレンダリングされたデータに自動 HTML エスケープを適用します。リスク。ただし、このエスケープはデータを JSON として解釈するのを妨げる可能性があります。

Flask は、この問題に対処するための tojson フィルターを提供します。 Python オブジェクトを JSON に変換し、レンダリングしても安全であるとマークします。

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

テンプレート内:

var tree = {{ tree|tojson }};

非 JSON レンダリング

データがJavaScript による使用を目的としていないため、tojson フィルターは不要です。必要に応じて、Python データを直接渡し、テンプレートでそれを利用することを検討してください。

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

テンプレート内:

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

エスケープの無効化

エスケープが必要ない場合すでに JSON データを文字列として持っている場合は、安全なフィルターを使用してエスケープを無効にするか、マークアップ。

安全なフィルターの使用:

return render_template('tree.html', tree=Markup(json.dumps(tree)))

テンプレート内:

var tree = {{ tree }};

マークアップの使用:

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

でテンプレート:

var tree = {{ tree|safe }};

以上がJinja テンプレートから JSON データをレンダリングするときに、JSON.parse が「SyntaxError: Unexpected token '&'」で失敗するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。