Fix URL related escaping for oauth2 (#37334)

Follow up #37327. See the comments.

* Root problem: the design of OAuth2 providers is a mess, the display
name is used as provider's name and used in the URL directly
* The regressions:
* When trying to fix https://github.com/go-gitea/gitea/issues/36409 , it
introduced inconsistent URL escaping for the "path" part.
* This fix: always use "path escaping" for the path part, add more tests
to cover all escaping cases.

Now, frontend "pathEscape" and "pathEscapeSegments" generate exactly the
same result as backend.

web_src/js/features/admin/common.ts

@@ -2,7 +2,7 @@ import {checkAppUrl} from '../common-page.ts';
 import {hideElem, queryElems, showElem, toggleElem} from '../../utils/dom.ts';
 import {POST} from '../../modules/fetch.ts';
 import {fomanticQuery} from '../../modules/fomantic/base.ts';
-import {urlQueryEscape} from '../../utils.ts';
+import {pathEscape} from '../../utils/url.ts';
 
 const {appSubUrl} = window.config;
 
@@ -232,7 +232,7 @@ function initAdminAuthentication() {
   const elAuthName = document.querySelector<HTMLInputElement>('#auth_name')!;
   const onAuthNameChange = function () {
     // appSubUrl is either empty or is a path that starts with `/` and doesn't have a trailing slash.
-    document.querySelector('#oauth2-callback-url')!.textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${urlQueryEscape(elAuthName.value)}/callback`;
+    document.querySelector('#oauth2-callback-url')!.textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${pathEscape(elAuthName.value)}/callback`;
   };
   elAuthName.addEventListener('input', onAuthNameChange);
   onAuthNameChange();

web_src/js/utils.test.ts

@@ -2,7 +2,6 @@ import {
   dirname, basename, extname, formatBytes, isObject, stripTags, parseIssueHref,
   translateMonth, translateDay, blobToDataURI,
   toAbsoluteUrl, encodeURLEncodedBase64, decodeURLEncodedBase64, isImageFile, isVideoFile, parseRepoOwnerPathInfo,
-  urlQueryEscape,
 } from './utils.ts';
 
 test('dirname', () => {
@@ -34,12 +33,6 @@ test('stripTags', () => {
   expect(stripTags('<a>test</a>')).toEqual('test');
 });
 
-test('urlQueryEscape', () => {
-  const input = "!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~";
-  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(input)).toEqual(expected);
-});
-
 test('parseIssueHref', () => {
   expect(parseIssueHref('/owner/repo/issues/1')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
   expect(parseIssueHref('/owner/repo/pulls/1?query')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'pulls', indexString: '1'});

web_src/js/utils.ts

@@ -51,15 +51,6 @@ export function stripTags(text: string): string {
   return text;
 }
 
-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()}`,
-  );
-}
-
 export function parseIssueHref(href: string): IssuePathInfo {
   // FIXME: it should use pathname and trim the appSubUrl ahead
   const path = (href || '').replace(/[#?].*$/, '');

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