refactor: allow non-http scheme in cors origin (#4269)

* refactor: allow non-http scheme in cors origin

* chore: fix errors and add changeset

.changeset/fast-shirts-switch.md

@@ -0,0 +1,7 @@
+---
+"@logto/console": patch
+"@logto/schemas": patch
+"@logto/core": patch
+---
+
+allow non-http origins for application CORS

packages/console/src/pages/ApplicationDetails/components/Settings.tsx

@@ -15,7 +15,6 @@ import {
 import TextInput from '@/ds-components/TextInput';
 import TextLink from '@/ds-components/TextLink';
 import useDocumentationUrl from '@/hooks/use-documentation-url';
-import { uriOriginValidator } from '@/utils/validator';
 
 import * as styles from '../index.module.scss';
 
@@ -160,14 +159,6 @@ function Settings({ data }: Props) {
           name="customClientMetadata.corsAllowedOrigins"
           control={control}
           defaultValue={[]}
-          rules={{
-            validate: createValidatorForRhf({
-              pattern: {
-                verify: (value) => !value || uriOriginValidator(value),
-                message: t('errors.invalid_origin_format'),
-              },
-            }),
-          }}
           render={({ field: { onChange, value }, fieldState: { error } }) => (
             <MultiTextInputField
               title="application_details.cors_allowed_origins"

packages/console/src/pages/ApplicationDetails/index.tsx

@@ -47,7 +47,7 @@ const mapToUriFormatArrays = (value?: string[]) =>
   value?.filter(Boolean).map((uri) => decodeURIComponent(uri));
 
 const mapToUriOriginFormatArrays = (value?: string[]) =>
-  value?.filter(Boolean).map((uri) => decodeURIComponent(new URL(uri).origin));
+  value?.filter(Boolean).map((uri) => decodeURIComponent(uri.replace(/\/*$/, '')));
 
 function ApplicationDetails() {
   const { id } = useParams();

packages/console/src/utils/validator.ts

@@ -9,14 +9,6 @@ export const uriValidator = (value: string) => {
   return true;
 };
 
-export const uriOriginValidator = (value: string) => {
-  try {
-    return new URL(value).origin === value;
-  } catch {
-    return false;
-  }
-};
-
 export const jsonValidator = (value: string) => {
   try {
     JSON.parse(value);

packages/core/src/routes/application.test.ts

@@ -52,7 +52,12 @@ const { createRequester } = await import('#src/utils/test-utils.js');
 const applicationRoutes = await pickDefault(import('./application.js'));
 
 const customClientMetadata = {
-  corsAllowedOrigins: ['http://localhost:5000', 'http://localhost:5001', 'https://silverhand.com'],
+  corsAllowedOrigins: [
+    'http://localhost:5000',
+    'http://localhost:5001',
+    'https://silverhand.com',
+    'capacitor://localhost',
+  ],
   idTokenTtl: 999_999,
   refreshTokenTtl: 100_000_000,
 };

packages/schemas/src/foundations/jsonb-types.ts

@@ -88,7 +88,7 @@ export enum CustomClientMetadataKey {
 }
 
 export const customClientMetadataGuard = z.object({
-  [CustomClientMetadataKey.CorsAllowedOrigins]: z.string().url().array().optional(),
+  [CustomClientMetadataKey.CorsAllowedOrigins]: z.string().min(1).array().optional(),
   [CustomClientMetadataKey.IdTokenTtl]: z.number().optional(),
   [CustomClientMetadataKey.RefreshTokenTtl]: z.number().optional(),
   [CustomClientMetadataKey.RefreshTokenTtlInDays]: z.number().int().min(1).max(90).optional(),