feat(react-router/server-runtime): treat cookie signatures with invalid encodings as invalid (#13847)

Author: rossipedia

.changeset/bright-cougars-buy.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Handle `InvalidCharacterError` when validating cookie signature

packages/react-router/__tests__/server-runtime/cookies-test.ts

@@ -77,6 +77,20 @@ describe("cookies", () => {
     expect(value).toBe(null);
   });
 
+  it("fails to parse signed string values with invalid signature encoding", async () => {
+    let cookie = createCookie("my-cookie", {
+      secrets: ["secret1"],
+    });
+    let setCookie = await cookie.serialize("hello michael");
+    let cookie2 = createCookie("my-cookie", {
+      secrets: ["secret2"],
+    });
+    // use characters that are invalid for base64 encoding
+    let value = await cookie2.parse(getCookieFromSetCookie(setCookie) + "%^&");
+
+    expect(value).toBe(null);
+  });
+
   it("parses/serializes signed object values", async () => {
     let cookie = createCookie("my-cookie", {
       secrets: ["secret1"],

packages/react-router/lib/server-runtime/crypto.ts

@@ -23,10 +23,17 @@ export const unsign = async (
   let data = encoder.encode(value);
 
   let key = await createKey(secret, ["verify"]);
-  let signature = byteStringToUint8Array(atob(hash));
-  let valid = await crypto.subtle.verify("HMAC", key, signature, data);
-
-  return valid ? value : false;
+  try {
+    let signature = byteStringToUint8Array(atob(hash));
+    let valid = await crypto.subtle.verify("HMAC", key, signature, data);
+
+    return valid ? value : false;
+  } catch (error: unknown) {
+    // atob will throw a DOMException with name === 'InvalidCharacterError'
+    // if the signature contains a non-base64 character, which should just
+    // be treated as an invalid signature.
+    return false;
+  }
 };
 
 const createKey = async (