# nonce-simple

> Generate a nonce to use to verify that scripts are intended to be loaded.

Latest version **1.1.2** (published 2024-12-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install nonce-simple
pnpm add nonce-simple
yarn add nonce-simple
bun add nonce-simple
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2024-12-14 |
| First published | 2023-12-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ryan M. |
| Maintainers | xnifty |
| Keywords | nonce |

## Links

- npm: https://www.npmjs.com/package/nonce-simple
- Repository: https://github.com/xNifty/nonce-simple
- Homepage: https://github.com/xNifty/nonce-simple#readme
- Issues: https://github.com/xnifty/nonce-simple/issues
- npm.io page: https://npm.io/package/nonce-simple

## Recent versions

- 1.1.2 (latest) — 2024-12-14
- 1.1.0 — 2024-04-11
- 1.0.5 — 2024-02-06
- 1.0.4 — 2024-01-22
- 1.0.3 — 2023-12-21
- 1.0.2 — 2023-12-04
- 1.0.1 — 2023-12-04
- 1.0.0 — 2023-12-04

## README

# nonce-simple

This module was originally code within my personal website, but I felt it would be better served as a package I could install into other projects easily. It is very straight forward and simple to use, as that was my intention. This was designed to be used with Helmet-CSP which at the time had no instructions for generating nonces so I made this. This is highly situational to what I wanted it to do.

## Getting Started

Simple install from NPM as normal.

```
$ npm install nonce-simple
```

## Usage

```
import {generateNonce, getDirectives} from "nonce-simple";
import csp from "helmet-csp";

// Example options
const nonceOptions = {
  scripts: [
    `https://cdnjs.cloudflare.com`,
    `https://code.jquery.com`,
    `https://maxcdn.bootstrapcdn.com`,
    `https://cdn.jsdelivr.net`,
    `https://www.google.com/recaptcha/`,
    `https://www.gstatic.com/recaptcha/`,
  ],
  styles: [
    `https://cdnjs.cloudflare.com`,
    `https://fonts.googleapis.com`,
    `https://maxcdn.bootstrapcdn.com`,
    `https://cdn.jsdelivr.net`,
  ],
  fonts: [
    `https://cdnjs.cloudflare.com`,
    `https://fonts.gstatic.com`,
    `https://maxcdn.bootstrapcdn.com`,
  ],
  connect: [`https://cdn.jsdelivr.net`],
  frame: [`https://www.google.com/recaptcha/`],
  reportTo: "https://test.report-uri.com/r/d/csp/enforce",
  requireTrustedTypesFor: ["'script'"]
};

// Add nonce to res.locals
app.use(function (req, res, next) {
  var nonce = generateNonce();
  res.locals.nonce = nonce;
  res.locals.cspNonce = "nonce-" + nonce;
  next();
});

// Use the nonce we generated along with any options we specify.
app.use(
  csp({
    directives: getDirectives(
      (req, res) => `'${res.locals.cspNonce}'`,
      nonceOptions
    ),
  })
);
```

## Options

You can include options of different types for allowed URLs that can be loaded. Anything not provided will default to `self` and script-src and font-src will default to `self` and `nonce`.

```
scripts: [],
styles: [],
fonts: [],
connect: [],
frame: [],
reportTo: []
```

## Testing CSP

I use a Chrome plugin for checking CSP called CSP Evaluator but Google also provides a testing option [here](https://csp-evaluator.withgoogle.com/).

---
_Source: https://npm.io/package/nonce-simple · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._