先生と生徒の会話形式で理解しよう

生徒

「FlaskでWebアプリを作ってるんですが、XSSっていう攻撃を防がないと危ないって聞きました。どういう意味ですか？」

先生

「XSSは、Webアプリでよくあるセキュリティの問題のひとつです。フォームに入力された悪意あるコードが、そのまま画面に表示されると、ユーザーが攻撃される危険があるんですよ。」

生徒

「それってどうやって防げばいいんですか？初心者でもできる方法はありますか？」

先生

「もちろんありますよ！FlaskにはXSSを防ぐための便利な機能があらかじめ用意されているんです。それでは一緒にXSS対策を学んでいきましょう！」

1. XSS（クロスサイトスクリプティング）とは？

XSS（エックスエスエス）とは、Cross-Site Scripting（クロスサイトスクリプティング）の略で、Webアプリに悪意のあるスクリプトを入力させ、それを他のユーザーの画面で実行させる攻撃手法です。特に掲示板やコメント欄、入力フォームがあるWebアプリで発生しやすいのが特徴です。

ポイントは、「入力した本人ではなく、そのデータを表示した別のユーザーが被害にあう」という点です。見た目は普通の文字に見えても、中身に仕掛けがあると危険になります。

たとえば、次のようなJavaScriptコードを入力欄に書き込まれ、それがそのまま画面に表示されるとどうなるでしょうか。


<script>alert("ハッキング成功！")</script>

このコードが実行されると、ページを開いた人のブラウザで勝手にポップアップが表示されます。実際の攻撃では、ポップアップだけでなく、ログイン情報（クッキー）の盗み取りや、なりすまし操作に使われることもあります。

つまりXSSとは、「ユーザーの入力を信用しすぎることで起きる、非常に身近で危険なWebセキュリティ問題」なのです。

2. FlaskでXSS対策が必要な理由

FlaskでWebアプリを作ると、フォームやURLパラメータなどを通じて、ユーザーから自由な文字入力を受け取る場面が多くなります。この入力内容は一見ただの文字列に見えますが、実はHTMLやJavaScriptのコードがそのまま含まれている可能性があります。

もし、その入力値を何も考えずにHTMLに表示してしまうと、ブラウザはそれを「命令」として解釈し、スクリプトを実行してしまいます。これがXSSが起きる一番の原因です。

たとえば、次のような処理を想像してみてください。


# ユーザー入力をそのまま受け取る例
comment = request.form.get("comment")

このcommentの中身が安全な文字とは限りません。攻撃者は、見た目はコメントでも、中にスクリプトを仕込んで送信してきます。

そのためFlaskでは、「ユーザー入力は信用しない」ことが基本ルールになります。特に、画面に表示するタイミングでは、そのままHTMLとして出力しないことがとても重要です。

初心者向けポイント

自分のアプリを使うのが自分だけだとしても、入力欄がある以上、XSS対策は必要です。Flaskでは「表示するときに安全にする」仕組みが用意されているので、まずはそれを正しく使う意識を持ちましょう。

3. Flaskのテンプレートは自動でXSS対策してくれる

Flaskの画面表示には、Jinja2（ジンジャ・ツー）というテンプレートエンジンが使われています。Jinja2の便利なところは、テンプレートに値を埋め込むときに、危険な記号を自動でエスケープ（無害化）してくれる点です。

たとえば、ユーザーが入力した文字をそのまま表示したいとき、次のように{{ }}で囲んで書くだけでOKです。


<p>{{ user_input }}</p>

もしuser_inputの中に<script>のようなタグが混ざっていても、Jinja2が自動的に「ただの文字」として扱える形に変換してくれます。つまり、ブラウザが命令として実行しない状態にしてくれるので、XSS対策としてとても強力です。

初心者向け：自動エスケープのイメージ

たとえば入力が<b>太字</b>だった場合でも、表示は太字にならず、画面には<b>太字</b>という文字列として出ます。これが「勝手にHTMLとして解釈させない」仕組みです。

まずは「テンプレートでは基本的に{{ }}で表示すれば安全になりやすい」と覚えておくと、FlaskでのXSS対策がぐっと身近になります。

4. FlaskでXSS対策が無効になる危険なコード

Flask（Jinja2）は通常、{{ }}で表示する値を自動でエスケープしてくれるので安全です。ところが、表示のときに|safeフィルターを付けると、その自動エスケープが止まってしまうため、一気にXSSの危険が高まります。

たとえば次のような書き方は避けましょう。入力にHTMLやJavaScriptが混ざっていた場合、ブラウザが「文字」ではなく「命令」として解釈してしまう可能性があります。


<p>{{ user_input|safe }}</p>

初心者向け：なぜ危ないの？

|safeは「この値は安全だから、そのままHTMLとして表示していいよ」という意味になります。つまり、<script>のようなタグが入っていても、ブロックせずに通してしまいます。

「デザインのためにタグを使いたい」と思っても、まずは|safeを使わずに表示するのが基本です。どうしても必要な場合は、表示してよい内容を自分で厳しく制限できるときだけにしましょう。

初心者のうちは、ユーザー入力に対して|safeは使わないと決めておくのが一番シンプルで安全です。

5. 簡単なサンプル：入力された名前を表示するだけのFlaskアプリ

Flaskを使って、名前をフォームから受け取り、画面に表示するだけの簡単なサンプルでXSS対策を体験してみましょう。


from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def index():
    name = ""
    if request.method == "POST":
        name = request.form.get("name", "")
    return render_template("index.html", name=name)

if __name__ == "__main__":
    app.run(debug=True)

6. HTMLファイル（テンプレート）での表示

次に、HTMLファイルでユーザーが入力した名前を表示する部分です。ここでは{{ name }}と書くだけで、Flaskが自動でエスケープしてXSS対策してくれます。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>XSS対策デモ</title>
</head>
<body>
    <h1>名前を入力してください</h1>
    <form method="POST">
        <input type="text" name="name">
        <button type="submit">送信</button>
    </form>
    {% if name %}
        <p>こんにちは、{{ name }}さん！</p>
    {% endif %}
</body>
</html>

7. もしXSS対策がなかったら…

たとえば、フォームに次のように入力されたとします。


<script>alert("攻撃成功！")</script>

これを|safe付きで表示していたら、ブラウザで本当にポップアップが出てしまい、攻撃が成功してしまいます。

だからこそ、ユーザーの入力はそのまま画面に出してはいけないのです。

8. 自動エスケープの仕組みを知ろう

Flask（Jinja2）のエスケープは、「記号」を安全な文字に置き換える仕組みです。たとえば：

<（小なり） → <
>（大なり） → >
&（アンド） → &

このように変換されることで、スクリプトが動かなくなる＝安全になる、という仕組みです。

9. 他にも気をつけるポイント

XSSは、JavaScriptだけでなく、画像タグ・リンクタグ・スタイル属性などにも仕込まれることがあります。

たとえば、次のような画像タグに見せかけたスクリプトが仕込まれることも。


<img src="x" onerror="alert('攻撃')">

これもFlaskのエスケープ機能で防げますが、外部のHTMLをそのまま表示しない・|safeを使わないなどを徹底することが重要です。

まとめ

FlaskでXSS（クロスサイトスクリプティング）を防ぐためには、ユーザーが入力した内容をそのまま画面に表示しないことが何よりも大切です。この記事で学んだように、FlaskはJinja2テンプレートエンジンを使って入力された文字を自動でエスケープするため、基本的な表示であれば特別な設定をしなくてもXSS対策が働きます。しかし、実際のWebアプリケーションの開発では、フォーム入力やコメント投稿機能、ユーザー名の表示など、多様な場面でユーザーのデータを扱うため、常に安全な表示を心がける必要があります。とくに|safeを使うと自動エスケープが無効化されてしまうため、初心者は特に慎重に取り扱うべきポイントです。ここでは、FlaskでXSS対策を行うための基本的な考え方、テンプレートにおける安全なデータ表示方法、エスケープの仕組み、危険なコード例、そして安全なサンプル構成をさらに深く理解できるよう、追加の説明とともに整理します。これにより、フォーム機能や表示機能を備えたWebアプリを安全に運用するための知識がより確かなものとなります。

XSS対策の基礎をしっかり理解しよう

XSSは、ユーザーが入力したデータに悪意あるJavaScriptが含まれていた場合、それが画面に表示された際にブラウザで実行されてしまう攻撃です。この仕組みを防ぐためにFlask（Jinja2）は自動で危険な文字を別の安全な文字に変換するエスケープ処理を行います。たとえば、ユーザーが入力した<script>という記号はそのまま表示されず、安全な文字列に置換されるため、ブラウザで実行されることはありません。こうした自動エスケープは、初心者にとって非常に助けになる仕組みです。

Flaskテンプレートでの安全な表示方法

テンプレート内でユーザー入力を表示するときは、{{ user_input }}のように二重波括弧で囲むだけで安全な表示になります。これはFlaskが内部で危険な文字を変換してくれるためです。しかし、|safeを付けてしまうと、この保護が外れてしまい、悪意あるスクリプトがそのまま実行される可能性があるため、むやみに使ってはいけません。特に初心者のうちは、|safeを使わずに安全な表示を保つことが基本です。


<p class="user-output">{{ user_input }}</p>

このような基本的な書き方を守るだけで、XSS攻撃の大半は防ぐことができます。また、自動エスケープの仕組みを知っておくことで、コードを確認するときに「どこが安全でどこが危険か」を判断しやすくなります。

Flaskアプリでの安全な受け取りと表示の流れ

次に、Flaskアプリ全体として安全にデータを受け取り、表示する流れを再確認してみましょう。以下は安全なフォーム送信と表示を行うためのサンプルコードです。


from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def index():
    message = ""
    if request.method == "POST":
        message = request.form.get("message", "")
    return render_template("safe.html", message=message)

if __name__ == "__main__":
    app.run(debug=True)


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>安全な表示デモ</title>
</head>
<body>
    <h1>メッセージを入力してください</h1>
    <form method="POST">
        <input type="text" name="message">
        <button type="submit">送信</button>
    </form>
    {% if message %}
        <p class="result">入力された内容：{{ message }}</p>
    {% endif %}
</body>
</html>

この例では、ユーザーの入力を受け取ってそのままテンプレートに渡していますが、テンプレート側で自動エスケープされるため、XSS攻撃を防ぐことができます。こうした構造はFlaskにおける基本パターンとして覚えておくと非常に役立ちます。

危険なケースを見て安全意識を高める

エスケープが無効化されている場合、次のようなスクリプトが実行されてしまいます。


<p>{{ user_input|safe }}</p>

この書き方は非常に危険で、決して軽い気持ちで使用してはいけません。特に複雑なHTMLを扱う場面や外部サービスからのデータを表示する場面では注意し、信頼できないデータに対して|safeを使用しないことを徹底しましょう。

XSSはJavaScriptだけではない

XSS攻撃はJavaScriptだけでなく、画像タグ、リンクタグ、スタイル属性などにも仕込まれることがあります。たとえば次のようなコードが入力されてしまうと、ブラウザが画像エラーを起こした瞬間にスクリプトが実行される危険があります。


<img src="x" onerror="alert('攻撃が実行されました')">

こうした入力もFlaskの自動エスケープによってそのままでは動かなくなりますが、もし|safeを付けてしまった場合には攻撃が成立するため、注意すべきポイントが多いことを常に意識しておきましょう。

先生と生徒の振り返り会話

生徒

「XSSって最初は難しそうでしたけど、入力した文字が危険な動きをしないように守る仕組みなんですね！」

先生

「その通り。まずは“ユーザー入力をそのまま使わない”という基本を守ることが大切なんだよ。」

生徒

「{{ }}で囲むだけで安全になるのは本当に便利ですね。でも|safeを使うと危険になることもよくわかりました！」

先生

「そうだね。便利な反面、扱いを間違えると攻撃を許してしまうから慎重にね。安全なアプリ作りの意識がとても大切なんだ。」

生徒

「入力内容を安全に表示する仕組みを理解できたので、これからアプリを作るときも意識してみます！」

先生

「素晴らしいね。これを基本に、他のセキュリティ対策にも挑戦していこう。」

この記事を読んだ人からの質問

FlaskでXSS（クロスサイトスクリプティング）を防ぐ基本対策まとめ