HTML code内の記述をそのまま表示したい。FlaskのXSS対策HTMLエスケープと両立させたい

前提

Flaskを利用した記事投稿プラットフォームを作っています。おおまかなシステムは出来上がりました。
記事はマークダウンで記述することができ、XSS対策として一部のHTMLを使用することができます。使用できないHTMLはPythonでエスケープします。
エスケープ処理は以下のコードで行っています。

Python
1import bleach
2bleach.clean(article.content, tags=["div","br","span","img","code","pre"],attributes={"*":["style"],"img":["src","width","height"]},styles=["color","margin"])

実現したいこと

NoteやQiita、teratailなどと同じようにソースコードの貼り付けを可能にしたい。

現状

<pre><code></code></pre>内にコード（HTML）を記述すると、bleachのホワイトリストに登録したタグはそのまま解釈してしまいます。また、<!DOCTYPE html>などは表示すらされず消えてしまいます。

ブラウザ側のJavaScriptで<pre></pre>内の特殊文字をエスケープしてそのまま表示されるようにしたのですが、ホワイトリスト以外のタグは「&」など、特殊文字コードで表示されてしまいます。

どなたか回答よろしくお願いいたします。

追記

マークダウンで記述するようにしているため、{{content | markdown}} と、フィルターをかけています。
以下のコードのようにJavaScriptで<pre>内をエスケープする処理も考えましたが、bleachで許可していないタグなどは特殊文字で表示されてしまいます。予めエスケープされているので当然といえば当然なのでしょうが....

JavaScript
1 var escapeHtml = (function (String) {
2  var escapeMap = {
3    '&': '&amp;',
4    "'": '&#x27;',
5    '`': '&#x60;',
6    '"': '&quot;',
7    '<': '&lt;',
8    '>': '&gt;'
9  };
10  var escapeReg = '[';
11  var reg;
12  for (var p in escapeMap) {
13    if (escapeMap.hasOwnProperty(p)) {
14      escapeReg += p;
15    }
16  }
17  escapeReg += ']';
18  reg = new RegExp(escapeReg, 'g');
19  return function escapeHtml (str) {
20    str = (str === null || str === undefined) ? '' : '' + str;
21    return str.replace(reg, function (match) {
22      return escapeMap[match];
23    });
24  };
25}(String));
26
27var pre = document.querySelectorAll('pre');
28for(var i = 0; i < pre.length; i++) {
29  pre[i].innerHTML = escapeHtml(pre[i].innerHTML);
30}

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

回答1件

やりたいことを誤解しているかもしれませんが、Flaskはrender_template()で値を渡し、マスタッシュ記法内{{}}に記載したものは自動的にエスケープしてくれます。
表示するだけなら、bleachを使わなくてもエスケープしてくれると思うのですが、この動作とやりたいことに乖離があったりしますか？

以下はエスケープされているのを確認できる例です。
app.pyを実行し、表示されたupload3.htmlのcode_textにHTMLを入力した場合、エスケープされたHTMLが表示されます。(upload3.htmlのHTMLをそのままペーストし、表示した場合の例：表示.html)
同様にcode_textに<script>alert(1);</script>を入力して実行してもalertは表示されません。

python
1# app.py
2from flask import Flask, request, render_template
3
4app = Flask(__name__)
5
6
7@app.route('/upload3', methods=['GET', 'POST'])
8def upload3():
9    if request.method == 'GET':
10        return render_template('upload3.html')
11    elif request.method == 'POST':
12        code = request.form.get('code_text', None)
13        return render_template('upload3.html', code=code)
14
15
16if __name__ == '__main__':
17    app.run()
18

html
1<!-- upload3.html -->
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <title>upload</title>
7</head>
8<body>
9    <form method="post" action="{{ url_for('upload3') }}" enctype="multipart/form-data">
10      <textarea name="code_text" rows="10" cols="50"></textarea><br>
11      <input type="submit" value="分析する">
12    </form>
13    <pre>{{ code }}</pre>
14</body>
15</html>

html
1<!-- 表示.html -->
2
3
4<!DOCTYPE html>
5<html lang="ja">
6<head>
7    <meta charset="UTF-8">
8    <title>upload</title>
9</head>
10<body>
11    <form method="post" action="/upload3" enctype="multipart/form-data">
12      <textarea name="code_text" rows="10" cols="50"></textarea><br>
13      <input type="submit" value="分析する">
14    </form>
15
16    <pre>&lt;!DOCTYPE html&gt;
17&lt;html lang=&#34;ja&#34;&gt;
18&lt;head&gt;
19    &lt;meta charset=&#34;UTF-8&#34;&gt;
20    &lt;title&gt;upload&lt;/title&gt;
21&lt;/head&gt;
22&lt;body&gt;
23    &lt;form method=&#34;post&#34; action=&#34;{{ url_for(&#39;upload3&#39;) }}&#34; enctype=&#34;multipart/form-data&#34;&gt;
24      &lt;textarea name=&#34;code_text&#34; rows=&#34;10&#34; cols=&#34;50&#34;&gt;&lt;/textarea&gt;&lt;br&gt;
25      &lt;input type=&#34;submit&#34; value=&#34;分析する&#34;&gt;
26    &lt;/form&gt;
27    &lt;pre&gt;{{ code }}&lt;/pre&gt;
28&lt;/body&gt;
29&lt;/html&gt;</pre>
30
31
32</body>
33</html>

投稿2020/09/18 01:32

FiroProchainezo

総合スコア2424

Y.NINOMIYA

2020/09/18 03:36

やりたいことはそのようなことです。サンプルの動作も確認できました。ただ、マークダウンで記事を書くため、{{ content | markdown}} などのようにフィルターを通してHTMLに整形して出力しています。そのため、bleachで許可していないタグなどはエスケープするようにしていました。現状、ホワイトリストにあるタグが解釈されてしまうのは当然という状況ではあるのですが.... 解釈されないようにJavaScript側で<pre>内をエスケープする処理なども考えたのですが、ホワイトリスト以外のタグは特殊文字コードで表示されてしまいます。