JavaScriptの脆弱性チェックを完全ガイド！初心者も理解できる解説とサンプルコード10選

はじめに
●JavaScriptの脆弱性とは
- ○XSS（クロスサイトスクリプティング）
- ○CSRF（クロスサイトリクエストフォージェリ）
●脆弱性チェックの方法
- ○静的解析ツール
- ○動的解析ツール
●サンプルコード10選
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptの脆弱性をチェックし、セキュリティ対策ができるようになります。

JavaScript初心者でもわかるように徹底解説していきますので、安心して読み進めてください。

●JavaScriptの脆弱性とは

JavaScriptはWebアプリケーションでよく使われるプログラミング言語ですが、そのコードには脆弱性が潜んでいることがあります。

主な脆弱性として、下記の2つがあります。

○XSS（クロスサイトスクリプティング）

XSSは、悪意のあるスクリプトがWebアプリケーション上で実行される脆弱性です。

これにより、ユーザーの情報が盗まれたり、悪意ある操作が行われることがあります。

○CSRF（クロスサイトリクエストフォージェリ）

CSRFは、ユーザーが意図しないアクションを強制される脆弱性です。

攻撃者がユーザーの権限を悪用して、Webアプリケーション上で不正な操作を行うことができます。

●脆弱性チェックの方法

JavaScriptの脆弱性をチェックする方法として、主に下記の2つの手法があります。

○静的解析ツール

静的解析ツールは、コードを実行せずに脆弱性を検出するツールです。

コードの構文や構造を調べることで、脆弱性が存在する可能性がある箇所を特定します。

○動的解析ツール

動的解析ツールは、実際にコードを実行して脆弱性を検出するツールです。

実行中のアプリケーションに対してテストを行い、脆弱性が発生する状況を再現します。

●サンプルコード10選

ここでは、JavaScriptの脆弱性対策として役立つサンプルコードを10選紹介します。

初心者の方でも理解できるように、詳細な説明とコメントを日本語で記載しています。

○サンプルコード1：XSS対策

下記のコードは、innerHTMLを使用せず、textContentを使用することでXSS対策を行っています。

// ユーザーからの入力を取得
const userInput = document.getElementById("input").value;

// XSS対策：innerHTMLの代わりにtextContentを使用
document.getElementById("output").textContent = userInput;

○サンプルコード2：CSRF対策

次のコードは、CSRF対策としてトークンを使用しています。

送信時にトークンを検証し、正当なリクエストであることを確認しています。

// トークンを生成
function generateToken() {
  return Math.random().toString(36).substr(2, 10);
}

// トークンを検証
function verifyToken(serverToken, clientToken) {
  return serverToken === clientToken;
}

// トークンを隠しフォームに追加
const token = generateToken();
document.getElementById("hiddenToken").value = token;

// 送信時にトークンを検証
document.getElementById("submit").addEventListener("click", () => {
  const serverToken = token;
  const clientToken = document.getElementById("hiddenToken").value;

  if (verifyToken(serverToken, clientToken)) {
    // トークンが一致する場合、処理を実行
    console.log("正しいリクエストです");
  } else {
    // トークンが一致しない場合、エラーを表示
    console.log("不正なリクエストです");
  }
});

○サンプルコード3：Content Security Policy (CSP)

Content Security Policyは、Webアプリケーションのセキュリティポリシーを定義するための技術です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
  <title>サンプルコード3：CSP</title>
</head>
<body>
  ...
</body>
</html>

○サンプルコード4：安全なAJAX通信

次のコードは、安全なAJAX通信を行うためのサンプルです。

リクエストにトークンを付与し、サーバー側でトークンを検証しています。

const xhr = new XMLHttpRequest();
xhr.open("POST", "/api/data");
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.setRequestHeader("X-CSRF-Token", token); // トークンをヘッダーに追加

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log("通信成功");
  } else {
    console.log("通信失敗");
  }
};

xhr.send(JSON.stringify({ data: "example" }));

○サンプルコード5：安全なlocalStorage操作

次のコードは、安全にlocalStorageを操作するためのサンプルです。

データの取得や保存時に、エラーハンドリングを行っています。

// データを安全に保存
function safeSetItem(key, value) {
  try {
    localStorage.setItem(key, JSON.stringify(value));
  } catch (e) {
    console.error("データの保存に失敗しました");
  }
}

// データを安全に取得
function safeGetItem(key) {
  try {
    return JSON.parse(localStorage.getItem(key));
  } catch (e) {
    console.error("データの取得に失敗しました");
    return null;
  }
}

// 使用例
safeSetItem("exampleKey", { data: "exampleValue" });
console.log(safeGetItem("exampleKey"));

○サンプルコード6：安全なクリックイベント

次のコードは、安全なクリックイベントのサンプルです。

イベントリスナー内で、クリックされた要素の属性を確認し、意図した要素であることを検証しています。

document.addEventListener("click", (event) => {
  // クリックされた要素がボタンであることを確認
  if (event.target.tagName === "BUTTON" && event.target.id === "exampleButton") {
    console.log("ボタンがクリックされました");
  } else {
    console.log("意図しない要素がクリックされました");
  }
});

○サンプルコード7：安全なフォームデータ送信

次のコードは、フォームデータを安全に送信するためのサンプルです。

送信前に入力値の検証を行い、不正な値が含まれていないことを確認しています。

document.getElementById("submit").addEventListener("click", () => {
  const input = document.getElementById("input").value;

  // 入力値の検証
  if (isValid(input)) {
    // 検証に成功した場合、送信処理を実行
    console.log("送信処理を実行");
  } else {
    // 検証に失敗した場合、エラーを表示
    console.log("不正な入力値です");
  }
});

function isValid(value) {
  // 検証ロジック（例：空白でないことを確認）
  return value.trim() !== "";
}

○サンプルコード8：ユーザー入力のサニタイズ

次のコードは、ユーザーからの入力をサニタイズするためのサンプルです。

入力値に含まれる特殊文字をエスケープし、XSS攻撃を防ぎます。

function sanitize(input) {
  return input.replace(/&/g, '&amp;')
              .replace(/</g, '&lt;')
              .replace(/>/g, '&gt;')
              .replace(/"/g, '&quot;')
              .replace(/'/g, '&#039;');
}

// 使用例
const userInput = "<script>alert('XSS');</script>";
const sanitizedInput = sanitize(userInput);
console.log(sanitizedInput);

○サンプルコード9：エスケープ処理

次のコードは、文字列内の特殊文字をエスケープするためのサンプルです。

SQLインジェクションやXSS攻撃を防ぐために役立ちます。

function escapeString(input) {
  return input.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
}

// 使用例
const dangerousString = "This is a dangerous (string).";
const escapedString = escapeString(dangerousString);
console.log(escapedString);

○サンプルコード10：安全な外部リンク

次のコードは、安全に外部リンクを開くためのサンプルです。

リンクに rel="noopener noreferrer" を追加することで、タブナビング攻撃を防ぎます。

<a href="https://example.com" target="_blank" rel="noopener noreferrer">安全な外部リンク</a>

●注意点と対処法

JavaScriptでのセキュリティ対策は、アプリケーション全体の安全性を保つために重要です。

上記のサンプルコードを参考に、常にユーザー入力の検証やサニタイズを行い、特殊文字のエスケープ処理を適切に実装してください。

●カスタマイズ方法

上記のサンプルコードは、それぞれのプロジェクトに合わせてカスタマイズが可能です。

プロジェクトの要件やセキュリティ要件に応じて、適切な対策を実装しましょう。

まとめ

本稿では、JavaScriptの脆弱性に対処するためのサンプルコードをいくつか紹介しました。

これらのコードを参考にして、アプリケーションのセキュリティを向上させることができます。

開発時には、常にセキュリティを意識したコーディングを行い、ユーザー入力の検証やサニタイズ、特殊文字のエスケープ処理などを適切に実装してください。

また、プロジェクトの要件やセキュリティ要件に応じて、上記のサンプルコードをカスタマイズして活用しましょう。

これにより、安全で信頼性の高いアプリケーションを開発することができます。