Flaskで<br>タグをHTMLで動作できなかった
状況と原因
app.jsコード
app.js
from flask import Flask
from flask import render_template
from flask import request
from create_text import YoutubeText
app = Flask(__name__)
@app.route("/")
def main():
return render_template("index.html")
@app.route("/", methods=["POST"])
def users():
url = request.form["url"]
print("POST:"+url)
# Youtubeをテキスト化
txt = YoutubeText(url)
txt = txt.replace("\n","<br>")
return render_template("index.html",message = txt)
if __name__ == "__main__":
app.run(host="0.0.0.0", port=3000, debug=True)
index.html
index.html
<html>
<body>
<form action="/">
<input type="url" name="url">
<button type="submit" formmethod="post">Submit</button>
</form>
<div>
{{message}}
</div>
</body>
</html>
この時の実行結果は
実行結果
もっと木の笑顔がラストメディアその<br>秘密ミステリアス抜けてるとこさえ彼女の<br>エリア<br>完璧で嘘つきな君は天才的な<br>今日何食べた好きな本は<br>遊びに行くならどこに行くの何も食べて<br>ないそれは内緒何を聞かれても<br>のらりくらりそう淡々とだけどサンサンと<br>味噌で見えない水は3つの味あれもない<br>ないないこれもないないない好きなタイプ<br>は相手は<br>答えて誰かを好きになることなんて私<br>わからなくてさ<br>嘘か本当か知り得ないそんな言葉にまた<br>一人落ちるまた好きにさせる誰も目を奪わ<br>れてく君は<br>完璧で究<br>現れない一番星の生まれ変わりあーその<br>笑顔で愛してるで誰も誰も虜にしていく<br>その<br>瞳がその言葉が嘘でもそれは完全なはい<br>はいあの子は特別です<br>
このような形で、<br>タグが実行されず、そのままタグごと表示されている状態でした。
調べてみると、もとからFlaskに搭載されている |safeフィルタが使用されている様です。クロスサイトスクリプティング（XSS）攻撃に対するセキュリティを確保するためタグは強制的に無効化されるため、今回<br>タグは無効化されました。
解決方法
index.html
<html>
<body>
<form action="/">
<input type="url" name="url">
<button type="submit" formmethod="post">Submit</button>
</form>
<div>
{{message| safe }} <!--こちらはエスケープされているが下はされていない-->
{{ message }}
</div>
</body>
</html>
実行結果
もっと木の笑顔がラストメディアその
秘密ミステリアス抜けてるとこさえ彼女の
エリア
完璧で嘘つきな君は天才的な
今日何食べた好きな本は
遊びに行くならどこに行くの何も食べて
ないそれは内緒何を聞かれても
のらりくらりそう淡々とだけどサンサンと
味噌で見えない水は3つの味あれもない
ないないこれもないないない好きなタイプ
もっと木の笑顔がラストメディアその<br>秘密ミステリアス抜けてるとこさえ彼女の<br>エリア<br>完璧で嘘つきな君は天才的な<br>今日何食べた好きな本は<br>遊びに行くならどこに行くの何も食べて<br>ないそれは内緒何を聞かれても<br>のらりくらりそう淡々とだけどサンサンと<br>味噌で見えない水は3つの味あれもない<br>ないないこれもないないない好きなタイプ<br>
このように、html側でXSS対策を避けて、タグごと送信したものを反映させることができるようです。
警告
今回はユーザーからのインプットではなかったため、そのまま反映させましたが、XSS対策自体は非常に重要なものです。必要最低限で利用できるように心がけましょう
まとめ
初めて利用したFlaskで思いもよらないところで躓いてしまった。少しでも、他の方の参考になればうれしいです。
初めてのことだらけなので、他の方法や、もっと安全な方法がある場合は教えていただけると幸いです。