APIが「毒入りの手紙」を届けてしまう？XSSを防ぐための賢い防衛術
こんにちは！ネットワークの世界の奥深さに魅せられ、日々パケットの行方を追いかけているインフラエンジニアです。
今日は、Web API開発において絶対に避けて通れない「XSS（クロスサイトスクリプティング）」という脅威について、少しお話ししたいと思います。「APIなのにXSS？」と不思議に思う方もいるかもしれませんね。でも、APIがフロントエンド（ブラウザ）と密接に関係している以上、この対策は避けて通れない「必須の教養」なんです。
一緒に、一歩ずつ紐解いていきましょう！
—
1. そもそもXSSって何？ 「郵便配達」で例えてみよう
Webの世界を「手紙のやり取り」に例えてみましょう。
- APIサーバー: 手紙を書いて送る「差出人」
- ブラウザ: 手紙を受け取って中身を読み上げる「受取人」
本来、APIサーバーは「名前は山田太郎です」といった、ただのデータ（手紙）を送るのが仕事です。しかし、悪意のある攻撃者が、そのデータの中に「この手紙を読み上げるとき、裏で勝手に怪しいサイトへ誘導する命令（JavaScript）を実行せよ！」という細工を仕込むことがあります。
もし、ブラウザがその命令をそのまま信じて実行してしまうと……これがXSSです。まるで「手紙の中に爆竹が仕込まれていた」ような大惨事ですよね。
—
2. 第一の防衛線：Content-Typeという「荷札」を正しく貼る
APIがブラウザにデータを送るとき、必ず Content-Type というヘッダーを付けます。これは郵便で言えば「これは書類ですよ」「これは写真ですよ」と書かれた荷札のようなものです。
もし、この荷札を間違えて text/html と書いてしまうと、ブラウザは「おっ、これはHTML（Webページ）だな！よし、中に書いてある命令を全部実行しよう！」と勘違いしてしまいます。これが最も危険な状態です。
対策：正しい荷札を貼ろう
APIがJSONデータを返すなら、迷わず application/json を指定しましょう。
# APIサーバーから送るヘッダーの例
Content-Type: application/json; charset=utf-8このように明確に「これはただのデータです」と宣言することで、ブラウザは「命令」として解釈するのをやめ、安全な「文字列」として扱ってくれるようになります。
—
3. 第二の防衛線：データを「無害化」する
もし、APIが返すデータの中に、ユーザーが入力した「 <script>alert('危険！')</script> 」のような文字列が含まれていたらどうなるでしょうか？
たとえ Content-Type が正しくても、フロントエンド側のJavaScriptがそのデータを innerHTML などを使って画面に書き出す際、ブラウザが再び「あ、これHTMLの命令だ！」と勘違いすることがあります。
実践：エスケープ処理（文字の「変装」）
データに含まれる特殊な記号を、ブラウザが「命令」として認識できない別の文字に変換する「エスケープ」という処理を行います。
例えば、PythonのフレームワークやPHPなどでAPIを作る際、データは以下のように処理します。
# Pythonでのエスケープ処理のイメージ
import html
# 危険な文字を含んだユーザー名
user_input = "<script>alert('hack')</script>"
# 記号を「ただの文字」に変装させる
safe_output = html.escape(user_input)
# 結果: <script>alert('hack')</script>
# これならブラウザは「画面にタグをそのまま表示する」だけで、命令は実行しません！—
4. まとめのチェックリスト
現場でAPIを設計・開発する際は、以下の2点を「お守り」のように持っておいてください。
1. レスポンスヘッダーを確認する: Content-Type: application/json が正しく設定されているか？（不要な text/html などを避ける）
2. フロントエンドを信じすぎない: API側でデータを返す際、必要に応じてエスケープ処理を行い、フロントエンド側でも「受け取ったデータは信頼しない」という原則で表示処理（textContentを使うなど）を徹底する。
—
最後に：ネットワークは「信頼」の上に成り立つ
API設計は、単にデータを効率よく運ぶだけでなく、「相手（ブラウザ）を混乱させない」という配慮がとても大切です。
最初は難しく感じるかもしれませんが、パケットの一つ一つに「安全に届けるためのルール」が込められていると想像すると、少しワクワクしませんか？
皆さんの作るAPIが、今日も安全に、そして元気にネットワークを駆け巡ることを応援しています！また次回の記事でお会いしましょう！
コメント