Edge Csrf

screenshot of Edge Csrf
nextjs
svelte
vite

CSRF protection library for JavaScript that runs on the edge runtime (with Next.js, SvelteKit, Express, Node-HTTP integrations)

Overview:

Edge-CSRF is a CSRF protection library for JavaScript designed to run on both node and edge runtimes. It offers integrations for popular frameworks like Next.js and SvelteKit, as well as a flexible low-level API for custom implementations. This library simplifies CSRF protection by implementing the signed double submit cookie pattern.

Features:

  • Runs on both node and edge runtimes
  • Includes integrations for Next.js and SvelteKit
  • Provides a low-level API for custom integrations
  • Supports various HTTP request body types (form-urlencoded, multipart/form-data, json-encoded)
  • Retrieves tokens from HTTP request headers or request bodies
  • Supports Server Actions via form and non-form submission
  • Offers customizable cookie and other options

Quickstart (Next.js):

  1. Install Edge-CSRF's Next.js integration library:
    npm install edge-csrf-next
    
  2. Create a middleware file middleware.ts and add the Edge-CSRF middleware.
  3. Use CSRF tokens in your forms by fetching them from the X-CSRF-Token HTTP response header.

Quickstart (SvelteKit):

  1. Install Edge-CSRF's SvelteKit integration library:
    npm install edge-csrf-svelte
    
  2. Create a server-side hooks file hooks.server.ts and add the Edge-CSRF handle.
  3. Fetch CSRF tokens from the event's locals data object to add them to your forms.

Development:

  • Clone the repository and install dependencies:
    git clone [repository-url]
    npm install
    
  • Run unit tests using jest for testing:
    npm test-all
    
  • Build Edge-CSRF for production:
    npm run build
    
    The build artifacts will be in the dist/ directory of each package.

Summary:

Edge-CSRF is a versatile CSRF protection library that offers integrations for Next.js and SvelteKit, along with a customizable low-level API for developers needing more flexibility in their implementations. By supporting different HTTP request body types and providing options for token retrieval, this library simplifies CSRF protection for both node environments and edge functions. Developers can easily enhance the security of their web applications by implementing Edge-CSRF.

nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

svelte
Svelte

Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.