Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Baroshem/next-security

🛡 Security plugin for Next.js based on OWASP and Helmet
https://github.com/Baroshem/next-security

basicauthentication cors csrf ddos headers helmet nextjs owasp rate-limiting security xss

Last synced: 3 months ago
JSON representation

🛡 Security plugin for Next.js based on OWASP and Helmet

Awesome Lists containing this project

README

        

# next-security

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
[![License][license-src]][license-href]

> Security plugin for Next.js based on [OWASP Top 10](https://cheatsheetseries.owasp.org/cheatsheets/Nodejs_Security_Cheat_Sheet.html#nodejs-security-cheat-sheet) and [helmet](https://helmetjs.github.io/) that adds security response headers.

- [👾  Playground](https://stackblitz.com/github/baroshem/next-security?file=.stackblitz%2Fnext.config.js)

## Features

- No configuration security headers similar to Helmet.js
- Customization of all header values
- `[Coming soon]` Content Security Policy (CSP) for SSG apps
- `[Coming soon]` Request Size limiter
- `[Coming soon]` Cross Site Scripting (XSS) Validation
- `[Coming soon]` Cross-Origin Resource Sharing (CORS) support
- `[Coming soon]` `[Optional]` Allowed HTTP Methods, Basic Auth, CSRF, Rate Limiter

## Usage

Install the plugin:

```sh
npm i next-security
yarn add next-security
pnpm add next-security
```

Add the plugin to the `next.config.js` like following :

```js
/** @type {import('next').NextConfig} */
const { headers } = require('next-security');
const nextConfig = {
...headers(), // with this approach you will also hide the `X-Powered-By` header that is a good pattern
};

module.exports = nextConfig;
```

Or, if you want to have more control over the source for the headers:

```js
/** @type {import('next').NextConfig} */
const { createHeaders } = require('next-security');
const nextConfig = {
async headers() {
return [
{
source: '/(.*)',
headers: createHeaders(),
},
];
},
// poweredByHeader: false // you can add this manually
};

module.exports = nextConfig;
```

And that's it! The plugin will now register security response headers so that your application will be more secure.

If you inspect the headers that are being returned by the Next application in the browser, you should see the following result:

```md
cross-origin-resource-policy: same-origin
cross-origin-opener-policy: same-origin
cross-origin-embedder-policy: require-corp
content-security-policy: base-uri 'self'; font-src 'self' https: data:; form-action 'self'; frame-ancestors 'self'; img-src 'self' data:; object-src 'none'; script-src-attr 'none'; style-src 'self' https: 'unsafe-inline'; upgrade-insecure-requests
origin-agent-cluster: ?1
referrer-policy: no-referrer
strict-transport-security: max-age=15552000; includeSubDomains
x-content-type-options: nosniff
x-dns-prefetch-control: off
x-download-options: noopen
x-frame-options: SAMEORIGIN
x-permitted-cross-domain-policies: none
x-xss-protection: 0
permissions-policy: camera=(), display-capture=(), fullscreen=(), geolocation=(), microphone=()
```

## Configuration

You can pass configuration to the plugin like following:

```js
/** @type {import('next').NextConfig} */
const { headers } = require('next-security');
const nextConfig = {
...headers({
xXSSProtection: '1',
crossOriginResourcePolicy: 'cross-origin',
contentSecurityPolicy: false,
}),
};

module.exports = nextConfig;
```

[npm-version-src]: https://img.shields.io/npm/v/next-security/latest.svg
[npm-version-href]: https://npmjs.com/package/next-security
[npm-downloads-src]: https://img.shields.io/npm/dt/next-security.svg
[npm-downloads-href]: https://npmjs.com/package/next-security
[github-actions-ci-src]: https://github.com/baroshem/next-security/actions/workflows/ci.yml/badge.svg
[github-actions-ci-href]: https://github.com/baroshem/next-security/actions?query=workflow%3Aci
[license-src]: https://img.shields.io/npm/l/next-security.svg
[license-href]: https://npmjs.com/package/next-security