Encode customization header (#3289)

Co-authored-by: Nicolas Dorseuil <nicolas@gitbook.io>

Author: conico974

.changeset/lazy-pants-matter.md

@@ -0,0 +1,6 @@
+---
+"gitbook-v2": patch
+"gitbook": patch
+---
+
+encode customization header

packages/gitbook-v2/src/middleware.ts

@@ -226,7 +226,8 @@ async function serveSiteRoutes(requestURL: URL, request: NextRequest) {
         const customization = siteRequestURL.searchParams.get('customization');
         if (customization && validateSerializedCustomization(customization)) {
             routeType = 'dynamic';
-            requestHeaders.set(MiddlewareHeaders.Customization, customization);
+            // We need to encode the customization headers, otherwise it will fail for some customization values containing non ASCII chars on vercel.
+            requestHeaders.set(MiddlewareHeaders.Customization, encodeURIComponent(customization));
         }
         const theme = siteRequestURL.searchParams.get('theme');
         if (theme === CustomizationThemeMode.Dark || theme === CustomizationThemeMode.Light) {

packages/gitbook/src/lib/customization.ts

@@ -12,9 +12,12 @@ export async function getDynamicCustomizationSettings(
 ): Promise<SiteCustomizationSettings> {
     const headersList = await headers();
     const extend = headersList.get(MiddlewareHeaders.Customization);
+
     if (extend) {
         try {
-            const parsedSettings = rison.decode_object<SiteCustomizationSettings>(extend);
+            // We need to decode it first as it is URL encoded, then decode the Rison object
+            const unencoded = decodeURIComponent(extend);
+            const parsedSettings = rison.decode_object<SiteCustomizationSettings>(unencoded);
 
             return parsedSettings;
         } catch (_error) {}

packages/gitbook/src/middleware.ts

@@ -201,7 +201,9 @@ export async function middleware(request: NextRequest) {
 
     const customization = url.searchParams.get('customization');
     if (customization && validateSerializedCustomization(customization)) {
-        headers.set(MiddlewareHeaders.Customization, customization);
+        // We need to encode the customization to ensure it is properly encoded in vercel.
+        // We do it here as well so that we have a single method to decode it later.
+        headers.set(MiddlewareHeaders.Customization, encodeURIComponent(customization));
     }
 
     const theme = url.searchParams.get('theme');