fix(client): prevent URL corruption when replaceUrlParam contains $ replacement tokens - #5227

Fix: Prevent replaceUrlParam URL corruption on $ replacement tokens in RPC & SSG

Summary

Fixes a bug in replaceUrlParam (src/client/utils.ts) where route parameter values containing $ characters (e.g. $100, item$&, test$\``, test$') trigger JavaScript's string replacement token parser. This corrupts generated URLs in both the Hono RPC Client (hc) and the Static Site Generation (ssg) helper, leading to unexpected 404 Not Found` errors.

Root Cause Analysis

In replaceUrlParam, parameter values were passed directly as a replacement string to String.prototype.replace():

// BEFORE (Buggy)
urlString = urlString.replace(reg, v ? `/${v}` : '')

When the second argument is a raw string, JavaScript evaluates special replacement patterns inside v:

• $&: Inserts the matched parameter token (e.g. :id), expanding /items/:id into /items/item/:id.
• $1 / $2: Inserts capture groups, turning $100 into $00 or 00.
• `$``: Inserts the string segment preceding the match, duplicating leading path segments.
• $': Inserts the string segment following the match, duplicating trailing path segments.

🛠️ Solution

Pass a replacer function () => ... as the second argument to String.prototype.replace(). According to the ECMAScript specification, replacer functions bypass string replacement token parsing and treat the returned value as a literal string.

// AFTER (Fixed)
export const replaceUrlParam = (urlString: string, params: Record<string, string | undefined>) => {
  for (const [k, v] of Object.entries(params)) {
    const reg = new RegExp('/:' + k + '(?:{[^/]+})?\\??(?=/|$)')
    urlString = urlString.replace(reg, () => (v ? `/${v}` : ''))
  }
  return urlString
}

Reproduction / Test Coverage

Added unit tests covering $, $&, $1, $\``, and $'insrc/client/utils.test.ts`:

it('Should replace correctly when parameter value contains $ characters', () => {
  expect(
    replaceUrlParam('http://localhost/items/:id', { id: 'item$&' })
  ).toBe('http://localhost/items/item$&')

  expect(
    replaceUrlParam('http://localhost/items/:id', { id: '$100' })
  ).toBe('http://localhost/items/$100')

  expect(
    replaceUrlParam('http://localhost/users/:id', { id: 'test$`' })
  ).toBe('http://localhost/users/test$`')

  expect(
    replaceUrlParam('http://localhost/users/:id/posts', { id: "test$'" })
  ).toBe("http://localhost/users/test$'/posts")
})

Checklist

• Added unit tests for special $ character replacement handling in src/client/utils.test.ts.
• Verified existing replaceUrlParam unit tests pass, including regex parameters, optional parameters, and prefix matches.
• Ran all test suites cleanly with npm test.