npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

koa-stateless-csrf

v1.2.1

Published

Stateless CSRF support for Koa APIs

Downloads

6

Readme

Koa Stateless CSRF

Release codecov

Stateless CSRF implementation for Koa based APIs, based on the nosurf implementation.

It includes protection against BREACH attacks.

Installation

Run npm i koa-stateless-csrf

Quickstart

To add CSRF protection to your API, simply add the CSRF middleware to your Koa application:

import {csrfMiddleware} from 'koa-stateless-csrf';

app.use(csrfMiddleware());

This will configure the CSRF middleware with the default cookie name csrf_token and default header name X-CSRF-Token. Both can be changed via the middleware options.

In order for frontends to be able to read and send the X-CSRF-Token request and response header, you need to configure CORS accordingly. It is highly recommended to limit the CORS origin for this, so malicious websites cannot read or send the token.

Handling CSRF on the frontend

In order for the frontend to retrieve a CSRF token, it can call any endpoint configured after the CSRF middleware. To do so, send a request with X-CSRF-Token header set to fetch. The response will have a masked X-CSRF-Token response header with the value to use. This value is valid until the end of the browser session, after which the cookie will expire and a new token will be generated.

If for whatever reason the CSRF cookie token was deleted or tampered, and thus the token available on the frontend is not valid anymore, you will receive a 400 error, with a new valid token supplied in the response header.

In order for your frontend to recognize and potentially retry the request, the error emitted by the middleware is a http error with its name set to CsrfError. You should forward this information to the frontend.

Cookie options

Cookies will always be set as http-only and default to a path of /. This is sufficient for development, but in production you should set the following options:

import {csrfMiddleware} from 'koa-stateless-csrf';

app.use(csrfMiddleware({
    cookieOptions: {
        // If you API lives on the same exact domain as the frontend,
        // use that domain, otherwise use their parent domain
        domain: 'example.com',
        // Only serve the API over HTTPS
        secure: true,
        // Only allow the cookie to be sent from the same root domain
        sameSite: 'strict',
    },
}));

Disabling CSRF for non-browser clients

By default, CSRF protection is always active. This might be undesired if your API serves both browser and non-browser clients (e.g. native apps).

To solve this, you can enable the disableWithoutOrigin option. To not be susceptible to CSRF attacks, your application must then adhere to the following when no Origin header is present:

  • Do not send any cookies to the client. This is to prevent things like login CSRF attacks.
  • Only accept authentication via headers and ignore any cookies.

Note: This is only feasible when your API sits on its own (sub-)domain, so that every request is a cross-origin request performed via fetch. On same-origin requests, browsers can omit the Origin header for GET requests or when a request is done via a <form> submit.

Only allow specific origins

Normally every origin is allowed to perform requests. To add defense in depth, you can allow only specific origins to perform requests; any other origins will be denied.

To do so, set the allowedOrigins option to an array of origins you want to allow. An origin is defined as the combination of scheme, host and optionally the port (e.g. http://localhost:8000 or https://my.site.