Fix URL related escaping for oauth2 (#37334) (#37340)

Backport #37334 by wxiaoguang

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/js/utils/url.test.ts

@@ -1,8 +1,22 @@
-import {linkifyURLs, pathEscapeSegments, toOriginUrl} from './url.ts';
+import {linkifyURLs, pathEscape, pathEscapeSegments, toOriginUrl, urlQueryEscape} from './url.ts';
 
-test('pathEscapeSegments', () => {
-  expect(pathEscapeSegments('a/b/c')).toEqual('a/b/c');
-  expect(pathEscapeSegments('a/b/ c')).toEqual('a/b/%20c');
+describe('escape', () => {
+  const queryNonAscii = " !\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~";
+  test('urlQueryEscape', () => {
+    const expected = '+%21%22%23%24%25%26%27%28%29%2A%2B%2C-.%2F%3A%3B%3C%3D%3E%3F%40%5B%5C%5D%5E_%60%7B%7C%7D~';
+    expect(urlQueryEscape(queryNonAscii)).toEqual(expected);
+  });
+
+  test('pathEscape', () => {
+    const expected = '%20%21%22%23$%25&%27%28%29%2A+%2C-.%2F:%3B%3C=%3E%3F@%5B%5C%5D%5E_%60%7B%7C%7D~';
+    expect(pathEscape(queryNonAscii)).toEqual(expected);
+  });
+
+  test('pathEscapeSegments', () => {
+    expect(pathEscapeSegments('a/b/c')).toEqual('a/b/c');
+    expect(pathEscapeSegments('a/b/ c')).toEqual('a/b/%20c');
+    expect(pathEscapeSegments('a/b+c')).toEqual('a/b+c');
+  });
 });
 
 test('linkifyURLs', () => {

web_src/js/utils/url.ts

@@ -1,5 +1,33 @@
+export function urlQueryEscape(s: string) {
+  // See "TestQueryEscape" in backend
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent#encoding_for_rfc3986
+  return encodeURIComponent(s).replace(
+    /[!'()*]/g,
+    (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`,
+  ).replaceAll('%20', '+');
+}
+
+export function pathEscape(s: string): string {
+  // See "TestPathEscape" in backend
+  return encodeURIComponent(s).replace(
+    /[!'()*]/g,
+    (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`,
+  ).replaceAll(/%(\w\w)/g, (v) => {
+    switch (v) {
+      case '%24': return '$';
+      case '%26': return '&';
+      case '%2B': return '+';
+      case '%3A': return ':';
+      case '%3D': return '=';
+      case '%40': return '@';
+      default: return v;
+    }
+  });
+}
+
 export function pathEscapeSegments(s: string): string {
-  return s.split('/').map(encodeURIComponent).join('/');
+  // The same as backend's PathEscapeSegments
+  return s.split('/').map(pathEscape).join('/');
 }
 
 // Match HTML tags (to skip) or URLs (to linkify) in HTML content