前回の記事
ここで、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側で表示を調整する方がよいと感じた。