Zenn
🗂

オタクくん「ギャル先輩、フロントエンドのセキュリティってどうしたらいいんですか？」

2024/05/22に公開
frontend
Security
tech

オタクくん「ギャル先輩、フロントエンドのセキュリティってどうしたらいいんですか？」

ギャル先輩「また何か困ってるの？てーか、オタクくんってパソコンに詳しそうなのに、そんなのもわからないの?www。」

オタクくん「いや、色々調べたんですけど、情報が多すぎてどれが大事なのかわからなくて…」

ギャル先輩「んー、そっか。じゃあ、あーしが基本的なことから教えてあげる！」

セキュリティの基本：入力値の検証

ギャル先輩「まずは入力値の検証だね。ユーザーが入力するデータは信頼できないから、ちゃんと検証しないとダメだよ。」

オタクくん「例えば、どんな風に検証すればいいんですか？」

ギャル先輩「例えば、JavaScriptでフォームの入力をチェックする感じ。こんな感じで書くといいよ。」

function validateForm() {
    let username = document.getElementById('username').value;
    let email = document.getElementById('email').value;
    if (username === '' || email === '') {
        alert('全てのフィールドを入力してください');
        return false;
    }
    // その他の検証
    return true;
}

オタクくん「なるほど、必須項目をチェックするんですね。」

ギャル先輩「そそ、でもこれは基本中の基本ね。もっと高度な検証も必要だよ。」

XSS攻撃対策

オタクくん「他に気をつけることってありますか？」

ギャル先輩「次はXSS攻撃。クロスサイトスクリプティングって言って、悪意のあるスクリプトを実行されちゃうことがあるの。」

オタクくん「それって、どうやって防げばいいんですか？」

ギャル先輩「エスケープ処理が必要だよ。例えば、HTMLに出力する前に特定の文字をエスケープするんだ。」

function escapeHTML(str) {
    return str.replace(/[&<>"']/g, function(match) {
        switch (match) {
            case '&': return '&amp;';
            case '<': return '&lt;';
            case '>': return '&gt;';
            case '"': return '&quot;';
            case "'": return '&#39;';
        }
    });
}

オタクくん「これで悪意のあるスクリプトが実行されなくなるんですね。」

ギャル先輩「そうそう！その通り。」

CSRF攻撃対策

オタクくん「他にも何かありますか？」

ギャル先輩「次はCSRF攻撃。クロスサイトリクエストフォージェリって言って、ユーザーが意図しないリクエストを送らされる攻撃のことだよ。」

オタクくん「それも怖そうですね。どうやって防ぐんですか？」

ギャル先輩「トークンを使うんだよ。例えば、フォームに秘密のトークンを含めるの。」

<form method="post" action="/submit">
    <input type="hidden" name="csrf_token" value="SECRET_TOKEN">
    <!-- 他の入力フィールド -->
    <input type="submit" value="送信">
</form>

オタクくん「なるほど、これでリクエストが本物かどうか確認できるんですね。」

ギャル先輩「うん、そうだよ。サーバー側でトークンをチェックするのを忘れないでね。」

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

オタクくん「他に注意することはありますか？」

ギャル先輩「最後に、セキュリティヘッダーも設定するといいよ。これでブラウザの挙動を制御して、セキュリティを高めるんだ。」

オタクくん「どんなヘッダーを設定すればいいんですか？」

ギャル先輩「例えば、こんなのがあるよ。」

Content-Security-Policy: default-src 'self';
X-Content-Type-Options: nosniff;
X-Frame-Options: DENY;
Strict-Transport-Security: max-age=31536000; includeSubDomains;

オタクくん「ふむふむ、これで色々な攻撃を防げるんですね。」

ギャル先輩「そうだよ。これを設定しておくと安心だね。」

まとめ

オタクくん「ギャル先輩、ありがとうございます！これでフロントエンドのセキュリティについて少しわかりました。」

ギャル先輩「オタクくん、素直でいい子だねwww。でも、もっと勉強しないとダメだよ？」

オタクくん「はい、頑張ります！」

Discussion