DjangoのHTMLで分からない点があります。

DjangoのChannelsのwebsocketでチャットを作るチュートリアルをやっているのですが、下記コードのScriptタグ内の一行目の
var roomName = "{{ room_name|escapejs }}";
の右の内容が全く分かりません。Djangoのタグで、データを取ってくるときに使うタグで、room_nameという変数は前のチャットルームを選択する画面で送られてくる情報であるということは分かっています。
ただescapejsが何なのか、そこが分かっていません。

ご教授願います。

JavaScript
1<!-- chat/templates/chat/room.html -->
2<!DOCTYPE html>
3<html>
4<head>
5    <meta charset="utf-8"/>
6    <title>Chat Room</title>
7</head>
8<body>
9    <textarea id="chat-log" cols="100" rows="20"></textarea><br/>
10    <input id="chat-message-input" type="text" size="100"/><br/>
11    <input id="chat-message-submit" type="button" value="Send"/>
12</body>
13<script>
14    var roomName = "{{ room_name|escapejs }}";
15
16    var chatSocket = new WebSocket(
17        'ws://' + window.location.host +
18        '/ws/chat/' + roomName + '/');
19
20    chatSocket.onmessage = function(e) {
21        var data = JSON.parse(e.data);
22        var message = data['message'];
23        document.querySelector('#chat-log').value += (message + '\n');
24    };
25
26    chatSocket.onclose = function(e) {
27        console.error('Chat socket closed unexpectedly');
28    };
29
30    document.querySelector('#chat-message-input').focus();
31    document.querySelector('#chat-message-input').onkeyup = function(e) {
32        if (e.keyCode === 13) {  // enter, return
33            document.querySelector('#chat-message-submit').click();
34        }
35    };
36
37    document.querySelector('#chat-message-submit').onclick = function(e) {
38        var messageInputDom = document.querySelector('#chat-message-input');
39        var message = messageInputDom.value;
40        chatSocket.send(JSON.stringify({
41            'message': message
42        }));
43
44        messageInputDom.value = '';
45    };
46</script>
47</html>

m.ts10806

2020/02/12 09:11

escapejs で検索するとそのまま出てきますが、それでは何が足らなかったのでしょうか。調べたことがあればきちんと追記してください

行動規範の内容に同意します

回答2件

escapeJS

JavaScript文字列で使用する文字をエスケープします。
これにより、文字列がHTMLまたはJavaScriptテンプレートリテラルで安全に使用できるようにはなりませんが、
テンプレートを使用してJavaScript / JSONを生成する際の構文エラーから保護されます。

投稿2020/02/12 09:11

azuapricot

総合スコア2341

ベストアンサー

Djangoテンプレート言語
 escapejs - 公式サイトDocument

var roomName = "{{ room_name|escapejs }}";

この縦棒|はフィルタというものです。
まぁ関数みたいなものです。

左の値が右側のフィルタの引数として実行され、
フィルタの結果が戻り値になるという仕組みです。

escapejsを実際に見てみましょう。

Escapes characters for use in JavaScript strings. This does not make the string safe for use in HTML or JavaScript template literals, but does protect you from syntax errors when using templates to generate JavaScript/JSON.

日本語訳するとこうなります。

JavaScriptの文字列で使用するためのエスケープ文字。
これは、HTMLまたはJavaScriptテンプレートで文字列を安全に使用することはできませんが、
テンプレートを使用してJavaScript/JSONを生成する際の構文エラーから保護します。

つまり、スクリプトタグ内でベタッと貼り付けてしまっているので、
;や{}等の文字列が含まれる場合、勝手にJSのコードが改行されたり変な動作を起こす可能性があるわけですね。
コレにより、ユーザー名等に無理やり任意コードを実行させるJavaScriptコードを仕込む余地があるとXSS脆弱性があることになります。
管理者用入り口を持つWebサービスから管理者のクッキー情報を抜き出して、悪意のコード実行者の持つサーバへAjax通信を投げて取得、それを元に管理者用入り口から入るなんて事も可能です。

この辺の背景もあるのでとりあえず付けとけみたいなフィルタとなっています。

投稿2020/02/12 09:22