contentSecurityPolicy.md

contentSecurityPolicy

Default

{
	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:

{
	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:

{
	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

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

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

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

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

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

Disable the prefetch-src directive

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

Disable CSP entirely (NOT recommended)

{
	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.

{
	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 field to point to that endpoint.