next-csrf
Version:
CSRF mitigation library for Next.js
82 lines (53 loc) • 1.84 kB
Markdown

CSRF mitigation for Next.js.
Mitigation patterns that `next-csrf` implements:
* [Synchronizer Token Pattern](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#synchronizer-token-pattern) using [`csrf`](https://github.com/pillarjs/csrf) (Also [read Understanding CSRF](https://github.com/pillarjs/understanding-csrf#csrf-tokens))
With yarn:
```bash
yarn add next-csrf
```
With npm:
```bash
npm i next-csrf --save
```
Setup:
Create an initialization file to add options:
```js
// file: lib/csrf.js
import { nextCsrf } from "next-csrf";
const options = {
secret: process.env.CSRF_SECRET // Long, randomly-generated, unique, and unpredictable value
}
export const { csrf, csrfToken } = nextCsrf(options);
```
Create a setup endpoint:
```js
// file: pages/api/csrf/setup.js
import { setup } from "../../../lib/csrf";
const handler = (req, res) => {
res.statusCode = 200;
res.json({ message: "CSRF token added to cookies" });
};
export default setup(handler);
```
On the first request, or any time you want to set up the CSRF token, send a GET request to the setup endpoint, in this example `/api/csrf/setup`, and you will receive a cookie with the CSRF token on the response.
```js
const response = await fetch('/api/csrf/setup');
if (response.ok) {
console.log('CSRF token setup')
}
```
Protect an API endpoint:
```js
// file: pages/api/protected.js
import { csrf } from '../lib/csrf';
const handler = (req, res) => {
return res.status(200).json({ message: "This API route is protected."})
}
export default csrf(handler);
```
Every time you hit a protected API route you will replace the token in your cookie with a new one.