【2026年最新】Webセキュリティ完全ガイド！SQLインジェクション・XSS・CSRF対策をエンジニアが徹底解説

Webアプリケーションのセキュリティ対策は、エンジニアの必須知識です。2026年現在、サイバー攻撃はさらに巧妙化しており、基本的なセキュリティ知識なしに本番アプリケーションをリリースすることは危険です。本記事では主要な攻撃手法と対策を解説します。

主要なWebセキュリティ脅威Top5

1. SQLインジェクション：DBを不正操作される攻撃
2. XSS（クロスサイトスクリプティング）：悪意あるJSを実行させる攻撃
3. CSRF（クロスサイトリクエストフォージェリ）：ユーザーを騙して不正操作させる攻撃
4. 認証・認可の不備：不正なアクセス制御
5. 機密データの露出：暗号化不足・ログへの機密情報出力

SQLインジェクション対策

SQLインジェクションは最も古典的な攻撃のひとつですが、今でも多くのサイトで被害が発生しています。

// ❌ 危険なコード（SQLインジェクション脆弱性あり）
const query = "SELECT * FROM users WHERE username = '" + username + "'";

// ✅ 安全なコード（プリペアドステートメント）
// Node.js + mysql2の例
const [rows] = await connection.execute(
  'SELECT * FROM users WHERE username = ? AND password = ?',
  [username, hashedPassword]
);

// ✅ ORMを使う場合（Prismaの例）
const user = await prisma.user.findUnique({
  where: {
    username: username  // 自動的にエスケープされる
  }
});

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

// ❌ 危険なコード
document.getElementById('output').innerHTML = userInput;

// ✅ 安全なコード（テキストノードとして扱う）
document.getElementById('output').textContent = userInput;

// ✅ sanitize-htmlライブラリを使う場合
import sanitizeHtml from 'sanitize-html';

const clean = sanitizeHtml(userInput, {
  allowedTags: ['b', 'i', 'em', 'strong', 'a'],
  allowedAttributes: {
    'a': ['href']
  }
});

// React・Vue・Angularは自動エスケープされるが注意点も
// dangerouslySetInnerHTMLは絶対に避ける
// <div dangerouslySetInnerHTML={{__html: userInput}} /> ← NG!

CSRF対策

// Node.js + Expressでのcsurfトークン実装
import csrf from 'csurf';
import cookieParser from 'cookie-parser';

app.use(cookieParser());
app.use(csrf({ cookie: true }));

// フォームにCSRFトークンを埋め込む
app.get('/form', (req, res) => {
  res.render('form', { csrfToken: req.csrfToken() });
});

// HTMLテンプレート側
// <input type="hidden" name="_csrf" value="<%= csrfToken %>">

// SameSite Cookie属性でも対策
res.cookie('sessionId', sessionId, {
  httpOnly: true,
  secure: true,        // HTTPS必須
  sameSite: 'strict'   // 同一サイトからのみ送信
});

セキュリティヘッダーの設定

// helmetミドルウェアでセキュリティヘッダーを一括設定
import helmet from 'helmet';

app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      styleSrc: ["'self'", "'unsafe-inline'"],
      scriptSrc: ["'self'"],
      imgSrc: ["'self'", "data:", "https:"]
    }
  },
  hsts: {
    maxAge: 31536000,
    includeSubDomains: true,
    preload: true
  }
}));

セキュリティチェックリスト

• ✅ すべての入力値をバリデーション・サニタイズ
• ✅ プリペアドステートメントまたはORMを使用
• ✅ パスワードはbcrypt/argon2でハッシュ化
• ✅ HTTPSを強制（Let’s Encrypt等）
• ✅ セキュリティヘッダーを設定（helmet等）
• ✅ 依存パッケージの定期的な更新
• ✅ npm audit / OWASP ZAPで定期スキャン
• ✅ ログに機密情報を出力しない

まとめ

Webセキュリティは「やって終わり」ではなく継続的な取り組みが必要です。OWASPの最新ガイドラインを定期的に確認し、セキュリティテストを開発フローに組み込みましょう。情報セキュリティマネジメント試験やCEH（認定倫理ハッカー）などの資格取得もキャリアアップに有効です。