1.0.2 • Published 2 years ago
@lightspeed/express-csp-middleware v1.0.2
@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
noncefor the given request. For example, in aNext.jsapp 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
getInitialPropsmethod on the component. This will override nextjs to force server-side rendering and provide access toreqandresin_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 }));