Skip to content

Overview

Frontend developers face several security issues when developing applications. While much of the heavy security lifting happens on the backend, the frontend is the first line of defense and often a target for attacks. Here's a breakdown of key security concerns:

1. Cross-Site Scripting (XSS)

  • What it is: Attackers inject malicious scripts into content that gets executed in a user’s browser.
  • Cause: Unsanitized input/output.

  • Mitigation:

    • Always escape user input.
    • Use frameworks or libraries that automatically handle DOM sanitization.
    • Implement Content Security Policy (CSP) headers.

2. Cross-Site Request Forgery (CSRF)

  • What it is: Tricks users into making unwanted requests to a web app where they’re authenticated.
  • Cause: Lack of anti-CSRF tokens in requests.

  • Mitigation:

    • Use anti-CSRF tokens in forms and AJAX requests.
    • Set cookies with SameSite attributes.
    • Avoid relying only on cookies for authentication in state-changing requests.

3. Insecure Use of APIs

  • What it is: Exposing sensitive endpoints or not validating responses from third-party APIs.
  • Cause: Lack of input/output validation, poor authentication.

  • Mitigation:

    • Always validate and sanitize API responses.
    • Do not expose API keys in frontend code.
    • Use HTTPS to prevent interception.

4. Exposing Sensitive Data in the Frontend

  • What it is: Including secrets (e.g., API keys, credentials) in JavaScript or HTML.
  • Cause: Poor separation of frontend and backend responsibilities.

  • Mitigation:

    • Keep secrets on the server.
    • Use environment variables and server-side proxies for API access.

5. Insecure Local Storage Usage

  • What it is: Storing sensitive information (e.g., JWTs, tokens) in localStorage or sessionStorage.
  • Cause: Misuse of client-side storage.

  • Mitigation:

    • Avoid storing sensitive data in localStorage; prefer httpOnly cookies.
    • Encrypt data if it must be stored client-side.
Quote

React apps often use tokens for auth, but localStorage is accessible via JavaScript, and thus vulnerable to XSS.

❌ Don’t:

  • Store tokens like JWTs in localStorage or sessionStorage.

✅ Do:

  • Use httpOnly cookies for auth tokens (set from the backend).
  • If you must store anything in the client, encrypt it and expire it quickly.

6. Clickjacking

  • What it is: Embedding a page in an iframe to trick users into clicking on something they didn’t intend to.

  • Mitigation:

    • Use X-Frame-Options: DENY or SAMEORIGIN headers.
    • Use Content Security Policy (CSP) frame-ancestors directive.

7. DOM-based Vulnerabilities

  • What it is: Client-side scripts incorrectly trust data from the DOM, leading to XSS or logic flaws.

  • Mitigation:

    • Avoid directly manipulating the DOM with unsanitized input.
    • Use secure libraries and frameworks.

8. Outdated Frontend Dependencies

  • What it is: Using libraries with known vulnerabilities.

  • Mitigation:

    • Regularly audit dependencies (e.g., npm audit, yarn audit).
    • Use tools like Snyk or Dependabot.
    • Keep dependencies updated.

9. Improper Input Validation

  • What it is: Not validating user input on the client side (and assuming the backend will always catch issues).

  • Mitigation:

    • Implement both client-side and server-side validation.
    • Use regex or input masks where appropriate.

10. Overly Permissive CORS Settings

  • What it is: Allowing any origin (*) to access resources.

  • Mitigation:

    • Restrict CORS policies to known, trusted domains.
    • Never allow credentials with Access-Control-Allow-Origin: *.
Quote

CORS is managed by the backend, but React devs often work with APIs.

✅ Do:

  • Ensure APIs implement strict CORS policies (not Access-Control-Allow-Origin: *).
  • Avoid leaking credentials with fetch unless intended:
fetch(url, { credentials: 'include' })