47ng / 47ng/nuqs

Encode unsafe URI characters

Offen
#925 4 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
bug
Vorherrschende Sprache
TypeScript
Sterne
10.8k
Forks
294
Ø Merge
1 T. 16 Std.
Gemergte PRs (30 T.)
21

Beschreibung

Currently, `nuqs` doesn't encode certain characters (e.g. `[`) in URI which might produce some issues between different environments.

For example, when Safari on iOS identifies `[` or `{` symbol in URI, it automatically encodes whole search parameters even if some parts of it are already encoded. It can cause an issue when you copy a URL containing those characters from some browser and paste it to Safari on iOS. Consider such case

1. User copies a URL `https://test.com/?name=[тест`. The most of browsers automatically encodes the copied URL and actually copy `https://test.com/?name=[%D1%82%D0%B5%D1%81%D1%82` to the clipboard. Notice that it doesn't encode `[` symbol.
2. User opens that link (`https://test.com/?name=[%D1%82%D0%B5%D1%81%D1%82`) on Safari iOS.
3. Safari sees `[` character in search params and automatically encodes it (even though some content were already encoded): `https://test.com/?name=[%D1%82%D0%B5%D1%81%D1%82` -> `https://test.com/?name=%5B%25D1%2582%25D0%25B5%25D1%2581%25D1%2582`.
4. User sees `[%D1%82%D0%B5%D1%81%D1%82` in UI instead of seeing `[тест`.

The issue becomes more apparent when you use `parseAsJson` (because it often produces `[`, `{` characters) and UTF-8 characters (e.g. website with non-latin language).

I don't know the actual logic on Safari iOS of encoding the URL. From my quick testing, it always does it if there is at least one `[` or `{` character.

## Context

`2.4.0`

What framework are you using?

- ✅ Next.js (app router)

Which version of your framework are you using?

v15

## Reproduction

I've created a minimal example which uses `useQueryState` (copied from nuqs docs) - https://codesandbox.io/p/devbox/9953r5

1. Open https://9953r5-3000.csb.app/?name=[%D1%82%D0%B5%D1%81%D1%82 (this is the copied version of `https://test.com/?name=[тест`) on Safari iOS. Instead of having `[тест` in the input, it shows `[%D1%82%D0%B5%D1%81%D1%82`. But if you open it, for example, on Chrome or Firefox (not on iOS), then it works fine.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

The issue is about encoding unsafe URI characters like '[' and '{' in the nuqs library. Start by examining the serialization/encoding logic in the source code, likely in files handling query string parsing and serialization. Look for where characters are encoded or left as-is. Test the reproduction case on Safari iOS to confirm the behavior, then modify the encoding to include these characters. Verify by running existing tests and adding a test for this specific Safari iOS edge case.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
next.js, react, typescript
Bereich
frontend, web-dev
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
55/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.