前回の記事

ここで、XSS対策を避けながら記述する方法記したが、自分で使わないことを考慮すると、XSS対策を守りながら行う必要があった。そこで、XSS対策を避けずに正攻法でタグを反映させる方法を考えた。

方法

前回の最終コードindex.html

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>

前回の最終コード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に関しては | safe を外し、Flaskが本来もつXSS対策を利用します。
この時、配列で受け取れるようにして、for inループで配列の中身をすべて表示できるようにします。
この時に改行<br>を入れることで、きちんと改行されたい部分で改行できるようにします。

index.html

<html>
<body>
  <form action="/">
    <input type="url" name="url">
    <button type="submit" formmethod="post">Submit</button>
  </form>
  <div>
  {% for i in message %}
  {{ i }}<br>
  {% endfor %}
  </div>
</body>
</html>

app.js側では、配列をindex.html側に渡せるように、改行で配列に入れるように変更します。

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_ary = txt.splitlines()
    return render_template("index.html",message = txt_ary)


if __name__ == "__main__":
    app.run(host="0.0.0.0", port=3000, debug=True)

githubに公開してあるので、必要でしたらご確認ください。

まとめ

XSS対策を行いながらタグを反映させることは、無理くりやればできると思うが、見逃しなども増え保守や点検などが大変になりそうなので、多少手間ではあるがhtml側で表示を調整する方がよいと感じた。