fix: safe decode malformed URI route params

Author: deepshekhardas

.changeset/safe-route-id-decoding.md

@@ -0,0 +1,7 @@
+---
+"@refinedev/core": patch
+"@refinedev/react-router": patch
+"@refinedev/remix-router": patch
+---
+
+Safely handle malformed URI-encoded route params when parsing route ids and query targets.

packages/core/src/definitions/helpers/handleUseParams/index.tsx

@@ -1,8 +1,16 @@
+const safeDecodeURIComponent = (value: string) => {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+};
+
 export const handleUseParams = (params: any = {}): any => {
   if (params?.id) {
     return {
       ...params,
-      id: decodeURIComponent(params.id),
+      id: safeDecodeURIComponent(params.id),
     };
   }
   return params;

packages/react-router/src/bindings.tsx

@@ -17,6 +17,7 @@ import {
   useParams,
 } from "react-router";
 import { convertToNumberIfPossible } from "./convert-to-number-if-possible";
+import { safeDecodeURIComponent } from "./safe-decode-uri-component";
 
 export const stringifyConfig = {
   addQueryPrefix: true,
@@ -124,7 +125,7 @@ export const routerProvider: RouterProvider = {
       const response: ParseResponse = {
         ...(resource && { resource }),
         ...(action && { action }),
-        ...(params?.id && { id: decodeURIComponent(params.id) }),
+        ...(params?.id && { id: safeDecodeURIComponent(params.id) }),
         // ...(params?.action && { action: params.action }), // lets see if there is a need for this
         pathname,
         params: {
@@ -136,7 +137,7 @@ export const routerProvider: RouterProvider = {
             combinedParams.pageSize as string,
           ) as number | undefined,
           to: combinedParams.to
-            ? decodeURIComponent(combinedParams.to as string)
+            ? safeDecodeURIComponent(combinedParams.to as string)
             : undefined,
         },
       };

packages/react-router/src/safe-decode-uri-component.ts

@@ -0,0 +1,7 @@
+export const safeDecodeURIComponent = (value: string) => {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+};

packages/remix-router/src/bindings.tsx

@@ -11,6 +11,7 @@ import qs from "qs";
 import React, { type ComponentProps, useCallback, useContext } from "react";
 import { paramsFromCurrentPath } from "./params-from-current-path";
 import { convertToNumberIfPossible } from "./convert-to-number-if-possible";
+import { safeDecodeURIComponent } from "./safe-decode-uri-component";
 
 export const stringifyConfig = {
   addQueryPrefix: true,
@@ -116,8 +117,8 @@ export const routerProvider: RouterProvider = {
       const response: ParseResponse = {
         ...(resource && { resource }),
         ...(action && { action }),
-        ...(inferredId && { id: decodeURIComponent(inferredId) }),
-        ...(params?.id && { id: decodeURIComponent(params.id) }),
+        ...(inferredId && { id: safeDecodeURIComponent(inferredId) }),
+        ...(params?.id && { id: safeDecodeURIComponent(params.id) }),
         // ...(params?.action && { action: params.action }), // lets see if there is a need for this
         pathname,
         params: {
@@ -129,7 +130,7 @@ export const routerProvider: RouterProvider = {
             combinedParams.pageSize as string,
           ) as number | undefined,
           to: combinedParams.to
-            ? decodeURIComponent(combinedParams.to as string)
+            ? safeDecodeURIComponent(combinedParams.to as string)
             : undefined,
         },
       };

packages/remix-router/src/safe-decode-uri-component.ts

@@ -0,0 +1,7 @@
+export const safeDecodeURIComponent = (value: string) => {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+};