Encode unsafe URI characters
- 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
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