diff --git a/src/frontend/src/components/buttons/AdminButton.tsx b/src/frontend/src/components/buttons/AdminButton.tsx index 27a7977f96..6dbd5f565a 100644 --- a/src/frontend/src/components/buttons/AdminButton.tsx +++ b/src/frontend/src/components/buttons/AdminButton.tsx @@ -63,7 +63,10 @@ export default function AdminButton(props: Readonly) { } // Generate the URL for the admin interface - const url = `${host}/${server.server.django_admin}${modelDef.admin_url}${props.id}/`; + const url = new URL( + `${server.server.django_admin}${modelDef.admin_url}${props.id}/`, + host + ); if (event?.ctrlKey || event?.shiftKey) { // Open the link in a new tab diff --git a/src/frontend/src/components/buttons/PrintingActions.tsx b/src/frontend/src/components/buttons/PrintingActions.tsx index db9dd22f1b..3e633ac5a7 100644 --- a/src/frontend/src/components/buttons/PrintingActions.tsx +++ b/src/frontend/src/components/buttons/PrintingActions.tsx @@ -116,8 +116,8 @@ export function PrintingActions({ if (response.output) { // An output file was generated - const url = `${host}${response.output}`; - window.open(url, '_blank'); + const url = new URL(response.output, host); + window.open(url.toString(), '_blank'); } } }); @@ -154,8 +154,8 @@ export function PrintingActions({ if (response.output) { // An output file was generated - const url = `${host}${response.output}`; - window.open(url, '_blank'); + const url = new URL(response.output, host); + window.open(url.toString(), '_blank'); } } }); diff --git a/src/frontend/src/components/images/ApiImage.tsx b/src/frontend/src/components/images/ApiImage.tsx index 18952360d2..92b50f1578 100644 --- a/src/frontend/src/components/images/ApiImage.tsx +++ b/src/frontend/src/components/images/ApiImage.tsx @@ -19,7 +19,7 @@ export function ApiImage(props: Readonly) { const { host } = useLocalState.getState(); const imageUrl = useMemo(() => { - return `${host}${props.src}`; + return new URL(props.src, host).toString(); }, [host, props.src]); return ( diff --git a/src/frontend/src/components/items/AttachmentLink.tsx b/src/frontend/src/components/items/AttachmentLink.tsx index 8e03c458eb..3103c4f1dc 100644 --- a/src/frontend/src/components/items/AttachmentLink.tsx +++ b/src/frontend/src/components/items/AttachmentLink.tsx @@ -68,7 +68,8 @@ export function AttachmentLink({ return attachment; } - return `${host}${attachment}`; + const u = new URL(attachment, host); + return u.toString(); }, [host, attachment, external]); return ( diff --git a/src/frontend/src/components/modals/AboutInvenTreeModal.tsx b/src/frontend/src/components/modals/AboutInvenTreeModal.tsx index 677b22ad3e..4b0f21d643 100644 --- a/src/frontend/src/components/modals/AboutInvenTreeModal.tsx +++ b/src/frontend/src/components/modals/AboutInvenTreeModal.tsx @@ -137,7 +137,7 @@ export function AboutInvenTreeModal({ { ref: 'api', title: API Version, - link: `${host}api-doc/`, + link: new URL('/api-doc/', host).toString(), copy: true }, { diff --git a/src/frontend/src/components/plugins/PluginSource.tsx b/src/frontend/src/components/plugins/PluginSource.tsx index 71129dc899..33cb3e23d4 100644 --- a/src/frontend/src/components/plugins/PluginSource.tsx +++ b/src/frontend/src/components/plugins/PluginSource.tsx @@ -13,14 +13,11 @@ export async function loadExternalPluginSource(source: string) { return null; } - // If the source is a relative URL, prefix it with the host URL - if (source.startsWith('/')) { - source = `${host}${source}`; - } + const url = new URL(source, host).toString(); - const module = await import(/* @vite-ignore */ source) + const module = await import(/* @vite-ignore */ url) .catch((error) => { - console.error(`ERR: Failed to load plugin from ${source}:`, error); + console.error(`ERR: Failed to load plugin from ${url}:`, error); return null; }) .then((module) => { diff --git a/src/frontend/src/states/IconState.tsx b/src/frontend/src/states/IconState.tsx index 683c4bbdf5..613e83be97 100644 --- a/src/frontend/src/states/IconState.tsx +++ b/src/frontend/src/states/IconState.tsx @@ -44,9 +44,7 @@ export const useIconState = create()((set, get) => ({ const src = Object.entries(pack.fonts as Record) .map( ([format, url]) => - `url(${ - url.startsWith('/') ? host + url : url - }) format("${format}")` + `url(${new URL(url, host).toString()}) format("${format}")` ) .join(',\n'); const font = new FontFace(fontName, `${src};`);