❮ Previous

Security Considerations

  • Security risks and best practices for storing data in browsers.

  • Introduction to Security in Browser Storage

    Browser storage is widely used to store:

    • User preferences

    • Login tokens

    • Session data

    • Application state

    Common browser storage options include:

    • Local Storage

    • Session Storage

    • Cookies

    • IndexedDB

    While browser storage improves performance and user experience, improper usage can introduce serious security risks.

    This lesson focuses on:

    • Understanding security risks

    • Identifying common attack vectors

    • Applying best practices to protect user data

    Why Security Matters in Browser Storage

    Browser storage:

    • Is accessible through JavaScript

    • Exists on the client side

    • Can be manipulated by attackers if not protected

    Poor security can lead to:

    • Data theft

    • Account compromise

    • Session hijacking

    • Application abuse

    • Loss of user trust

    Common Security Risks in Browser Storage

    Risk 1: Storing Sensitive Data in Plain Text

    Description

    Data stored in browser storage is not encrypted by default.

    Example of risky storage:

    localStorage.setItem("password", "mypassword123");

    Problems:

    • Anyone with device access can read it

    • Malicious scripts can access it

    • Browser extensions can steal it

    What Should Never Be Stored

    Never store:

    • Passwords

    • Credit card details

    • CVV numbers

    • OTPs

    • Sensitive personal information

    Risk 2: Cross-Site Scripting (XSS)

    What Is XSS ?

    XSS occurs when attackers inject malicious JavaScript code into a website.

    Example:

    <script>

      localStorage.getItem("authToken");

    </script>

    If XSS exists:

    • Attacker can read storage

    • Attacker can send data to external servers

    • User session can be hijacked

    Why Browser Storage Is Vulnerable to XSS

    • localStorage and sessionStorage are accessible via JavaScript

    • Any injected script can access stored data

    • No built-in access control

    Risk 3: Token Theft

    Many applications store:

    localStorage.setItem("token", jwtToken);

    Problems:

    • Tokens remain until manually cleared

    • XSS can steal tokens

    • Stolen tokens allow unauthorized access

    Risk 4: Session Fixation

    When session identifiers:

    • Are stored insecurely

    • Are reused improperly

    Attackers can force users to use a known session ID and hijack sessions.

    Risk 5: Persistent Data Exposure

    Local storage data:

    • Persists even after browser close

    • Remains until explicitly cleared

    This can expose:

    • Shared computers

    • Public devices

    • Lost or stolen devices

    Risk 6: Browser Extensions

    Some extensions:

    • Can read browser storage

    • Have access to page scripts

    Malicious extensions can steal stored data silently.

  • Best Practices for Secure Browser Storage

    Best Practice 1: Avoid Storing Sensitive Data

    Store only:

    • Non-sensitive preferences

    • UI settings

    • Temporary state data

    Sensitive data should be stored:

    • On the server

    • In secure HTTP-only cookies

    • In encrypted storage (server-side)

    Best Practice 2: Prefer HTTP-only Secure Cookies for Auth

    Instead of:

    localStorage.setItem("token", token);


    Use:

    • HTTP-only cookies

    • Secure flag

    • SameSite attribute

    Benefits:

    • Not accessible via JavaScript

    • Protected from XSS

    • Automatically sent with requests

    Best Practice 3: Protect Against XSS Attacks

    Implement:

    • Input validation

    • Output encoding

    • Content Security Policy (CSP)

    Example CSP:

    Content-Security-Policy: script-src 'self'

    This prevents malicious script injection.

    Best Practice 4: Use Session Storage for Temporary Data

    Use sessionStorage when:

    • Data is needed only during a session

    • Data should be cleared on tab close

    Example:

    sessionStorage.setItem("tempData", "value");

    This reduces long-term exposure.


    Best Practice 5: Clear Storage on Logout

    Always remove stored data when user logs out:

    localStorage.removeItem("token");

    sessionStorage.clear();

    This prevents unauthorized reuse.

    Best Practice 6: Minimize Data Stored

    Store:

    • Only what is necessary

    • Only for the required duration

    Avoid:

    • Large objects

    • Unused keys

    • Old data

    Best Practice 7: Validate Data Before Use

    Never trust stored data blindly.

Secure Role Check Example

Retrieves role from storage and suggests verifying it from the server. 

let role = localStorage.getItem("role");

if (role === "admin") {
  // verify from server
}

  • Always confirm critical data with the server.

    Best Practice 8: Use Secure Communication (HTTPS)

    Always serve applications over HTTPS.

    Benefits:

    • Prevents man-in-the-middle attacks

    • Protects data in transit

    • Required for secure cookies

    Best Practice 9: Encrypt Data (If Absolutely Required)

    If data must be stored:

    • Encrypt before storing

    • Decrypt only when needed

    Note:

    • Client-side encryption is not fully secure

    • Keys can still be exposed

    Use this only as an additional layer.

    Storage-Specific Security Overview

    Local Storage

    • Persistent

    • Accessible via JavaScript

    • Vulnerable to XSS

    • Not suitable for sensitive data

    Session Storage

    • Temporary

    • Cleared on tab close

    • Still accessible via JavaScript

    • Slightly safer but not secure

    Cookies

    • Can be HTTP-only

    • Can be Secure

    • Can use SameSite protection

    • Best choice for authentication tokens

    IndexedDB

    • Used for large structured data

    • Same-origin policy applies

    • Still vulnerable to XSS

    • Requires careful handling

    Common Security Mistakes

    • Storing passwords in localStorage

    • Trusting browser storage blindly

    • Ignoring XSS risks

    • Forgetting to clear data on logout

    • Using localStorage for authentication tokens

    Real-World Security Incidents (Conceptual)

    Many real-world data breaches occurred due to:

    • XSS vulnerabilities

    • Insecure token storage

    • Poor session handling

    • Client-side trust issues

    Security Checklist for Developers

    • Do not store sensitive data in browser storage

    • Use HTTP-only secure cookies for auth

    • Implement XSS protection

    • Clear storage on logout

    • Validate data with server

    • Use HTTPS everywhere

    • Follow principle of least privilege

❮ Previous