Django(2.1.3)でViewからテンプレートへ渡した変数をJavaScriptで利用する方法

Question

#開発環境
Mac：Mojave 10.14.1
Python：3.6.5
Django：2.1.3

#Viewから渡した変数がTemplate上のscriptタグ内で展開できない
Djangoでは通常、Viewから渡された変数をテンプレートで展開する場合、

<p>{{ context }}</p>

のように記述するかと思いますが、同様にscriptタグ内で展開しようと

<p>{{ context }}</p>
<script>
var con = {{ context }}
console.log(con)
</script>

とすると、「Uncaught SyntaxError: Invalid or unexpected token」
とエラーが出てしまいます。

#知りたいこと

1. Viewから渡された変数をJavaScriptで利用する場合、どのように取り扱うべきでしょうか。

2. ただstringやintを渡す場合はカスタムデータ属性に埋め込むことで、面倒ながらJavaScriptでの利用はできると思いますが、ViewからTemplateへJSONデータを渡したい場合はどのようにすべきでしょうか。

よろしくお願い致します。

Answer 1

セキュリティ面（ XSS 対策）を考慮して、 Django 2.1 から使える json_script フィルタを使うのがよいかと思います。

以下、 Django の公式ドキュメントの説明そのままですが、 {'hello': 'world'} という dict を格納した変数 value がテンプレートに渡されているものとします。それに対して次のように json_script フィルタを適用すると

{{ value|json_script:"hello-data" }}

次のような HTML が生成されます。

<script id="hello-data" type="application/json">{"hello": "world"}</script>

ですので、後は JavaScript 側で JSON.parse() を使ってこの中身を読み込めば OK です。

var value = JSON.parse(document.getElementById('hello-data').textContent);

json_script は < > & 等をエスケープして自動で XSS 対策を行ってくれます。

公式ドキュメントの該当箇所もご覧になってみてください:

• json_script | Built-in template tags and filters | Django documentation | Django

Comments

[segawan]

該当ページのescapejsまでは読んでいたのですがなぜかjson_scriptの項を読みこぼしていました...
実際に試してみて解決できました。ご丁寧にご説明頂きありがとうございます。

[gh640]

そうでしたか。ご解決されたとのことで、よかったです。