From 3f60b406b0ede692e5cd830da03952cce0d990f1 Mon Sep 17 00:00:00 2001 From: Sasha Aickin Date: Tue, 22 Oct 2024 14:07:09 -0400 Subject: [PATCH 1/3] Added documentation about potential XSS in router.push --- docs/02-app/02-api-reference/04-functions/use-router.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/02-app/02-api-reference/04-functions/use-router.mdx b/docs/02-app/02-api-reference/04-functions/use-router.mdx index 630b43c566c10..d3b6b73a622dd 100644 --- a/docs/02-app/02-api-reference/04-functions/use-router.mdx +++ b/docs/02-app/02-api-reference/04-functions/use-router.mdx @@ -41,7 +41,7 @@ export default function Page() { ## `useRouter()` -- `router.push(href: string, { scroll: boolean })`: Perform a client-side navigation to the provided route. Adds a new entry into the [browser’s history](https://developer.mozilla.org/docs/Web/API/History_API) stack. +- `router.push(href: string, { scroll: boolean })`: Perform a client-side navigation to the provided route. Adds a new entry into the [browser’s history](https://developer.mozilla.org/docs/Web/API/History_API) stack. Note that you must not send untrusted or unsanitized URLs to `router.push`, as this can open your site to cross-site scripting (XSS) vulnerabilities. For example, `javascript:` URLs sent to `router.push` will be executed in the context of your page. - `router.replace(href: string, { scroll: boolean })`: Perform a client-side navigation to the provided route without adding a new entry into the [browser’s history stack](https://developer.mozilla.org/docs/Web/API/History_API). - `router.refresh()`: Refresh the current route. Making a new request to the server, re-fetching data requests, and re-rendering Server Components. The client will merge the updated React Server Component payload without losing unaffected client-side React (e.g. `useState`) or browser state (e.g. scroll position). - `router.prefetch(href: string)`: [Prefetch](/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching) the provided route for faster client-side transitions. From 18feb4a6a601b693730abdf5a176a7859774ce66 Mon Sep 17 00:00:00 2001 From: Sasha Aickin Date: Wed, 23 Oct 2024 12:51:14 -0400 Subject: [PATCH 2/3] Added documentation about XSS vulnerability to router.replace --- docs/02-app/02-api-reference/04-functions/use-router.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/02-app/02-api-reference/04-functions/use-router.mdx b/docs/02-app/02-api-reference/04-functions/use-router.mdx index d3b6b73a622dd..eb4aafc521024 100644 --- a/docs/02-app/02-api-reference/04-functions/use-router.mdx +++ b/docs/02-app/02-api-reference/04-functions/use-router.mdx @@ -42,7 +42,7 @@ export default function Page() { ## `useRouter()` - `router.push(href: string, { scroll: boolean })`: Perform a client-side navigation to the provided route. Adds a new entry into the [browser’s history](https://developer.mozilla.org/docs/Web/API/History_API) stack. Note that you must not send untrusted or unsanitized URLs to `router.push`, as this can open your site to cross-site scripting (XSS) vulnerabilities. For example, `javascript:` URLs sent to `router.push` will be executed in the context of your page. -- `router.replace(href: string, { scroll: boolean })`: Perform a client-side navigation to the provided route without adding a new entry into the [browser’s history stack](https://developer.mozilla.org/docs/Web/API/History_API). +- `router.replace(href: string, { scroll: boolean })`: Perform a client-side navigation to the provided route without adding a new entry into the [browser’s history stack](https://developer.mozilla.org/docs/Web/API/History_API). Note that you must not send untrusted or unsanitized URLs to `router.replace`, as this can open your site to cross-site scripting (XSS) vulnerabilities. For example, `javascript:` URLs sent to `router.replace` will be executed in the context of your page. - `router.refresh()`: Refresh the current route. Making a new request to the server, re-fetching data requests, and re-rendering Server Components. The client will merge the updated React Server Component payload without losing unaffected client-side React (e.g. `useState`) or browser state (e.g. scroll position). - `router.prefetch(href: string)`: [Prefetch](/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching) the provided route for faster client-side transitions. - `router.back()`: Navigate back to the previous route in the browser’s history stack. From 1024026aaba46959f3ca600ce7458e82c0db7802 Mon Sep 17 00:00:00 2001 From: Sasha Aickin Date: Wed, 30 Oct 2024 14:29:04 -0400 Subject: [PATCH 3/3] Response to code review. Pulled note out into the "Good to know" section to avoid repetition. --- docs/02-app/02-api-reference/04-functions/use-router.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/02-app/02-api-reference/04-functions/use-router.mdx b/docs/02-app/02-api-reference/04-functions/use-router.mdx index eb4aafc521024..f4a167eca8339 100644 --- a/docs/02-app/02-api-reference/04-functions/use-router.mdx +++ b/docs/02-app/02-api-reference/04-functions/use-router.mdx @@ -41,8 +41,8 @@ export default function Page() { ## `useRouter()` -- `router.push(href: string, { scroll: boolean })`: Perform a client-side navigation to the provided route. Adds a new entry into the [browser’s history](https://developer.mozilla.org/docs/Web/API/History_API) stack. Note that you must not send untrusted or unsanitized URLs to `router.push`, as this can open your site to cross-site scripting (XSS) vulnerabilities. For example, `javascript:` URLs sent to `router.push` will be executed in the context of your page. -- `router.replace(href: string, { scroll: boolean })`: Perform a client-side navigation to the provided route without adding a new entry into the [browser’s history stack](https://developer.mozilla.org/docs/Web/API/History_API). Note that you must not send untrusted or unsanitized URLs to `router.replace`, as this can open your site to cross-site scripting (XSS) vulnerabilities. For example, `javascript:` URLs sent to `router.replace` will be executed in the context of your page. +- `router.push(href: string, { scroll: boolean })`: Perform a client-side navigation to the provided route. Adds a new entry into the [browser’s history](https://developer.mozilla.org/docs/Web/API/History_API) stack. +- `router.replace(href: string, { scroll: boolean })`: Perform a client-side navigation to the provided route without adding a new entry into the [browser’s history stack](https://developer.mozilla.org/docs/Web/API/History_API). - `router.refresh()`: Refresh the current route. Making a new request to the server, re-fetching data requests, and re-rendering Server Components. The client will merge the updated React Server Component payload without losing unaffected client-side React (e.g. `useState`) or browser state (e.g. scroll position). - `router.prefetch(href: string)`: [Prefetch](/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching) the provided route for faster client-side transitions. - `router.back()`: Navigate back to the previous route in the browser’s history stack. @@ -50,6 +50,7 @@ export default function Page() { > **Good to know**: > +> - You must not send untrusted or unsanitized URLs to `router.push` or `router.replace`, as this can open your site to cross-site scripting (XSS) vulnerabilities. For example, `javascript:` URLs sent to `router.push` or `router.replace` will be executed in the context of your page. > - The `` component automatically prefetch routes as they become visible in the viewport. > - `refresh()` could re-produce the same result if fetch requests are cached. Other Dynamic APIs like `cookies` and `headers` could also change the response.