-
Notifications
You must be signed in to change notification settings - Fork 56
/
7.csrf.md
94 lines (73 loc) · 3.45 KB
/
7.csrf.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
# Cross Site Request Forgery (CSRF)
:badge[Optional]{type="warning"} Protect user actions from unwanted state change.
---
:ellipsis{right=0px width=75% blur=150px}
Cross-Site Request Forgery (CSRF) is an attack that forces an end user to execute unwanted actions on a web application in which they’re currently authenticated. With a little help of social engineering (such as sending a link via email or chat), an attacker may trick the users of a web application into executing actions of the attacker’s choosing. If the victim is a normal user, a successful CSRF attack can force the user to perform state changing requests like transferring funds, changing their email address, and so forth. If the victim is an administrative account, CSRF can compromise the entire web application.
::alert{type="info"}
ℹ Read more about CRSF [here](https://owasp.org/www-community/attacks/csrf).
::
This functionality is based on the great module by [Morgan](https://github.com/Morgbn). You can check out the full documentation and reference [here](https://github.com/morgbn/nuxt-csurf)
`nuxt-csurf` is disabled by default but you can enable it with default configuration like following:
```js{}[nuxt.config.ts]
export default defineNuxtConfig({
security: {
csrf: true
}
})
```
Now, you can use the auto-imported composables for handling CRSF:
```ts
// Wrapper around `useFetch` that automatically adds CSRF token in headers
const { data, pending, error, refresh } = useCsrfFetch('/api/login', { query: 'value1' })
// Have access to the CSRF token value
const { csrf } = useCsrf()
```
Apart from just enabling it, you can pass a custom configuration to the underlying `nuxt-csurf` module by using the following interface:
```ts
interface ModuleOptions {
https?: boolean,
cookie?: CookieSerializeOptions,
cookieKey?: string,
methodsToProtect?: Array<string>, // the request methods we want CSRF protection for
excludedUrls?: Array<string|[string, string]>, // any URLs we want to exclude from CSRF protection
encryptSecret?: string,
encryptAlgorithm?: string
}
interface CookieSerializeOptions {
domain?: string | undefined;
encode?(value: string): string;
expires?: Date | undefined;
httpOnly?: boolean | undefined;
maxAge?: number | undefined;
path?: string | undefined;
sameSite?: true | false | 'lax' | 'strict' | 'none' | undefined;
secure?: boolean | undefined;
}
```
## Using with tRPC Nuxt
TRPC [uses `POST` requests](https://trpc.io/docs/rpc#methods---type-mapping) for the mutation endpoints. Using the CSRF protection functionality of this module with [trpc-nuxt](https://github.com/wobsoriano/trpc-nuxt) will help you protect your mutation endpoints from CSRF.
In order to make the [CSRF](/security/csrf) functionality of this module work with `trpc-nuxt`, we have to add the CSRF token value into a `csrf-token` header inside the outgoing request headers in our `trpc` client.
```ts
import { createTRPCNuxtClient, httpBatchLink } from "trpc-nuxt/client";
import type { AppRouter } from "@/server/trpc/routers";
export default defineNuxtPlugin(() => {
const headers = useRequestHeaders();
const { csrf } = useCsrf();
const client = createTRPCNuxtClient<AppRouter>({
links: [
httpBatchLink({
// Headers are called on every request
headers() {
// Add CSRF token to request headers
return { ...headers, "csrf-token": csrf };
},
}),
],
});
return {
provide: {
client,
},
};
});
```