中級 TypeScriptで学ぶセキュリティ基礎｜練習問題編

問題1: ユーザー名のバリデーションを、10文字以上に変更してください。 const regex = /^[a-zA-Z0-9_-]{10,}$/;
問題2: sanitizeInput関数を改良し、他のHTMLタグも除去できるようにしてください。 function sanitizeInput(input: string): string { return input.replace(/ ]*>/g, ''); }
問題3: ユーザーからの入力が空でないこともチェックするバリデーションを追加してください。 if (input.trim().length === 0) return false;
問題4: 上記のコードを利用して、入力が無効な場合に具体的なエラーメッセージを表示するように修正してください。 console.log("Invalid input: Username must be 10 characters or more.");
問題5: sanitizeInput関数のテストケースを作成し、さまざまな入力に対して正しく動作することを確認してください。 console.assert(sanitizeInput(" test ") === "test");

導入

Webアプリケーションのセキュリティは、実務において非常に重要な要素です。特に、ユーザーの入力を受け取る部分では、適切なバリデーションやサニタイズが求められます。この記事では、TypeScriptを用いたセキュリティの基礎を学び、具体的なシチュエーションを通じて実践的な知識を深めます。

教科書レベルの解説（セキュリティ基礎）

重要な概念の整理

セキュリティの基礎として、特に注目すべきは「入力の検証」と「出力のエスケープ」です。これらは、XSS（クロスサイトスクリプティング）やSQLインジェクションなどの攻撃からアプリケーションを守るために不可欠です。TypeScriptを使用することで、型安全性が向上し、バグを未然に防ぐ助けとなります。

コード例（TypeScript）


function sanitizeInput(input: string): string {
    return input.replace(/.*?<\/script>/gi, '');
}

function validateUserInput(input: string): boolean {
    const regex = /^[a-zA-Z0-9_-]{3,16}$/;
    return regex.test(input);
}

const userInput = "username";
if (validateUserInput(userInput)) {
    const safeInput = sanitizeInput(userInput);
    console.log("Valid input:", safeInput);
} else {
    console.log("Invalid input");
}

コードの行ごとの解説

sanitizeInput関数では、ユーザーからの入力に含まれる