@lightspeed/express-csp-middleware

v1.0.2

Published

a year ago

Common content security policy headers Express middleware for Lightspeed apps

Downloads

0High
0Medium
0Low

`@lightspeed/express-csp-middleware`

Introduction

Express middleware for generating the HTTP Content-Security-Policy header for Lightspeed apps, allowing developers to control resources the user agent is allowed to load for a given page.

Quick Start

Install the dependency in your webapp.

yarn add @lightspeed/express-csp-middleware

Apply the middleware to your Express server.

// server.ts
import express from 'express';
import { cspMiddleware } from '@lightspeed/express-csp-middleware';

const app = express();
app.use(cspMiddleware({ env: process.env.NODE_CONFIG_ENV }));

Script tags from HTML returned from the server must be attributed with the same unique nonce for the given request. For example, in a Next.js app with serverside rendering, apply the nonce as follows:

// app/_document.tsx
import React from 'react';
import Document, { Head, Main, NextScript, NextDocumentContext } from 'next/document';

type MyDocumentProps = {
  nonce: string;
};

export default class MyDocument extends Document<MyDocumentProps> {
  static async getInitialProps(ctx: NextDocumentContext) {
    const { nonce } = (ctx.res as any).locals;
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps, nonce };
  }

  render() {
    return (
      <html>
        <Head nonce={this.props.nonce}>
          <title>Lightspeed Retail - Cool Page</title>
        </Head>
        <body>
          <Main />
          <NextScript nonce={this.props.nonce} />
        </body>
      </html>
    );
  }
}

Update all pages to include a getInitialProps method on the component. This will override nextjs to force server-side rendering and provide access to req and res in _document. You can read more here

// pages/index.tsx
import * as React from 'react';

const Hello = () => {
  return <div>Hello World!</div>;
};

Hello.getInitialProps = async () => ({});

Customizing your own presets

It is possible to customize the CSP middleware policies.

You may pass in an object into the additionalPresets keys. These values will either replace the existing presets or create a new entity.

In order for them to be configured properly, please ensure that the key's match and that the value is an array of strings.

The default values used by the CSP middleware are exported to faciliate extending the defaults rather than replacing them.

import { cspMiddleware, imgSrc } from '@lightspeed/express-csp-middleware';

const myExtraPresets = {
  'img-src': imgSrc.concat(['"cdn-a"', '"cdn-b"']),
  'connect-src': ['"http:"'],
};

app.use(cspMiddleware({ env: process.env.NODE_CONFIG_ENV, additionalPresets: myExtraPresets }));

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@lightspeed/express-csp-middleware

Introduction

Quick Start

Customizing your own presets

`@lightspeed/express-csp-middleware`