# 23) Security Basics in Javascript

1.  JavaScript security basics are about **protecting your application and users from common client-side attacks**. Since JS runs in the browser, it’s exposed—so you must assume attackers can see and manipulate it.  
    Common JavaScript Security Threats -  
    **i) XSS (Cross-Site Scripting)**  
    Attacker injects malicious JS into your app.
    
    ```javascript
    <input value="<script>alert('Hacked')</script>" />
    ```
    
    **Types:**  
    Stored XSS (saved in DB)  
    Reflected XSS (via URL/input)  
    DOM-based XSS  
    **Prevention:**  
    Use textContent instead of innerHTML  
    Sanitize inputs  
    Use libraries like DOMPurify  
    Enable CSP (Content Security Policy)  
      
    **ii) CSRF (Cross-Site Request Forgery)**  
    Attacker tricks a user into making unwanted requests.  
    User is logged in → attacker triggers
    
    ```javascript
    POST /transfer-money
    ```
    
    **Prevention:**  
    CSRF tokens  
    SameSite cookies  
    Double-submit cookies  
      
    **iii) Sensitive Data Exposure**  
    **Mistakes:**
    
    ```javascript
    localStorage.setItem("token", "JWT_TOKEN");
    ```
    
    **Risk:**  
    Vulnerable to XSS → token stolen  
    **Better Approach:**  
    Store tokens in HttpOnly cookies  
    Use HTTPS  
      
    **iv)** **Injection Attacks**  
    Not just backend—JS can enable unsafe patterns
    
    ```javascript
    eval(userInput); // 🚨 dangerous
    ```
    
    **Avoid:**  
    eval()  
    new Function()  
    Dynamic script injection  
      
    **v) Clickjacking**  
    User clicks something hidden in an iframe  
    **Prevention:**  
    X-Frame-Options: DENY  
    CSP frame-ancestors
    
2.  **<mark class="bg-yellow-200 dark:bg-yellow-500/30">Secure Coding Practices</mark>**  
    **i) Input Validation**  
    Validate on both:  
    Client (UX)  
    Server (security)  
      
    **ii) Output Encoding**  
    Escape user data before rendering
    
    ```javascript
    element.textContent = userInput;
    ```
    
    **iii) Avoid Inline Scripts**
    
    ```javascript
    <button onclick="doSomething()"> ❌
    
    button.addEventListener("click", handler);
    ```
    
    **iv) Use HTTPS**  
    Prevents man-in-the-middle attacks  
    Encrypts data in transit
    
3.  **<mark class="bg-yellow-200 dark:bg-yellow-500/30">Secure Storage Practices</mark>**  
    **i) Avoid :**  
    Storing sensitive data in: localStorage and sessionStorage  
    **ii) Prefer :**  
    HttpOnly cookies Secure + SameSite flags
    
4.  **<mark class="bg-yellow-200 dark:bg-yellow-500/30">Browser Security Features</mark>**  
    **i) Content Security Policy (CSP)**  
    Restricts what scripts can run  
    **ii) Same-Origin Policy**  
    Prevents cross-domain access  
    **iii) CORS**  
    Controls resource sharing across domains  
    JavaScript security focuses on preventing client-side attacks like XSS and CSRF. Key practices include sanitizing inputs, avoiding unsafe APIs like eval, using HttpOnly cookies for authentication, enforcing CSP, and never trusting client-side data.