Web Application Security

⌘K
  2. Home
  4. Web Application Security
  6. 3.Cross-Site Request Forgery (CSRF)

3.Cross-Site Request Forgery (CSRF)

Cross-Site Request Forgery (CSRF) একটি ধরনের আক্রমণ যেখানে হ্যাকার একজন ব্যবহারকারীর ব্রাউজারের মাধ্যমে ম্যালিশাস রিকোয়েস্ট পাঠায়, যার ফলে ব্যবহারকারী অজান্তে তাদের অনুমতি ছাড়া কিছু করতে পারে। সাধারণত, এটি ঘটে যখন ব্যবহারকারী ইতিমধ্যে একটি সাইটে লগইন থাকে এবং হ্যাকার সেই সেশনের মাধ্যমে একটি অননুমোদিত রিকোয়েস্ট পাঠায়।

CSRF আক্রমণের বাস্তব উদাহরণ:

ধরুন, আপনার একটি ফোরাম ওয়েবসাইট আছে যেখানে ব্যবহারকারীরা পোস্ট তৈরি করতে পারে।

  1. ব্যবহারকারীর লগইন:
    • ব্যবহারকারী www.example.com ফোরাম সাইটে লগইন করেছে। সাইটটি ব্যবহারকারীর সেশনের জন্য কুকি ব্যবহার করছে।
  2. হ্যাকার ওয়েবসাইট:
    • হ্যাকার একটি ম্যালিশাস ওয়েবপেজ তৈরি করে যেখানে একটি গোপন POST ফর্ম থাকে যা স্বয়ংক্রিয়ভাবে একটি নতুন পোস্ট তৈরি করতে পারে:
<!-- Malicious website -->
<html>
<body>
    <form id="csrf-form" action="https://www.example.com/new-post" method="POST">
        <input type="hidden" name="title" value="Hacked by Hacker">
        <input type="hidden" name="content" value="This post was created by a CSRF attack!">
    </form>
    <script>
        document.getElementById('csrf-form').submit();
    </script>
</body>
</html>
  1. ব্যবহারকারী হামলা চালায়:
    • ব্যবহারকারী ম্যালিশাস ওয়েবপেজটি পরিদর্শন করে। ব্রাউজার স্বয়ংক্রিয়ভাবে একটি POST রিকোয়েস্ট পাঠায় www.example.com এ, ব্যবহারকারীর সেশন কুকি সহ।
  2. ফলস্বরূপ:
    • www.example.com সাইট এটি একটি বৈধ রিকোয়েস্ট মনে করে এবং নতুন পোস্ট তৈরি করে ব্যবহারকারীর অ্যাকাউন্টে।

CSRF টোকেন ব্যবহারের প্রক্রিয়া:

  1. টোকেন জেনারেশন (Server-Side):
    • সার্ভার একটি ইউনিক CSRF টোকেন তৈরি করে এবং এটি ব্যবহারকারীকে পাঠায়। সাধারণত, এই টোকেনটি একটি কুকি বা ফর্ম ফিল্ড হিসেবে প্রদান করা হয়।
  2. টোকেন ক্লায়েন্টে পাঠানো (Client-Side):
    • ব্যবহারকারী যখন একটি ওয়েব পেজ লোড করে যেখানে ফর্ম রয়েছে, সার্ভার ওই পেজে CSRF টোকেন সহ একটি হিডেন ইনপুট ফিল্ড প্রদান করে।
  3. ফর্ম সাবমিশন (Client-Side):
    • ব্যবহারকারী যখন ফর্ম সাবমিট করে, CSRF টোকেন ঐ সাবমিটের অংশ হিসেবে পাঠানো হয়।
  4. টোকেন যাচাইকরণ (Server-Side):
    • সার্ভার টোকেন যাচাই করে নিশ্চিত করে যে এটি বৈধ এবং সাবমিশনটি প্রতারণামূলক নয়। যদি টোকেন মেলে, রিকোয়েস্ট প্রসেস করা হয়; অন্যথায় রিকোয়েস্ট বাতিল করা হয়।

উদাহরণ: React এবং Express ব্যবহার করে CSRF সুরক্ষা

**1. Express সার্ভার কনফিগারেশন:

প্রথমে, আমাদের Express সার্ভার কনফিগার করতে হবে যাতে CSRF টোকেন জেনারেট করা এবং যাচাই করা যায়।

Express সার্ভার কোড:

const express = require('express');
const csrf = require('csurf');
const cookieParser = require('cookie-parser');
const app = express();
const port = 3000;

// CSRF Middleware
const csrfProtection = csrf({ cookie: true });

// Middleware
app.use(cookieParser());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// Serve CSRF token on the page
app.get('/api/csrf-token', csrfProtection, (req, res) => {
    res.json({ csrfToken: req.csrfToken() });
});

// Handle form submission
app.post('/api/submit', csrfProtection, (req, res) => {
    res.send('Form submitted successfully.');
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

ব্যাখ্যা:

  1. CSRF Middleware:
    • csrf() মডিউল ব্যবহার করে CSRF টোকেন জেনারেট করা হয় এবং কুকিতে সংরক্ষিত হয়।
  2. CSRF টোকেন প্রদান:
    • /api/csrf-token রুটে GET রিকোয়েস্টের মাধ্যমে CSRF টোকেন প্রদান করা হয়।
  3. ফর্ম সাবমিশন:
    • /api/submit রুটে POST রিকোয়েস্ট প্রাপ্ত হলে, সার্ভার টোকেন যাচাই করে।

**2. React ক্লায়েন্ট কনফিগারেশন:

React ক্লায়েন্টে CSRF টোকেন পেতে এবং পাঠাতে আমরা axios ব্যবহার করব। প্রথমে axios ইনস্টল করতে হবে:

npm install axios

React কম্পোনেন্ট কোড:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {
    const [csrfToken, setCsrfToken] = useState('');

    // Fetch CSRF token from the server
    useEffect(() => {
        axios.get('/api/csrf-token')
            .then(response => {
                setCsrfToken(response.data.csrfToken);
            })
            .catch(error => {
                console.error('Error fetching CSRF token:', error);
            });
    }, []);

    // Handle form submission
    const handleSubmit = (event) => {
        event.preventDefault();
        const data = new FormData(event.target);

        axios.post('/api/submit', data, {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRF-Token': csrfToken // Include CSRF token in request headers
            }
        })
        .then(response => {
            console.log(response.data);
        })
        .catch(error => {
            console.error('Error submitting form:', error);
        });
    };

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input type="hidden" name="_csrf" value={csrfToken} />
                <input type="text" name="data" placeholder="Enter something" />
                <button type="submit">Submit</button>
            </form>
        </div>
    );
};

export default App;

ব্যাখ্যা:

  1. CSRF টোকেন পাওয়া:
    • useEffect হুক ব্যবহার করে /api/csrf-token রুটে GET রিকোয়েস্ট পাঠানো হয় এবং CSRF টোকেন গ্রহণ করা হয়।
  2. ফর্ম সাবমিশন:
    • handleSubmit ফাংশনে ফর্ম সাবমিট করা হয় এবং CSRF টোকেনটি POST রিকোয়েস্টের হেডারে পাঠানো হয়।
  3. Axios POST রিকোয়েস্ট:
    • axios.post() ফাংশনে X-CSRF-Token হেডার হিসেবে CSRF টোকেন পাঠানো হয়।

CSRF প্রতিরোধের মূল পয়েন্ট:

  1. CSRF টোকেন জেনারেশন:
    • সার্ভার থেকে একটি ইউনিক CSRF টোকেন জেনারেট করা হয় এবং ক্লায়েন্টে পাঠানো হয়।
  2. CSRF টোকেন ক্লায়েন্টে পাঠানো:
    • React ক্লায়েন্ট টোকেন গ্রহণ করে এবং ফর্ম সাবমিশন বা API কলের সময় এটি প্রেরণ করে।
  3. CSRF টোকেন যাচাইকরণ:
    • সার্ভার টোকেন যাচাই করে নিশ্চিত করে যে রিকোয়েস্টটি বৈধ এবং প্রতারণামূলক নয়।

এইভাবে, React এবং Express ব্যবহার করে CSRF আক্রমণ প্রতিরোধ করা সম্ভব। সঠিকভাবে CSRF টোকেন ব্যবহারের মাধ্যমে আপনার অ্যাপ্লিকেশনকে সুরক্ষিত রাখা যায়।

How can we help?