From d7fd6bee3230a2d6f82d6d1575ddb2ad10a0d881 Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Sat, 29 Oct 2022 22:15:00 +0300
Subject: Encode strings correctly

---
 vnext/server/middleware/renderer.js | 48 ++++++++++++++++++++++---------------
 1 file changed, 29 insertions(+), 19 deletions(-)

(limited to 'vnext/server/middleware')

diff --git a/vnext/server/middleware/renderer.js b/vnext/server/middleware/renderer.js
index f60aa23c..6cc0b61b 100644
--- a/vnext/server/middleware/renderer.js
+++ b/vnext/server/middleware/renderer.js
@@ -10,7 +10,17 @@ import { StaticRouter } from 'react-router-dom/server';
 const path = require('path');
 const fs = require('fs');
 
-const serverRenderer = async (req, res, next) => {
+// convert a Unicode string to a string in which
+// each 16-bit unit occupies only one byte
+function toBinary(string) {
+    const codeUnits = new Uint16Array(string.length);
+    for (let i = 0; i < codeUnits.length; i++) {
+        codeUnits[i] = string.charCodeAt(i);
+    }
+    return Buffer.from(String.fromCharCode(...new Uint8Array(codeUnits.buffer))).toString('base64');
+}
+
+const serverRenderer = async (req, res) => {
 
     // point to the html file created by CRA's build tool
     const filePath = path.resolve(__dirname, '..', '..', 'dist', 'index.html');
@@ -33,29 +43,29 @@ const serverRenderer = async (req, res, next) => {
 
         const marker = '<div id="app">';
         const data = htmlData.split(marker);
-        const propsData = `<script>window.__PROPS__="${Buffer.from(JSON.stringify(props)).toString('base64')}";</script>${marker}`;
+        const propsData = `<script>window.__PROPS__="${toBinary(JSON.stringify(props))}";</script>${marker}`;
         let didError = false;
         const { pipe } = ReactDOMServer.renderToPipeableStream(
             <StaticRouter location={req.baseUrl} context={routerContext}>
                 <App {...props} />
             </StaticRouter>
-        , {
-            onShellReady() {
-                res.statusCode = didError ? 500 : 200;
-                res.setHeader('Content-type', 'text/html');
-                res.write(data[0]);
-                res.write(propsData);
-                pipe(res, { end: false });
-            },
-            onAllReady() {
-                res.write(data[1]);
-                res.end();
-            },
-            onError(err) {
-                didError = true;
-                console.log(err);
-            }
-        });
+            , {
+                onShellReady() {
+                    res.statusCode = didError ? 500 : 200;
+                    res.setHeader('Content-type', 'text/html');
+                    res.write(data[0]);
+                    res.write(propsData);
+                    pipe(res, { end: false });
+                },
+                onAllReady() {
+                    res.write(data[1]);
+                    res.end();
+                },
+                onError(err) {
+                    didError = true;
+                    console.log(err);
+                }
+            });
     });
 };
 
-- 
cgit v1.2.3