[2.x] Fix multi byte strings in history encryption + test (#2030)

* fix multi byte strings in history encryption + test

* react + svelte tests for multi byte encryption

Author: joetannenbaum

packages/core/src/encryption.ts

@@ -47,17 +47,17 @@ const encryptData = async (iv: Uint8Array, key: CryptoKey, data: any) => {
 
   const textEncoder = new TextEncoder()
   const str = JSON.stringify(data)
-  const encoded = new Uint8Array(str.length)
+  const encoded = new Uint8Array(str.length * 3)
 
-  textEncoder.encodeInto(str, encoded)
+  const result = textEncoder.encodeInto(str, encoded)
 
   return window.crypto.subtle.encrypt(
     {
       name: 'AES-GCM',
       iv,
     },
     key,
-    encoded,
+    encoded.subarray(0, result.written),
   )
 }
 

packages/react/test-app/Pages/History/Page.jsx

@@ -1,6 +1,6 @@
 import { Link, router } from '@inertiajs/react'
 
-export default ({ pageNumber }) => {
+export default ({ pageNumber, multiByte }) => {
   const clearHistory = () => {
     router.clearHistory()
   }
@@ -11,10 +11,12 @@ export default ({ pageNumber }) => {
       <Link href="/history/2">Page 2</Link>
       <Link href="/history/3">Page 3</Link>
       <Link href="/history/4">Page 4</Link>
+      <Link href="/history/5">Page 5</Link>
 
       <button onClick={clearHistory}>Clear History</button>
 
       <div>This is page {pageNumber}.</div>
+      <div>Multi byte character: {multiByte}</div>
     </>
   )
 }

packages/svelte/test-app/Pages/History/Page.svelte

@@ -2,13 +2,16 @@
   import { inertia, router } from '@inertiajs/svelte'
 
   export let pageNumber
+    export let multiByte
 </script>
 
 <a href="/history/1" use:inertia>Page 1</a>
 <a href="/history/2" use:inertia>Page 2</a>
 <a href="/history/3" use:inertia>Page 3</a>
 <a href="/history/4" use:inertia>Page 4</a>
+<a href="/history/5" use:inertia>Page 5</a>
 
 <button on:click={() => router.clearHistory()}>Clear History</button>
 
 <div>This is page {pageNumber}.</div>
+<div>Multi byte character: { multiByte }</div>

packages/vue3/test-app/Pages/History/Page.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
 import { Link, router } from '@inertiajs/vue3'
 
-defineProps<{ pageNumber: number }>()
+defineProps<{ pageNumber: number; multiByte: string }>()
 </script>
 
 <template>
   <Link href="/history/1">Page 1</Link>
   <Link href="/history/2">Page 2</Link>
   <Link href="/history/3">Page 3</Link>
   <Link href="/history/4">Page 4</Link>
+  <Link href="/history/5">Page 5</Link>
 
   <button @click="router.clearHistory()">Clear History</button>
 
   <div>This is page {{ pageNumber }}.</div>
+  <div>Multi byte character: {{ multiByte }}</div>
 </template>

tests/app/server.js

@@ -215,8 +215,9 @@ app.get('/history/:pageNumber', (req, res) => {
     component: 'History/Page',
     props: {
       pageNumber: req.params.pageNumber,
+      multiByte: req.params.pageNumber === '5' ? '😃' : 'n/a',
     },
-    encryptHistory: req.params.pageNumber === '3',
+    encryptHistory: req.params.pageNumber === '3' || req.params.pageNumber === '5',
     clearHistory: req.params.pageNumber === '4',
   })
 })

tests/history.spec.ts

@@ -109,3 +109,26 @@ test('history can be cleared via props', async ({ page }) => {
   await page.waitForURL('/history/3')
   await expect(requests.requests).toHaveLength(1)
 })
+
+test('multi byte strings can be encrypyed', async ({ page }) => {
+  await clickAndWaitForResponse(page, 'Page 5', '/history/5')
+  const historyState5 = await page.evaluate(() => window.history.state)
+  // When history is encrypted, the page is an ArrayBuffer,
+  // but Playwright doesn't transfer it as such over the wire (page.evaluate),
+  // so if the object is "empty" and the page check below works, it's working.
+  await expect(historyState5.page).toEqual({})
+  await expect(historyState5.timestamp).toBeGreaterThan(0)
+  await expect(page.getByText('Multi byte character: 😃')).toBeVisible()
+
+  await clickAndWaitForResponse(page, 'Page 1', '/history/1')
+
+  await expect(page.getByText('Multi byte character: n/a')).toBeVisible()
+
+  requests.listen(page)
+
+  await page.goBack()
+  await page.waitForURL('/history/5')
+  await expect(page.getByText('This is page 5')).toBeVisible()
+  await expect(requests.requests).toHaveLength(0)
+  await expect(page.getByText('Multi byte character: 😃')).toBeVisible()
+})