fix: Encode characters that may break URL detection

47ng · Oct 23, 2023 · 29d878c · 29d878c
1 parent 8ec3810
commit 29d878c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git a/packages/next-usequerystate/src/url-encoding.test.ts b/packages/next-usequerystate/src/url-encoding.test.ts
@@ -17,12 +17,19 @@ describe('url-encoding/encodeQueryValue', () => {
   test('Percent signs are encoded', () => {
     expect(encodeQueryValue('%')).toBe(encodeURIComponent('%'))
   })
+  test('Characters that break URLs are encoded', () => {
+    expect(encodeQueryValue('"')).toEqual(encodeURIComponent('"'))
+    expect(encodeQueryValue("'")).toEqual('%27') // encodeURIComponent does not encode single quotes
+    expect(encodeQueryValue('`')).toEqual(encodeURIComponent('`'))
+    expect(encodeQueryValue('<')).toEqual(encodeURIComponent('<'))
+    expect(encodeQueryValue('>')).toEqual(encodeURIComponent('>'))
+  })
   test('Alphanumericals are passed through', () => {
     const input = 'abcdefghijklmnopqrstuvwxyz0123456789'
     expect(encodeQueryValue(input)).toBe(input)
   })
   test('Other special characters are passed through', () => {
-    const input = '-._~!$\'()*,;=:@"/?`[]{}\\|<>^'
+    const input = '-._~!$()*,;=:@/?[]{}\\|^'
     expect(encodeQueryValue(input)).toBe(input)
   })
   test('practical use-cases', () => {
@@ -47,14 +54,12 @@ describe('url-encoding/renderQueryString', () => {
   })
   test('encoding', () => {
     const search = new URLSearchParams()
-    search.set('test', '-._~!$\'()*,;=:@"/?`[]{}\\|<>^')
-    expect(renderQueryString(search)).toBe(
-      'test=-._~!$\'()*,;=:@"/?`[]{}\\|<>^'
-    )
+    search.set('test', '-._~!$()*,;=:@/?[]{}\\|^')
+    expect(renderQueryString(search)).toBe('test=-._~!$()*,;=:@/?[]{}\\|^')
   })
   test('decoding', () => {
     const search = new URLSearchParams()
-    const value = '-._~!$\'()*,;=:@"/?`[]{}\\|<>^'
+    const value = '!"#$%&\'()*+,-./:;<=>?@[\\]^_`{|}~'
     search.set('test', value)
     const url = new URL('http://example.com/?' + renderQueryString(search))
     expect(url.searchParams.get('test')).toBe(value)
@@ -95,3 +100,14 @@ describe('url-encoding/renderQueryString', () => {
     )
   })
 })
+
+test.skip('encodeURI vs encodeURIComponent vs custom encoding', () => {
+  const chars = '!"#$%&\'()*+,-./:;<=>?@[\\]^_`{|}~'.split('')
+  const table = chars.map(char => ({
+    char,
+    encodeQueryValue: encodeQueryValue(char),
+    encodeURI: encodeURI(char),
+    encodeURIComponent: encodeURIComponent(char)
+  }))
+  console.table(table)
+})
diff --git a/packages/next-usequerystate/src/url-encoding.ts b/packages/next-usequerystate/src/url-encoding.ts
@@ -20,5 +20,12 @@ export function encodeQueryValue(input: string) {
       // Encode other URI-reserved characters
       .replace(/#/g, '%23')
       .replace(/&/g, '%26')
+      // Encode characters that break URL detection on some platforms
+      // and would drop the tail end of the querystring:
+      .replace(/"/g, '%22')
+      .replace(/'/g, '%27')
+      .replace(/`/g, '%60')
+      .replace(/</g, '%3C')
+      .replace(/>/g, '%3E')
   )
 }