trezy/next-safe

## `contentSecurityPolicy`

### Default

```js
{
    contentSecurityPolicy: {
        "base-uri": "'none'",
        "child-src": "'none'",
        "connect-src": "'self'",
        "default-src": "'self'",
        "font-src": "'self'",
        "form-action": "'self'",
        "frame-ancestors": "'none'",
        "frame-src": "'none'",
        "img-src": "'self'",
        "manifest-src": "'self'",
        "media-src": "'self'",
        "object-src": "'none'",
        "prefetch-src": "'self'",
        "script-src": "'self'",
        "style-src": "'self'",
        "worker-src": "'self'",
    },
}
```

Additionally, if `isDev` is set to `true`:

```js
{
    contentSecurityPolicy: {
        "connect-src": "webpack://*",
        "script-src": "'unsafe-eval'",
        "style-src": "'unsafe-inline'",
    },
}
```

### Description

`contentSecurityPolicy` controls the `Content-Security-Policy` header. It takes an object, in which each key is a CSP directive and the value of that key is an array of sources. For example:

```js
{
    contentSecurityPolicy: {
        "img-src": ["'self'", "unsplash.com"],
    },
}
```

Note that `'self'` is in quotes. This is a CSP thing and `next-safe` does not handle it for you. The special sources (such as `'self'`, `'none'`, etc) must be wrapped in single quotes.

### Examples

#### Allow all sources from this website by default

```js
{
    contentSecurityPolicy: {
        "default-src": ["'self'"],
    },
}
```

#### Restrict the URIs that can be used in the `<base>` element

```js
{
    contentSecurityPolicy: {
        "base-uri": ["example.com", "foo.example.com", "bar.example.com"],
    },
}
```

#### Force the browser to use `https://` for all `http://` links

```js
{
    contentSecurityPolicy: {
        "upgrade-insecure-requests": [],
    },
}
```

#### Disable the `prefetch-src` directive

```js
{
    contentSecurityPolicy: {
        "prefetch-src": false,
    },
}
```

#### Disable CSP entirely (NOT recommended)

```js
{
    contentSecurityPolicy: false,
}
```

### `contentSecurityPolicy.mergeDefaultDirectives`

Setting `contentSecurityPolicy.mergeDefaultDirectives` to `true` will retain the default directive values supplied by `next-safe` and merge them with any additional directives that are added in the configuration. Duplicate values in any directives will be removed. Setting any directive as `false` will disable the directive as usual.

```js
{
    contentSecurityPolicy: {
        mergeDefaultDirectives: true,
        "child-src": false,
        // equivalent to - "child-src": false
        "img-src": "unsplash.com",
        // equivalent to - "img-src": ["'self'", "unsplash.com"]
        "font-src": ["fonts.adobe.com", "fonts.gstatic.com"]
        // equivalent to - "font-src": ["'self'", "fonts.adobe.com", "fonts.gstatic.com"]
    },
}
```

### `contentSecurityPolicy.reportOnly`

Setting `contentSecurityPolicy.reportOnly` to `true` will rename the `Content-Security-Policy` header to `Content-Security-Policy-Report-Only`. This is useful if you want to test your CSP without breaking your site. Make sure to also set up an endpoint to receive the reports, then set your [`contentSecurityPolicy.report-to`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/report-to) field to point to that endpoint.