Skip to content

v1 Content Security Policy

Jonathan Sharpe edited this page Aug 24, 2024 · 1 revision

Since version 4.0.0 of Helmet (see the changelog) the default configuration includes some Content-Security-Policy directives. This causes errors for some styles and scripts (e.g. the externalised React/React-DOM packages from unpkg.com). This upgrade got applied in acece0c. A fix was applied in 7f2799e, but if you're using a version in-between or upgrade Helmet yourself in a project based on an earlier version of the starter kit, you will need to add some configuration to get everything working again. In server/app.js replace:

app.use(helmet());

with:

app.use(helmet({
	contentSecurityPolicy: {
		directives: {
			defaultSrc: ["'self'"],
			objectSrc: ["'none'"],
			scriptSrc: ["'self'", "unpkg.com", "polyfill.io"],
			styleSrc: ["'self'", "https: 'unsafe-inline'"],
			upgradeInsecureRequests: [],
		},
	},
}));

Note that the end-to-end tests did not detect this regression because Cypress strips the Content-Security-Policy headers.

You may find you have to add other directives, depending on what requests you want to make from the client side. For example, if you want to allow data: image sources you can add:

imgSrc: ["'self'", "data:"],
Clone this wiki locally