Include nonce for script-src but exclude nonce for style-src

[fdev]

After running into too many issues getting strict inline styles to work, I've decided to use unsafe-inline for style-src.

I have configured 'style-src': ['self', 'unsafe-inline'] in the directives, but in production the style-src still contains a nonce which disables unsafe-inline.

It seems the only way to prevent this from happening is to remove the gsspWithNonce wrapper from my pages, but I do need the nonce for script-src.

Is there a way to keep using a nonce for script-src, while being allowed to use unsafe-inline for style-src? I have dug through the code and issues but unfortunately came up empty.

edit: Turns out the reason why my strict inline styles were failing is caused by another issue: Routing & Nonce Required #77

[Karnak19]

Hey, i'm facing a similar issue:
I got a library that inject at runtime (in the browser) a script, that want to create some style tags but got refused by CSP, which is normal as they don't have nonce or sha 🤷

I tried to overwrite the csp header in getServerSideProps (without using gsspWithNonce) by filtering the nonce and sha on style-src rule, but they are still present on the document sent to the browser.

Is there anything I din't understand or a workaround ? 🙏

[Morozzzko]

Faced the same issue. It appears that the builder just applies nonce to style-src if it's present, ignoring any config that might have told it not to

next-safe-middleware/packages/builder/src/builder.ts

Lines 141 to 145 in c407570

	if (this.hasDirective("style-src")) {
	this.withoutDirectiveValues({
	"style-src": /nonce-/,
	}).withDirectives({ "style-src": [nonceWithPrefix] });
	}