Allow CSP configuration in app router metadata

[barroudjo]

Goals

1. In page/layout in the App router, allow the possibility of setting CSP rules in the metadata object (or in the object returned by the generateMetadata function)

Non-Goals

Background

This was possible in the pages router.

This is necessary because :
When you build in SSG mode (output: 'export'), and you're not responsible for the hosting of the build (and hence have no way to configure the CSP headers), there should still be a way to set CSP rules, and there's no other way than through metadata (i.e. with<meta ...> tags).

When some pages need to have stricter CSP rules...

And I'm sure there are other examples.

Proposal

Simply add a key csp in the metadata object, and use it to fill the tag <meta http-equiv="Content-Security-Policy" content="..." />

[0xdbe]

CSP can be delivered via an HTTP Header or a meta element.

By using the meta element, some features are not supported such as frame-ancestors directive.
Additionally, some elements (scripts, styles, ...) may be loaded before this CSP is evaluated.

So, http-equiv in meta element is not really useful for security.

[barroudjo]

Additionally, some elements (scripts, styles, ...) may be loaded before this CSP is evaluated.

I'm pretty sure that's not the case if you do it properly and put the CSP meta in the head as it should be, before any scripts. I'd be interested to see your source on this. I have never seen this said anywhere.

And the fact that it is possible to set CSP via a meta tag, and that it has not been deprecated, tells you it has some real use cases.

http-equiv in meta element is not really useful for security.

There is nothing on the MDN page indicating that...

Since it is part of the HTML standard, and for good reason, it would be nice if Next.js allowed us to use it (and see the use cases I listed above).

[0xdbe]

I don't have much experience with Nextjs but with Angular, it was difficult to have meta tag properly define before any scripts. This was due to Meta component from @angular/platform-browser.

For Nextjs, if the solution is to set meta tag by Nextjs core itself, it could be done correctly and it would be difficult to set scripts/styles before.

However, the meta tag doesn't support all CSP directives: frame-ancestors, sandbox, report-uri, ... (source)

So, what I want to say:

http-equiv in meta element is not really useful for CONTENT security POLICY.

Mainly because, I think that report-uri is not an option. Otherwise, you don't have any feedback on CSP errors.

The meta support is handy when you can't set a HTTP response header, but in most cases using a HTTP response header is a stronger approach. A guideline is available in Nextjs documentation

[barroudjo]

So we agree then: in most cases the best solution is to set the CSP rules in HTTP headers, but in some cases it is useful to be able to set it via a meta tag, and Next.js should implement a way to do it in the app router as it is already possible in the pages router (probably by adding a key csp in the metadata object).