Nuxt Csurf

Cross-Site Request Forgery (CSRF) prevention.
Create a middleware for CSRF token creation and validation.

✅ Supports Node.js server & serverless environments
✅ Supports both universal and client-side rendering (ssr: true|false)
✅ TypeScript

Setup

1yarn add @gotedo/nuxt-csurf # yarn
2npm i @gotedo/nuxt-csurf # npm

Usage

The only thing you need to do to use the module in the default configuration is to register the module in the modules array in nuxt.config.ts:

1// nuxt.config.js
2{
3  modules: [
4    "nuxt-csurf",
5  ],
6  csurf: { // optional
7    https: false, // default true if in production
8    cookieKey: '', // "__Host-csrf" if https is true otherwise just "csrf"
9    cookie: { // CookieSerializeOptions from unjs/cookie-es
10      path: '/',
11      httpOnly: true,
12      sameSite: 'strict'
13    },
14    methodsToProtect: ['POST', 'PUT', 'PATCH'], // the request methods we want CSRF protection for
15    excludedUrls: ['/nocsrf1', ['/nocsrf2/.*', 'i']], // any URLs we want to exclude from CSRF protection
16    encryptSecret: /** a 32 bits secret */, // only for non serverless runtime, random bytes by default
17    encryptAlgorithm: 'aes-256-cbc' // by default 'aes-256-cbc' (node), 'AES-CBC' (serverless)
18    useFormToken: true; // Read CSRF token from JSON body or FormData object.
19  }
20}

useCsrfFetch

This composable provides a convenient wrapper around useFetch. It automatically adds the CSRF token in headers.

1const { data, pending, error, refresh } = useCsrfFetch('/api/login', { query: param1: 'value1' })

$csrfFetch

This helper provides a convenient wrapper around $fetch. It automatically adds the CSRF token in headers.

1const { $csrfFetch } = useNuxtApp()
2const { data } = await $csrfFetch('/api/login', { method: 'POST', body: …, headers: … })

$csrf

The $csrf helper directly provides the active CSRF token so that you can use it anyhow you want within your component.

1<template>
2  <form
3    id="my-form"
4    @submit.prevent="testForm"
5  >
6    <input
7      v-show="false"
8      v-model="form['csrf-token']"
9      name="csrf-token"
10      type="text"
11    />
12    <button @click.prevent="testForm">Submit</button>
13  </form>
14</template>
15
16<script setup lang="ts">
17const { $csrf } = useNuxtApp();
18
19const form = reactive({
20  "csrf-token": "",
21});
22
23const formData = computed(() => {
24  const formData = new FormData();
25  formData.set("csrf-token", form["csrf-token"]);
26  return formData;
27});
28
29onMounted(() => {
30  form["csrf-token"] = $csrf || "";
31});
32
33const testForm = async function () {
34  const data = await $fetch("/api/test", {
35    method: "POST",
36    credentials: "same-origin",
37    body: formData.value,
38  })
39};
40</script>
41

useCsrf

Use this composable if you need to access to the CSRF token value.

1const { csrf } = useCsrf();
2console.log(csrf); // something like: mo4+MrFaeXP7fhAie0o2qw==:tLUaqtHW6evx/coGQVAhtGAR+v6cxgFtrqmkOsuAMag8PHRnMwpbGGUO0TPJjL+4

Credits

• inspired by tiny-csrf and expressjs/csurf
• see OWASP CSRF cheatsheet