From cc34ea52ff043606cb2fe62afc64fe177cf7dbd4 Mon Sep 17 00:00:00 2001
From: Callum Silcock <code@csi.lk>
Date: Thu, 7 Sep 2023 08:52:51 +1000
Subject: [PATCH] docs: example of generated nonce to use base64 encoding as
 per spec (#55039)

nonce's are limited to characters found in base64 encoding, uuids contain '-' which breaks the spec,
converting to a base64 string after generating simplifies this

---

This was a bit gotcha in our project, there are a few tools that only expect there to be a single `-` and do a split based off it (so when there are >1 they fail)

## Rules for nonce's

- The nonce must be unique for each HTTP response
- The nonce should be generated using a cryptographically secure random generator
- The nonce should have sufficient length, aim for at least 128 bits of entropy (32 hex characters, or about 24 base64 characters).
- Script tags that have a nonce attribute must not have any untrusted / unescaped variables within them.
- The characters that can be used in the nonce string are limited to the characters found in base64 encoding.
---
 .../07-configuring/15-content-security-policy.mdx             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/02-app/01-building-your-application/07-configuring/15-content-security-policy.mdx b/docs/02-app/01-building-your-application/07-configuring/15-content-security-policy.mdx
index b946459119033..0f998316acfef 100644
--- a/docs/02-app/01-building-your-application/07-configuring/15-content-security-policy.mdx
+++ b/docs/02-app/01-building-your-application/07-configuring/15-content-security-policy.mdx
@@ -40,7 +40,7 @@ For example:
 import { NextRequest, NextResponse } from 'next/server'
 
 export function middleware(request: NextRequest) {
-  const nonce = crypto.randomUUID()
+  const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
   const cspHeader = `
     default-src 'self';
     script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
@@ -76,7 +76,7 @@ export function middleware(request: NextRequest) {
 import { NextResponse } from 'next/server'
 
 export function middleware(request) {
-  const nonce = crypto.randomUUID()
+  const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
   const cspHeader = `
     default-src 'self';
     script-src 'self' 'nonce-${nonce}' 'strict-dynamic';