Is this library secure against XSS ?

[pedro757]

Just asking

[franky47]

If you mean "does it protect you from doing things like this":

const [redirect] = useQueryState('redirect')
const router = useRouter()

useEffect(() => {
  router.replace(redirect)
}, [redirect])

Then no. A little userland logic is needed to prevent XSS. This can (and probably should) be done in a parser:

const redirectParser = createParser({
  parse(query) {
    // Very basic check
    if (query.startsWith('/') === false) {
      return null // Possible XSS
    }
    return query
  },
  serialize(value) { return value }
})

function useRedirect() {
  const [redirect] = useQueryState('redirect', redirectParser.withDefault('/'))
  return redirect
}

[abhion]

@franky47 why does this

http://localhost:3000/en/fle?page_number=1&q=javascript:{alert("ad")}
const [q, setQ] = useQueryState(
    "q",
    parseAsString
      .withDefault(searchParams.get("q") ?? "") // the alert should be injected here
      .withOptions({ throttleMs: 400 }),
  );

not show an alert while

const urlToRedirectToOnLogin = searchParams.get("redirect");
 router.push(
        `${urlToRedirectToOnLogin}` ?? DEFAULT_LANDING_PAGE_ON_LOGIN,
 );

shows alert when I do /auth/login?redirect=javascript:{alert("adf")}

[franky47]

In the first case, the q variable is set to the string 'javascript:{alert("ad")}', there is no evaluation here.

The evaluation (and the XSS) comes in the second case, where you connect that variable (whether coming from nuqs or from raw search params) to the router.

As a side note, you don't need to do .withDefault(searchParams.get("q") ?? ""), .withDefault("") is enough: the default value is returned when the state would otherwise be null, ie when there is no search param for the given key in the URL, or its value is invalid for the given parser (here parseAsString accepts anything, but more type-restrictive parsers like number or literals may only accept certain values).