next-csrf

KO | EN

gitlite — search

#javascript #hacktoberfest #llm #machine-learning #linux #docker #nodejs #windows #awesome #cli #security #pytorch #openai #open-source

(★ 142)

CSRF mitigation for Next.js

파일 탐색기

최종 버전 다운로드 (.zip)

- FUNDING.yml
- - layout.js
- - csrf.js
- - _app.js
  - index.js
  - login.js
- - favicon.ico
  - vercel.svg
- - globals.css
  - Home.module.css
- .env.local
- .gitignore
- package-lock.json
- package.json
- yalc.lock
- - csrf.test.ts
  - csrf.ts
  - index.ts
  - setup.ts
- - create-token.ts
  - get-cookie.ts
  - get-secret.ts
  - httpError.ts
  - index.ts
- index.e2e.ts
- index.ts
- package.json
- types.ts
.eslintrc.js
.gitignore
.npmignore
jest.config.js
LICENSE.md
package-lock.json
package.json
playwright.config.ts
README.md
rollup.config.js
tsconfig.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# next-csrf

![Discord](https://discord.com/api/guilds/967474884378763314/widget.png)

CSRF mitigation for Next.js.

## Features

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))

## Installation

With yarn:

```bash
yarn add next-csrf
```

With npm:

```bash
npm i next-csrf --save
```

## Usage

Create an initialization file to add options:

```js
// file: lib/csrf.js

import { nextCsrf } from "next-csrf";

const { csrf, setup } = nextCsrf({
    // eslint-disable-next-line no-undef
    secret: process.env.CSRF_SECRET,
});

export { csrf, 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);
```

Test the protected API route by sending a POST request from your terminal. Since this request doesn't have the proper token setup, it wil fail.

```shell
curl -X POST http://localhost:3000/api/protected
>> {"message": "Invalid CSRF token"}
```

Use an [SSG page](https://nextjs.org/docs/basic-features/pages#server-side-rendering) to set up the token. Usually, you use CSRF mitigation to harden your requests from authenticated users, if this is the case then you should use the login page.

```js
// file: pages/login.js

import { setup } from '../lib/csrf';

// Here's the important part. `setup` saves the necesary secret and token.
export const getServerSideProps = setup(async ({req, res}) => {
    return { props: {}}
});

export default Login;
```

## API

### `nextCsrf(options);`

Returns two functions:

* `setup` Setups two cookies, one for the secret and other one for the token. Only works on SSG pages.
* `csrf` Protects API routes from requests without the token. Validates and verify signatures on the cookies.

#### `options`

* `tokenKey` (`string`) The name of the cookie to store the CSRF token. Default is `"XSRF-TOKEN"`.
* `csrfErrorMessage` (`string`) Error message to return for unauthorized requests. Default is `"Invalid CSRF token"`.
* `ignoredMethods`: (`string[]`) Methods to ignore, i.e. let pass all requests with these methods. Default is `["GET", "HEAD", "OPTIONS"]`.
* `cookieOptions`: Same options as https://www.npmjs.com/package/cookie

next-csrf

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

next-csrf

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README