「HTMLタグが使える掲示板アプリを作ってみた！」
そんな初心者エンジニアの作品が、たった1行の投稿で“乗っ取られて”しまうとしたら？
今回は、セキュリティの基本中の基本、「クロスサイトスクリプティング（XSS）」の実例を使って、
実際にどんな風に脆弱なサイトが攻撃されるのか、デモを交えて紹介します。
🎬 動画で見たい方はこちら
▶ YouTubeでデモを見る
💻 実際に動かしてみたい方はこちら
🔗 GitHubリポジトリ（XSSデモコード）
※ この内容は教育目的・セキュリティ啓発のためのものです。
実際のサービスや第三者への攻撃を目的とするものではありません。
XSS（クロスサイトスクリプティング）とは？
XSS（Cross-Site Scripting） とは、
悪意あるスクリプト（JavaScriptなど）を、Webページ上に注入して実行させる攻撃のことです。
たとえば掲示板やコメント欄に次のようなコードが投稿されてしまうと
<img src="invalid.jpg" onerror="alert('XSS')">そのページを見た他のユーザーのブラウザが勝手に動き、外部サイトに飛ばされたり、Cookieを盗まれたりすることがあります。
XSSが引き起こす可能性のある被害
- ユーザーのCookieやセッション情報の窃取
- 勝手なページリダイレクト（フィッシング）
- WebアプリのUI改ざんや、偽のフォーム挿入
- 広告の不正表示・詐欺リンクへの誘導
なぜXSSが起きてしまうのか？
XSSは、開発者が「ユーザーの入力をそのまま画面に表示してしまう」ことで発生します。
- ユーザーが送った内容を
<div>や<p>に そのままinnerHTMLで埋め込んでしまう - 「HTMLを自由に使ってOK」と、タグの入力を許可してしまう
- JavaScriptの実行を防ぐためのフィルタリングやサニタイズ処理をしていない
こうした設計だと、攻撃者はHTMLの中に不正なソースコードを“仕込む”ことができてしまいます。
危険なコード例
postContainer.innerHTML += `<p>${userInput}</p>`;一見すると普通の表示処理ですが、userInput に次のようなコードが入っていたらどうなるでしょう？
<img src="invalid.jpg" onerror="alert('XSS')">この <img> タグは、存在しない画像を指定して読み込みエラーを起こし、
そのタイミングで onerror に仕込んだ JavaScript（例：alert('XSS')）が実行されてしまいます。
今回の例は alert なので harmless に見えるかもしれませんが、これがたとえば次のようなコードだと？
<img src="x" onerror="location='https://hack-lab-256.com/'">掲示板を開いたユーザーが勝手に悪質サイトにリダイレクトされるなど、現実的な被害が起きてしまうのです。
もちろん、Cookieを取得されてしまえば、不正ログインなども起きえる可能性があります。
ハッカーはどうやって攻撃を見つけるのか？
実際の攻撃者（ハッカー）は、公開されたWebアプリを観察・調査して脆弱性を見つけ出します。
- URLやフォームをチェック
⇒入力欄があるか？ HTMLタグが入力できるか？ - 投稿結果を確認
⇒"<script>alert('xss')</script>"のようなテスト文字列を試す - 開発者のミスを見つける
⇒innerHTMLを使ってる箇所がないか。フィルターやエスケープ処理をしていない箇所はないか。 - 仕込みのコードを書く
⇒<img src=x onerror=...>など、ばれにくかったり、隙を突いたコードを仕込む
代表的なXSS攻撃文字列は、下記になります。
もちろん、これ以外にも多種多様な方法で攻撃をしてきます。
| 種類 | 攻撃コード | 特徴・備考 |
|---|---|---|
<script> タグ | <script>alert('XSS')</script> | 定番中の定番。最近は innerHTML では無効化されることが多い |
<img onerror> | <img src="x" onerror="alert('XSS')"> | 成功率高め。画像読み込み失敗時に alert 発火 |
<svg onload> | <svg onload="alert('XSS')"></svg> | SVGは <script> よりブロックされにくい。シンプルで強力 |
<iframe> タグ | <iframe src="javascript:alert('XSS')"></iframe> | 一部ブラウザで実行されないが、古い環境では有効だった |
実際にXSSでハッキングしてみた!!
それでは実際にXSSでWEBアプリに対してハッキングしてみようと思います。
コードは公開しているため、ご自身のPCで動かしながら試してもらえるといいかなと思います。
※dockerで配布しています。
💻 実際に動かしてみたい方はこちら
🔗 GitHubリポジトリ（XSSデモコード）
※セキュリティ教育のためのデモです。本動画は不正アクセスを推奨するものではありません。
新人エンジニアの挑戦：HTMLタグが使える掲示板を作ってみた！
僕はプログラミングを始めて半年の、まだまだ初心者エンジニア。
「何か自分の手で動くWebアプリを作ってみたい！」と思って、掲示板アプリを作ることにしました。投稿するとそのまま表示される、超シンプルな設計。
しかも、HTMLタグも使えるようにして、見た目をカスタマイズできるようにしたんです。実装できたときはうれしくて、
「これちょっとバズるんじゃない？」って、本気で思ってました。
このようなストーリーを想定して、HTMLタグが使える「掲示板アプリ」を作成しました。
主な特徴：
- 投稿フォームに名前とメッセージを入力して送信すると、すぐに下に表示されます
- メッセージは HTML タグ付きで表示されるので、文字色や大きさを変えたり、画像を表示したりもできます
- 投稿内容はサーバー上に保存され、ページを再読み込みしても表示され続けます
こんな感じで、文字の色を変えたりすることが可能です！
実際の動作
<b>太字</b>や<span style="color:red">赤文字</span>などのタグがそのまま使える- 一見、楽しくカスタマイズできる「遊べる掲示板」
でもこの自由度の高さが、「ある“落とし穴”」につながります…
ハッカーの登場：掲示板を偵察
彼はとある掲示板を見つけた。
見た目はシンプルで、誰でも自由に投稿できる仕様。投稿フォームを見ると、名前とメッセージを入力するだけ。
しかも、投稿された内容はそのままHTMLとして表示されているようだ。「ふーん…
<b>タグも通るのか」
「これは、<script>も通っちゃったりして？」彼は軽くソースを覗き、ブラウザのDevToolsを開く。
どうやらinnerHTMLが使われていて、フィルター処理もされていない。──「なるほど。これは……使えるな。」
このようなストーリーを想定し、掲示板アプリを偵察してみます。
どのようなタグが通るか確認
こちらは、HTMLタグでカスタマイズできる掲示板なので、HTMLタグは使えると思いますが、なにか制限がないのかを確認するため、とりあえずXSSができるHTMLタグを実行してみます。
<script>alert('xss')</script> ← scriptタグが通るか
<img src="x" onerror="alert('xss')"> ← イベント属性が効くか
<svg onload="alert('xss')"></svg> ← SVGタグの属性実行
<iframe src="https://hack-lab-256.com/"></iframe> ← iframe埋め込みが許可されているか
<math><mtext></mtext><script>alert(1)</script> </math> ← scriptタグのバイパス確認まずは、scriptタグを投稿してみました。
<script>alert('xss')</script>
これは表示はされましたが、アラートは出ませんでした。
これは innerHTML では script タグが実行されない というブラウザの仕様によるものです。
次に、iframeタグを投稿してみました。
<iframe src="https://hack-lab-256.com/"></iframe>
こちらは正常に外部ページが埋め込まれました。
XSSではありませんが、フィッシングやClickjackingの足がかりにはなる可能性があります。
<iframe src="javascript:alert('XSS')"></iframe>
意外にも、アラートが実行されてしまいました。
通常のブラウザではブロックされることが多いですが、
この掲示板では src="javascript:..." がそのまま動作してしまっています。
imgタグも投稿してみる。
<img src="x" onerror="alert('img-xss')">
これはよく使われるXSS手法のひとつで、画像読み込みエラー時にJavaScriptを実行する仕掛けです。
投稿すると、ページを表示した瞬間にアラートが発動しました。
ソースコードも確認
実際に XSS が可能であることは先ほどの実験で確認できましたが、念のためソースコードも確認しておきましょう。
もしクライアントサイドの JavaScript で実装されていれば、DevTools（開発者ツール）から直接コードを確認することも可能です。
コードを見てみると
やはり、投稿内容をそのまま innerHTML で挿入している処理が使われていました。
さらに、投稿されたメッセージもサニタイズされることなく、タグ付きのまま画面に表示されていることがわかります。
この時点で、掲示板が“スクリプト実行可能な環境”であることが明確になりました。
つまり、もう攻撃の準備は整ったと言ってよさそうです。
実行：XSSを使って自身のサイトにリダイレクトさせてみる
ここまでの偵察で、掲示板はHTMLタグ付きの投稿をそのまま表示しており、
JavaScriptのイベント属性（onerrorなど）もブロックされていないことがわかりました。
そこで、下記のコードを投稿してみます。
<img src="x" onerror="location='https://hack-lab-256.com/'">これは、存在しない画像を読み込もうとしてエラーを発生させ、
そのエラー発生時に onerror 属性内の JavaScript が実行されるという仕組みです。
投稿を送信後、掲示板のページを開いてみると…
なんと、自動で https://hack-lab-256.com/ にリダイレクトされてしまいました。
ユーザーは何も操作していないのに掲示板を表示しただけで攻撃者の指定したサイトに強制的に遷移してしまうという攻撃が成立してしまいます。
これ以降、このサイトは使うことはできず。全員このサイトに強制的に遷移してしまう現象になりました。
このように、たった1行のコードで、掲示板全体の信用が崩れるほどの被害を与えることができてしまいます。
過去の事例：YouTubeでもXSSが発生していた
2010年7月（※現在は修正済み）、当時の YouTube では、
コメント欄に <script> タグを含めることで JavaScript が実行されてしまうという、深刻なXSS脆弱性が存在していました。
脆弱性の内容
YouTubeでは本来、コメント欄に <script> などの危険なタグが入力された場合、
自動で無効化（エスケープ）する仕組みになっていました。
しかし当時の実装では、最初の <script> タグだけが正しくエスケープされ、2つ目以降はそのまま通ってしまうという重大な処理漏れがあったのです。
✅ 複数の
<script>タグを投稿すれば、実行可能なコードが差し込めた
実際に起きたこと
脆弱性が公表された直後、悪意あるユーザーたちが多数の動画ページにスクリプトを埋め込みました。
- 偽のポップアップメッセージを表示
- 偽ニュース記事を模したダイアログを表示
- 悪質な外部サイトへのリダイレクト
一部では Cookieの情報を盗んだり、偽のログインページを表示するコードもあったと言われています
今回のデモとの共通点
今回行った XSS デモと、このYouTubeの事例は構造的に非常によく似ています。
- 「投稿欄にコードを埋め込む」
- 「表示時にJavaScriptが実行される」
- 「リダイレクトなどの被害が発生する」
今回のデモでは意図的にエスケープ処理を省いていますが、実際の攻撃者はこうした“小さなフィルタ処理のミス”を狙ってくるのです。
XSSの脆弱性は、過去にも数多く発見されており、大手Webサービスであっても例外ではありません。
気になった方は、ぜひ他の事例も調べてみてください。
さいごに
今回のデモでは、HTMLタグが使えるシンプルな掲示板に、たった1行のコードを投稿するだけで
Webページが乗っ取られるようなXSS攻撃が成立する様子をお見せしました。
XSSは「初心者が作ったアプリだから起きる」と思われがちですが、
過去には YouTube や Google などの大手サービスでも発生したことがある、非常に現実的な脅威です。
今や、AIでアプリを自動生成できる時代。
「とりあえず動けばOK」ではなく、“安全に動作するか” を意識することがますます重要になっています。
折角作ったサービスも、たった1行で簡単に乗っ取られてしまう可能性があるのです。
📺 YouTubeではこの内容をわかりやすく動画で紹介しています。
今後もセキュリティに関する解説やデモを発信していきますので、
最新情報を見逃したくない方は、ぜひチャンネル登録をお願いします！
🎬 動画で見たい方はこちら
▶ YouTubeでデモを見る
💻 実際に動かしてみたい方はこちら
🔗 GitHubリポジトリ（XSSデモコード）
