JavaScript Security : Prevent XSS and CSRF In JavaScript

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

Security In JS

Secure Your JS Application

Web development में security एक बहुत important aspect है। JavaScript applications को secure रखने के लिए हमें अलग-अलग vulnerabilities के बारे में जानना जरूरी है, जैसे कि Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF) के security concerns.

इस blog में हम इन सब topics को detail में समझने कि कोशिश करेंगे, साथ ही examples और prevention techniques भी discuss करेंगे ताकि आप अपनी web applications को secure बना सकें।

●●●

JS Cross-Site Scripting (XSS) ?

Cross-Site Scripting (XSS) एक type का security vulnerability है जिसमे attacker malicious scripts को trusted websites में inject करता है।

जब user इस infected website को access करता है, तो ये malicious scripts user के browser में execute होते हैं, जिससे attacker को sensitive information मिल सकती है, जैसे cookies, session tokens, या फिर user के actions को manipulate करना।

Types of XSS Attacks

1. Stored XSS

Stored XSS में malicious script directly web server पर store हो जाती है, जैसे database में। जब भी कोई user infected page को access करता है, script automatically execute हो जाती है।

Example : Imagine करें कि एक comment section है जो user input को properly sanitize नहीं करता।

Copy
// Malicious Comment
<script>alert('Your account has been hacked!');</script>

यह script database में store हो जाएगी और जब भी कोई user comments देखेगा , alert box pop-up होगा।

2. Reflected XSS

Reflected XSS में malicious script directly HTTP request में send होती है और response में reflect हो जाती है। ये attacks mostly phishing emails या malicious links के through perform होते हैं।

Example : एक search functionality जो user input को escape नहीं करती।

// URL
http://example.com/search?q=<script>alert('Hacked');</script>

यह script search results page पर render हो जायेगी और execute होगी।

3. DOM-Based XSS

DOM-Based XSS में attack client-side पर होता है, जहाँ JavaScript DOM को manipulate करता है और malicious script inject करता है।

इसमें server involved नहीं होता , पूरा attack browser में ही होता है।

Example

Copy
// Vulnerable Code
let search = window.location.hash.substring(1);
document.getElementById('output').innerHTML = search;

अगर URL में hash value में script inject कि जाए , तो वो execute हो जायेगी।

// Malicious URL
http://example.com/#<script>alert('DOM XSS');</script>

●●●

Prevent XSS In JS

1. Input Validation and Sanitization

Input Validation : सभी user inputs को validate करें और ensure करें कि वो expected format में ही हो।

Sanitization : Special characters को escape करें ताकि वो malicious code execute न कर सकें।

Copy
function sanitizeInput(input) {
    return input.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

let userInput = sanitizeInput(getUserInput());
document.getElementById('output').innerText = userInput;

2. Use Content Security Policy (CSP)

CSP एक HTTP header है जो browser को बताता है कि कौनसे resources load करने हैं और कौनसे नहीं।

यह unauthorized scripts को execute होने से रोकता है।

Content-Security-Policy: default-src 'self'; script-src 'self' https://trustedscripts.example.com;

3. HTTPOnly Cookies

HTTPOnly flag set करके cookies को JavaScript से access hone से रोका जा सकता है। इससे attacker cookies को steal नहीं कर पायेगा।

Copy
setcookie("sessionid", $value, [
    'httponly' => true,
    'secure' => true,
    'samesite' => 'Strict'
]);

●●●

JS Cross-Site Request Forgery (CSRF)

Cross-Site Request Forgery (CSRF) एक attack है जिसमे attacker user को unknowingly unwanted actions perform करने पर महबूर करता है जिससे user कि authenticated session exploit हो जाती है।

Example : अगर user already किसी banking website में logged-in है और attacker एक malicious request send करता है जो funds transfer कर देती है, तो ये CSRF attack होगा।

Prevent CSRF In JS

1. Use CSRF Tokens

• CSRF Token एक unique, unpredictable value होता है जो हर form submission के साथ send किया जाता है।

• Server validate करता है कि token valid है या नहीं।

Example in PHP

Copy
// Generating Token
session_start();
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

// In HTML Form
<input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token']; ?>">

// Validating Token
if (hash_equals($_SESSION['csrf_token'], $_POST['csrf_token'])) {
    // Process form
} else {
    // Invalid token
}

2. SameSite Cookies

SameSite attribute set करके cookies को cross-site requests में send hone से रोका जा सकता है।

PHP Example

Copy
setcookie("sessionid", $value, [
    'samesite' => 'Strict',
    'secure' => true,
    'httponly' => true
]);

3. Validate HTTP Referer and Origin Headers

Referer और Origin headers को check करके ensure करें कि request trusted source से आ रही है।

Example in Node.js

Copy
function validateOrigin(req) {
    const allowedOrigins = ['https://yourdomain.com'];
    return allowedOrigins.includes(req.headers.origin);
}

app.post('/transfer', (req, res) => {
    if (validateOrigin(req)) {
        // Process request
    } else {
        res.status(403).send('Forbidden');
    }
});

●●●

Conclusion

XSS और CSRF जैसे attacks से बचने के लिए proper input validation, sanitization, tokens, और HTTP headers का use करना चाहिए।

इन सब practices को follow करके आप अपनी JavaScript applications को ज़्यादा secure बना सकते हैं और users को एक safe browsing experience दे सकते हैं।