Add nonces for inline scripts to CSP

[roborourke]

This code works well so far but would be good to figure out some configurability. Also needs a lot of cross browser testing.

add_action( 'template_redirect', function () {

	// Collect full page output.
	ob_start( function ( $output ) {

		$nonces = [];

		$output = preg_replace_callback( '#<script.*?\>#', function ( $matches ) use ( &$nonces ) {
			$nonce = wp_create_nonce( $matches[0] );
			$nonces[] = $nonce;

			return str_replace( '<script', "<script nonce='{$nonce}'", $matches[0] );
		}, $output );

		$nonces_csp = array_reduce( $nonces, function ( $header, $nonce ) {
			return "{$header} 'nonce-{$nonce}'";
		}, '' );

		header( sprintf( "Content-Security-Policy: base-uri 'self'; object-src 'none'; script-src 'unsafe-inline' https:%s 'strict-dynamic'", $nonces_csp ) );

		return $output;
	} );

} );

[rmccue]

We need to create Real Nonces™️, as the spec notes you're not allowed to reuse them; we can't use wp_create_nonce for this alas.

[roborourke]

Ah ok, this was more of a quick & dirty approach. They did the job locally at least.

[roborourke]

Wait what does it mean by not reusing them? They're gonna be the same for some length of time. Or is WP's implementation liable to throw back a previously generated one in future?

[rmccue]

Specifically:

The server must generate a unique nonce value each time it transmits a policy.

WP's nonces rotate every 12 hours, so they don't meet that criteria.

[rmccue]

From the spec:

If a server delivers a nonce-source expression as part of a policy, the server MUST generate a unique value each time it transmits a policy. The generated value SHOULD be at least 128 bits long (before encoding), and SHOULD be generated via a cryptographically secure random number generator in order to ensure that the value is difficult for an attacker to predict.

[roborourke]

Bleeeurgh. Ok, seems Chrome didn't actually enforce that, I refreshed a bunch of times with the same value.

So if we're to use nonces which are the easiest to implement for inline and external scripts then we'd have to go with a Lambda@Edge function. Can't really see a way around it in a CloudFront world.

[rmccue]

I don't think it necessarily has to be unique per request, but rather if the page's content changes, the nonce should change too. I think if it's cached and the same exact page, it's fine to send the same.

i.e. I think your approach here is fine, just need to use real nonces instead.

[madmilk78]

Hi there,
I searched a solution for the real nonces problem too. It seems your code works fine on chrome (didnt checked it with other browsers) with that following light plugin:
-WordPress nonce methods with single use check
-add browser id to nonce to prevent duplicated nonces
https://github.com/isotopsweden/wp-real-nonce

But when I reload the Page the nonce attribute is empty.
So what do you think about it?

[pdewouters]

Could this approach be used with hash-based CSP - using the hashes generated for the scripts integrity attribute?
https://web.dev/strict-csp/#step-1-decide-if-you-need-a-nonce-or-hash-based-csp

[roborourke]

That might be easier yeah. Could actually filter on script_loader_tag as that includes translation, before & after inline tags.