split url into webUrl and localUrl (like mastodon)stable

64 files changed, 150 insertions, 152 deletions

diff --git a/packages/frontend/src/accounts.ts b/packages/frontend/src/accounts.ts
index 4ee951bbd7..9ce21b9543 100644
--- a/packages/frontend/src/accounts.ts
+++ b/packages/frontend/src/accounts.ts
@@ -5,7 +5,7 @@
 
 import { defineAsyncComponent, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { apiUrl, host } from '@@/js/config.js';
+import { apiUrl, localHost } from '@@/js/config.js';
 import type { MenuItem } from '@/types/menu.js';
 import { showSuspendedDialog } from '@/utility/show-suspended-dialog.js';
 import { i18n } from '@/i18n.js';
@@ -137,7 +137,7 @@ export function updateCurrentAccount(accountData: Misskey.entities.MeDetailed) {
 	for (const [key, value] of Object.entries(accountData)) {
 		$i[key] = value;
 	}
-	store.set('accountInfos', { ...store.s.accountInfos, [host + '/' + $i.id]: $i });
+	store.set('accountInfos', { ...store.s.accountInfos, [localHost + '/' + $i.id]: $i });
 	$i.token = token;
 	miLocalStorage.setItem('account', JSON.stringify($i));
 }
@@ -148,7 +148,7 @@ export function updateCurrentAccountPartial(accountData: Partial<Misskey.entitie
 		$i[key] = value;
 	}
 
-	store.set('accountInfos', { ...store.s.accountInfos, [host + '/' + $i.id]: $i });
+	store.set('accountInfos', { ...store.s.accountInfos, [localHost + '/' + $i.id]: $i });
 
 	miLocalStorage.setItem('account', JSON.stringify($i));
 }
@@ -157,7 +157,7 @@ export async function refreshCurrentAccount() {
 	if (!$i) return;
 	return fetchAccount($i.token, $i.id).then(updateCurrentAccount).catch(reason => {
 		if (reason === isAccountDeleted) {
-			removeAccount(host, $i.id);
+			removeAccount(localHost, $i.id);
 			if (Object.keys(store.s.accountTokens).length > 0) {
 				login(Object.values(store.s.accountTokens)[0]);
 			} else {
@@ -186,7 +186,7 @@ export async function login(token: AccountWithToken['token'], redirect?: string)
 		token,
 	}));
 
-	await addAccount(host, me, token);
+	await addAccount(localHost, me, token);
 
 	if (redirect) {
 		// 他のタブは再読み込みするだけ
@@ -272,7 +272,7 @@ export async function openAccountMenu(opts: {
 		});
 
 		if (opts.includeCurrentAccount) {
-			menuItems.push(createItem(host, $i.id, $i.username, $i, $i.token));
+			menuItems.push(createItem(localHost, $i.id, $i.username, $i, $i.token));
 		}
 
 		menuItems.push(...accountItems);
@@ -295,7 +295,7 @@ export async function openAccountMenu(opts: {
 				action: () => {
 					getAccountWithSignupDialog().then(res => {
 						if (res != null) {
-							switchAccount(host, res.id);
+							switchAccount(localHost, res.id);
 						}
 					});
 				},
@@ -313,7 +313,7 @@ export async function openAccountMenu(opts: {
 		});
 	} else {
 		if (opts.includeCurrentAccount) {
-			menuItems.push(createItem(host, $i.id, $i.username, $i, $i.token));
+			menuItems.push(createItem(localHost, $i.id, $i.username, $i, $i.token));
 		}
 
 		menuItems.push(...accountItems);
@@ -329,7 +329,7 @@ export function getAccountWithSigninDialog(): Promise<{ id: string, token: strin
 		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, {
 			done: async (res: Misskey.entities.SigninFlowResponse & { finished: true }) => {
 				const user = await fetchAccount(res.i, res.id, true);
-				await addAccount(host, user, res.i);
+				await addAccount(localHost, user, res.i);
 				resolve({ id: res.id, token: res.i });
 			},
 			cancelled: () => {
@@ -348,7 +348,7 @@ export function getAccountWithSignupDialog(): Promise<{ id: string, token: strin
 			done: async (res: Misskey.entities.SignupResponse) => {
 				const user = JSON.parse(JSON.stringify(res));
 				delete user.token;
-				await addAccount(host, user, res.token);
+				await addAccount(localHost, user, res.token);
 				resolve({ id: res.id, token: res.token });
 			},
 			cancelled: () => {
diff --git a/packages/frontend/src/aiscript/api.ts b/packages/frontend/src/aiscript/api.ts
index 08ba89dd9d..444a770ba5 100644
--- a/packages/frontend/src/aiscript/api.ts
+++ b/packages/frontend/src/aiscript/api.ts
@@ -5,7 +5,7 @@
 
 import { errors, utils, values } from '@syuilo/aiscript';
 import * as Misskey from 'misskey-js';
-import { url, lang } from '@@/js/config.js';
+import { webUrl, lang } from '@@/js/config.js';
 import { assertStringAndIsIn } from './common.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -39,7 +39,7 @@ export function createAiScriptEnv(opts: { storageKey: string, token?: string })
 		USER_USERNAME: $i ? values.STR($i.username) : values.NULL,
 		CUSTOM_EMOJIS: utils.jsToVal(customEmojis.value),
 		LOCALE: values.STR(lang),
-		SERVER_URL: values.STR(url),
+		SERVER_URL: values.STR(webUrl),
 		'Mk:dialog': values.FN_NATIVE(async ([title, text, type]) => {
 			utils.assertString(title);
 			utils.assertString(text);
diff --git a/packages/frontend/src/components/MkAccountMoved.vue b/packages/frontend/src/components/MkAccountMoved.vue
index cb8032c019..e101c04793 100644
--- a/packages/frontend/src/components/MkAccountMoved.vue
+++ b/packages/frontend/src/components/MkAccountMoved.vue
@@ -16,7 +16,7 @@ import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkMention from './MkMention.vue';
 import { i18n } from '@/i18n.js';
-import { host as localHost } from '@@/js/config.js';
+import { localHost } from '@@/js/config.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 
 const user = ref<Misskey.entities.UserLite>();
diff --git a/packages/frontend/src/components/MkDonation.vue b/packages/frontend/src/components/MkDonation.vue
index dfdfc0a871..be0a737b60 100644
--- a/packages/frontend/src/components/MkDonation.vue
+++ b/packages/frontend/src/components/MkDonation.vue
@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="$style.text">
 			<I18n :src="i18n.ts.pleaseDonate" tag="span">
 				<template #host>
-					{{ instance.name ?? host }}
+					{{ instance.name ?? webHost }}
 				</template>
 			</I18n>
 			<div style="margin-top: 0.2em;">
@@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-if="instance.donationUrl" :class="$style.text">
 			<I18n :src="i18n.ts.pleaseDonateInstance" tag="span">
 				<template #host>
-					{{ instance.name ?? host }}
+					{{ instance.name ?? webHost }}
 				</template>
 			</I18n>
 			<div style="margin-top: 0.2em;">
@@ -48,7 +48,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import MkButton from '@/components/MkButton.vue';
 import MkLink from '@/components/MkLink.vue';
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { miLocalStorage } from '@/local-storage.js';
diff --git a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
index d18fe0ed0c..fdd129ef7d 100644
--- a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
+++ b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
@@ -90,7 +90,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script setup lang="ts">
 import { useTemplateRef, ref, computed, nextTick, onMounted, onDeactivated, onUnmounted } from 'vue';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { embedRouteWithScrollbar } from '@@/js/embed-page.js';
 import type { EmbeddableEntity, EmbedParams } from '@@/js/embed-page.js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
@@ -155,7 +155,7 @@ const embedPreviewUrl = computed(() => {
 		const maxHeight = parseInt(paramClass.get('maxHeight')!);
 		paramClass.set('maxHeight', maxHeight === 0 ? '500' : Math.min(maxHeight, 700).toString()); // プレビューであまりにも縮小されると見づらいため、700pxまでに制限
 	}
-	return `${url}/embed/${props.entity}/${props.id}${paramClass.toString() ? '?' + paramClass.toString() : ''}`;
+	return `${webUrl}/embed/${props.entity}/${props.id}${paramClass.toString() ? '?' + paramClass.toString() : ''}`;
 });
 
 const isEmbedWithScrollbar = computed(() => embedRouteWithScrollbar.includes(props.entity));
diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue
index 1d86af39e5..cf655ab03e 100644
--- a/packages/frontend/src/components/MkFollowButton.vue
+++ b/packages/frontend/src/components/MkFollowButton.vue
@@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import * as Misskey from 'misskey-js';
-import { host } from '@@/js/config.js';
+import { localHost } from '@@/js/config.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { useStream } from '@/stream.js';
@@ -86,7 +86,7 @@ function onFollowChange(user: Misskey.entities.UserDetailed) {
 }
 
 async function onClick() {
-	pleaseLogin({ openOnRemote: { type: 'web', path: `/@${props.user.username}@${props.user.host ?? host}` } });
+	pleaseLogin({ openOnRemote: { type: 'web', path: `/@${props.user.username}@${props.user.host ?? localHost}` } });
 
 	wait.value = true;
 
diff --git a/packages/frontend/src/components/MkLink.vue b/packages/frontend/src/components/MkLink.vue
index 3a942b03dc..38ba05dfeb 100644
--- a/packages/frontend/src/components/MkLink.vue
+++ b/packages/frontend/src/components/MkLink.vue
@@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { defineAsyncComponent, ref } from 'vue';
-import { url as local } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { useTooltip } from '@/use/use-tooltip.js';
 import * as os from '@/os.js';
 import { isEnabledUrlPreview } from '@/instance.js';
@@ -33,7 +33,7 @@ const props = withDefaults(defineProps<{
 }>(), {
 });
 
-const maybeRelativeUrl = maybeMakeRelative(props.url, local);
+const maybeRelativeUrl = maybeMakeRelative(props.url, webUrl);
 const self = maybeRelativeUrl !== props.url;
 const attr = self ? 'to' : 'href';
 const target = self ? null : '_blank';
diff --git a/packages/frontend/src/components/MkMention.vue b/packages/frontend/src/components/MkMention.vue
index de8f39e7a8..0832c9e139 100644
--- a/packages/frontend/src/components/MkMention.vue
+++ b/packages/frontend/src/components/MkMention.vue
@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { toUnicode } from 'punycode.js';
 import { computed } from 'vue';
-import { host as localHost } from '@@/js/config.js';
+import { localHost } from '@@/js/config.js';
 import type { MkABehavior } from '@/components/global/MkA.vue';
 import { $i } from '@/i.js';
 import { getStaticImageUrl } from '@/utility/media-proxy.js';
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 56bfa5de94..9524cbaa4d 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -330,7 +330,7 @@ const allowAnim = ref(prefer.s.advancedMfm && prefer.s.animatedMfm);
 
 const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
 	type: 'lookup',
-	url: appearNote.value.url ?? appearNote.value.uri ?? `${config.url}/notes/${appearNote.value.id}`,
+	url: appearNote.value.url ?? appearNote.value.uri ?? `${config.webUrl}/notes/${appearNote.value.id}`,
 }));
 
 const mergedCW = computed(() => computeMergedCw(appearNote.value));
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 7f38b9ec02..4974799fdc 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -374,7 +374,7 @@ let renoting = false;
 
 const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
 	type: 'lookup',
-	url: appearNote.value.url ?? appearNote.value.uri ?? `${config.url}/notes/${appearNote.value.id}`,
+	url: appearNote.value.url ?? appearNote.value.uri ?? `${config.webUrl}/notes/${appearNote.value.id}`,
 }));
 
 const keymap = {
diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue
index 58de5bd5a7..36fd6d3ec0 100644
--- a/packages/frontend/src/components/MkNoteSub.vue
+++ b/packages/frontend/src/components/MkNoteSub.vue
@@ -154,7 +154,7 @@ const mergedCW = computed(() => computeMergedCw(appearNote.value));
 
 const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
 	type: 'lookup',
-	url: appearNote.value.url ?? appearNote.value.uri ?? `${config.url}/notes/${appearNote.value.id}`,
+	url: appearNote.value.url ?? appearNote.value.uri ?? `${config.webUrl}/notes/${appearNote.value.id}`,
 }));
 
 const currentClip = inject<Ref<Misskey.entities.Clip> | null>('currentClip', null);
diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue
index 44112775dc..7d475b5a96 100644
--- a/packages/frontend/src/components/MkPageWindow.vue
+++ b/packages/frontend/src/components/MkPageWindow.vue
@@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, provide, ref, useTemplateRef } from 'vue';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import type { PageMetadata } from '@/page.js';
 import MkUserName from './global/MkUserName.vue';
 import RouterView from '@/components/global/RouterView.vue';
@@ -135,14 +135,14 @@ const contextmenu = computed(() => ([{
 	icon: 'ti ti-external-link',
 	text: i18n.ts.openInNewTab,
 	action: () => {
-		window.open(url + windowRouter.getCurrentFullPath(), '_blank', 'noopener');
+		window.open(webUrl + windowRouter.getCurrentFullPath(), '_blank', 'noopener');
 		windowEl.value?.close();
 	},
 }, {
 	icon: 'ti ti-link',
 	text: i18n.ts.copyLink,
 	action: () => {
-		copyToClipboard(url + windowRouter.getCurrentFullPath());
+		copyToClipboard(webUrl + windowRouter.getCurrentFullPath());
 	},
 }]));
 
diff --git a/packages/frontend/src/components/MkPoll.vue b/packages/frontend/src/components/MkPoll.vue
index 72f3ced088..ecafb66c52 100644
--- a/packages/frontend/src/components/MkPoll.vue
+++ b/packages/frontend/src/components/MkPoll.vue
@@ -72,7 +72,7 @@ const showResult = ref(props.readOnly || isVoted.value);
 
 const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
 	type: 'lookup',
-	url: `${config.url}/notes/${props.noteId}`,
+	url: `${config.webUrl}/notes/${props.noteId}`,
 }));
 
 // 期限付きアンケート
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index a650365a28..ca4855a084 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -111,7 +111,7 @@ import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import { toASCII } from 'punycode.js';
-import { host, url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { appendContentWarning } from '@@/js/append-content-warning.js';
 import type { ShallowRef } from 'vue';
 import type { MenuItem } from '@/types/menu.js';
@@ -715,7 +715,7 @@ async function onPaste(ev: ClipboardEvent) {
 
 	const paste = ev.clipboardData.getData('text');
 
-	if (!renoteTargetNote.value && !quoteId.value && paste.startsWith(url + '/notes/') && !$i.rejectQuotes) {
+	if (!renoteTargetNote.value && !quoteId.value && paste.startsWith(webUrl + '/notes/') && !$i.rejectQuotes) {
 		ev.preventDefault();
 
 		os.confirm({
@@ -727,7 +727,7 @@ async function onPaste(ev: ClipboardEvent) {
 				return;
 			}
 
-			quoteId.value = paste.substring(url.length).match(/^\/notes\/(.+?)\/?$/)?.[1] ?? null;
+			quoteId.value = paste.substring(webUrl.length).match(/^\/notes\/(.+?)\/?$/)?.[1] ?? null;
 		});
 	}
 
@@ -1023,7 +1023,7 @@ async function post(ev?: MouseEvent) {
 				'https://open.spotify.com/track/7anfcaNPQWlWCwyCHmZqNy',
 				'https://open.spotify.com/track/5Odr16TvEN4my22K9nbH7l',
 				'https://open.spotify.com/album/5bOlxyl4igOrp2DwVQxBco',
-			].some(url => text.includes(url))) {
+			].some(webUrl => text.includes(webUrl))) {
 				claimAchievement('brainDiver');
 			}
 
diff --git a/packages/frontend/src/components/MkPreview.vue b/packages/frontend/src/components/MkPreview.vue
index d8dfbd1655..a400bd9825 100644
--- a/packages/frontend/src/components/MkPreview.vue
+++ b/packages/frontend/src/components/MkPreview.vue
@@ -48,7 +48,7 @@ import { $i } from '@/i.js';
 const text = ref('');
 const flag = ref(true);
 const radio = ref('misskey');
-const mfm = ref(`Hello world! This is an @example mention. BTW you are @${$i ? $i.username : 'guest'}.\nAlso, here is ${config.url} and [example link](${config.url}). for more details, see https://example.com.\nAs you know #misskey is open-source software.`);
+const mfm = ref(`Hello world! This is an @example mention. BTW you are @${$i ? $i.username : 'guest'}.\nAlso, here is ${config.webUrl} and [example link](${config.webUrl}). for more details, see https://example.com.\nAs you know #misskey is open-source software.`);
 
 const openDialog = async () => {
 	await os.alert({
diff --git a/packages/frontend/src/components/MkSignin.input.vue b/packages/frontend/src/components/MkSignin.input.vue
index aacd1eae2a..b6563d93f8 100644
--- a/packages/frontend/src/components/MkSignin.input.vue
+++ b/packages/frontend/src/components/MkSignin.input.vue
@@ -57,7 +57,7 @@ import { ref } from 'vue';
 import { toUnicode } from 'punycode.js';
 
 import { query, extractDomain } from '@@/js/url.js';
-import { host as configHost } from '@@/js/config.js';
+import { localHost as configHost } from '@@/js/config.js';
 import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
diff --git a/packages/frontend/src/components/MkSignupDialog.form.vue b/packages/frontend/src/components/MkSignupDialog.form.vue
index 003c68309d..3f327b86d8 100644
--- a/packages/frontend/src/components/MkSignupDialog.form.vue
+++ b/packages/frontend/src/components/MkSignupDialog.form.vue
@@ -110,7 +110,7 @@ const emit = defineEmits<{
 	(ev: 'approvalPending'): void;
 }>();
 
-const host = toUnicode(config.host);
+const host = toUnicode(config.webHost);
 
 const hcaptcha = ref<Captcha | undefined>();
 const mcaptcha = ref<Captcha | undefined>();
diff --git a/packages/frontend/src/components/MkSourceCodeAvailablePopup.vue b/packages/frontend/src/components/MkSourceCodeAvailablePopup.vue
index 84dc244b23..a8421f1f64 100644
--- a/packages/frontend/src/components/MkSourceCodeAvailablePopup.vue
+++ b/packages/frontend/src/components/MkSourceCodeAvailablePopup.vue
@@ -15,14 +15,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="$style.title">
 			<I18n :src="i18n.ts.aboutX" tag="span">
 				<template #x>
-					{{ instance.name ?? host }}
+					{{ instance.name ?? webHost }}
 				</template>
 			</I18n>
 		</div>
 		<div :class="$style.text">
 			<I18n :src="i18n.ts._aboutMisskey.thisIsModifiedVersion" tag="span">
 				<template #name>
-					{{ instance.name ?? host }}
+					{{ instance.name ?? webHost }}
 				</template>
 			</I18n>
 			<I18n :src="i18n.ts.correspondingSourceIsAvailable" tag="span">
@@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import MkButton from '@/components/MkButton.vue';
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import { miLocalStorage } from '@/local-storage.js';
diff --git a/packages/frontend/src/components/MkTutorialDialog.vue b/packages/frontend/src/components/MkTutorialDialog.vue
index d6abbf6504..99aa04091c 100644
--- a/packages/frontend/src/components/MkTutorialDialog.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.vue
@@ -133,7 +133,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 									<a href="https://misskey-hub.net/docs/for-users/" target="_blank" class="_link">{{ i18n.ts.help }}</a>
 								</template>
 							</I18n>
-							<div>{{ i18n.tsx._initialAccountSetting.haveFun({ name: instance.name ?? host }) }}</div>
+							<div>{{ i18n.tsx._initialAccountSetting.haveFun({ name: instance.name ?? webHost }) }}</div>
 							<div class="_buttonsCenter" style="margin-top: 16px;">
 								<MkButton v-if="initialPage !== 4" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
 								<MkButton rounded primary gradate @click="close(false)">{{ i18n.ts.close }}</MkButton>
@@ -149,7 +149,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref, useTemplateRef, watch } from 'vue';
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkButton from '@/components/MkButton.vue';
 import XNote from '@/components/MkTutorialDialog.Note.vue';
diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index 5d0e6e3df7..d300a96ce3 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -113,7 +113,7 @@ export type SummalyResult = Awaited<ReturnType<typeof summaly>> & {
 
 <script lang="ts" setup>
 import { defineAsyncComponent, onDeactivated, onUnmounted, ref } from 'vue';
-import { url as local } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { versatileLang } from '@@/js/intl-const.js';
 import * as Misskey from 'misskey-js';
 import { maybeMakeRelative } from '@@/js/url.js';
@@ -155,7 +155,7 @@ const MOBILE_THRESHOLD = 500;
 const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
 
 const hidePreview = ref<boolean>(false);
-const maybeRelativeUrl = maybeMakeRelative(props.url, local);
+const maybeRelativeUrl = maybeMakeRelative(props.url, webUrl);
 const self = maybeRelativeUrl !== props.url;
 const attr = self ? 'to' : 'href';
 const target = self ? null : '_blank';
diff --git a/packages/frontend/src/components/MkUserSelectDialog.vue b/packages/frontend/src/components/MkUserSelectDialog.vue
index 34ed1f8fc2..d2322eb90a 100644
--- a/packages/frontend/src/components/MkUserSelectDialog.vue
+++ b/packages/frontend/src/components/MkUserSelectDialog.vue
@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #label>{{ i18n.ts.username }}</template>
 					<template #prefix>@</template>
 				</MkInput>
-				<MkInput v-model="host" :datalist="[hostname]" debounce @update:modelValue="search">
+				<MkInput v-model="host" :datalist="[localHostname]" debounce @update:modelValue="search">
 					<template #label>{{ i18n.ts.host }}</template>
 					<template #prefix>@</template>
 				</MkInput>
@@ -63,7 +63,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onMounted, ref, computed, useTemplateRef } from 'vue';
 import * as Misskey from 'misskey-js';
-import { host as currentHost, hostname } from '@@/js/config.js';
+import { localHostname } from '@@/js/config.js';
 import MkInput from '@/components/MkInput.vue';
 import FormSplit from '@/components/form/split.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
diff --git a/packages/frontend/src/components/MkUserSetupDialog.vue b/packages/frontend/src/components/MkUserSetupDialog.vue
index 82214ed5a5..f5e04de567 100644
--- a/packages/frontend/src/components/MkUserSetupDialog.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.vue
@@ -93,7 +93,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<div class="_gaps" style="text-align: center;">
 							<i class="ti ti-bell-ringing-2" style="display: block; margin: auto; font-size: 3em; color: var(--MI_THEME-accent);"></i>
 							<div style="font-size: 120%;">{{ i18n.ts.pushNotification }}</div>
-							<div style="padding: 0 16px;">{{ i18n.tsx._initialAccountSetting.pushNotificationDescription({ name: instance.name ?? host }) }}</div>
+							<div style="padding: 0 16px;">{{ i18n.tsx._initialAccountSetting.pushNotificationDescription({ name: instance.name ?? webHost }) }}</div>
 							<MkPushNotificationAllowButton primary showOnlyToRegister style="margin: 0 auto;"/>
 							<div class="_buttonsCenter" style="margin-top: 16px;">
 								<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
@@ -110,7 +110,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<div class="_gaps" style="text-align: center;">
 							<i class="ti ti-check" style="display: block; margin: auto; font-size: 3em; color: var(--MI_THEME-accent);"></i>
 							<div style="font-size: 120%;">{{ i18n.ts._initialAccountSetting.initialAccountSettingCompleted }}</div>
-							<div>{{ i18n.tsx._initialAccountSetting.youCanContinueTutorial({ name: instance.name ?? host }) }}</div>
+							<div>{{ i18n.tsx._initialAccountSetting.youCanContinueTutorial({ name: instance.name ?? webHost }) }}</div>
 							<div class="_buttonsCenter" style="margin-top: 16px;">
 								<MkButton rounded primary gradate data-cy-user-setup-continue @click="launchTutorial()">{{ i18n.ts._initialAccountSetting.startTutorial }} <i class="ti ti-arrow-right"></i></MkButton>
 							</div>
@@ -129,7 +129,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref, useTemplateRef, watch, nextTick, defineAsyncComponent } from 'vue';
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkButton from '@/components/MkButton.vue';
 import XProfile from '@/components/MkUserSetupDialog.Profile.vue';
diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue
index 4d6d080ddf..b6e311aad9 100644
--- a/packages/frontend/src/components/SkNote.vue
+++ b/packages/frontend/src/components/SkNote.vue
@@ -329,7 +329,7 @@ const allowAnim = ref(prefer.s.advancedMfm && prefer.s.animatedMfm);
 
 const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
 	type: 'lookup',
-	url: appearNote.value.url ?? appearNote.value.uri ?? `${config.url}/notes/${appearNote.value.id}`,
+	url: appearNote.value.url ?? appearNote.value.uri ?? `${config.webUrl}/notes/${appearNote.value.id}`,
 }));
 
 const mergedCW = computed(() => computeMergedCw(appearNote.value));
diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue
index f761029cfb..a023160432 100644
--- a/packages/frontend/src/components/SkNoteDetailed.vue
+++ b/packages/frontend/src/components/SkNoteDetailed.vue
@@ -379,7 +379,7 @@ let renoting = false;
 
 const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
 	type: 'lookup',
-	url: appearNote.value.url ?? appearNote.value.uri ?? `${config.url}/notes/${appearNote.value.id}`,
+	url: appearNote.value.url ?? appearNote.value.uri ?? `${config.webUrl}/notes/${appearNote.value.id}`,
 }));
 
 const keymap = {
diff --git a/packages/frontend/src/components/SkNoteSub.vue b/packages/frontend/src/components/SkNoteSub.vue
index 4e8a3147ad..82b604cc60 100644
--- a/packages/frontend/src/components/SkNoteSub.vue
+++ b/packages/frontend/src/components/SkNoteSub.vue
@@ -168,7 +168,7 @@ const mergedCW = computed(() => computeMergedCw(appearNote.value));
 
 const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
 	type: 'lookup',
-	url: appearNote.value.url ?? appearNote.value.uri ?? `${config.url}/notes/${appearNote.value.id}`,
+	url: appearNote.value.url ?? appearNote.value.uri ?? `${config.webUrl}/notes/${appearNote.value.id}`,
 }));
 
 const currentClip = inject<Ref<Misskey.entities.Clip> | null>('currentClip', null);
diff --git a/packages/frontend/src/components/global/MkA.vue b/packages/frontend/src/components/global/MkA.vue
index 9a51acc9dc..c972c87cce 100644
--- a/packages/frontend/src/components/global/MkA.vue
+++ b/packages/frontend/src/components/global/MkA.vue
@@ -15,7 +15,7 @@ export type MkABehavior = 'window' | 'browser' | null;
 
 <script lang="ts" setup>
 import { computed, inject, useTemplateRef } from 'vue';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import * as os from '@/os.js';
 import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
 import { i18n } from '@/i18n.js';
@@ -76,7 +76,7 @@ function onContextmenu(ev) {
 		icon: 'ti ti-link',
 		text: i18n.ts.copyLink,
 		action: () => {
-			copyToClipboard(`${url}${props.to}`);
+			copyToClipboard(`${webUrl}${props.to}`);
 		},
 	}], ev);
 }
diff --git a/packages/frontend/src/components/global/MkAcct.vue b/packages/frontend/src/components/global/MkAcct.vue
index ff794d9b6e..ea6ec10442 100644
--- a/packages/frontend/src/components/global/MkAcct.vue
+++ b/packages/frontend/src/components/global/MkAcct.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
 import { toUnicode } from 'punycode.js';
-import { host as hostRaw } from '@@/js/config.js';
+import { localHost as hostRaw } from '@@/js/config.js';
 
 defineProps<{
 	user: Misskey.entities.UserLite;
diff --git a/packages/frontend/src/components/global/MkAd.vue b/packages/frontend/src/components/global/MkAd.vue
index 525c47da45..eecccd40bc 100644
--- a/packages/frontend/src/components/global/MkAd.vue
+++ b/packages/frontend/src/components/global/MkAd.vue
@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</component>
 	</div>
 	<div v-else :class="$style.menu">
-		<div>Ads by {{ host }}</div>
+		<div>Ads by {{ webHost }}</div>
 		<!--<MkButton class="button" primary>{{ i18n.ts._ad.like }}</MkButton>-->
 		<MkButton v-if="chosen.ratio !== 0" :class="$style.menuButton" @click="reduceFrequency">{{ i18n.ts._ad.reduceFrequencyOfThisAd }}</MkButton>
 		<button class="_textButton" @click="toggleMenu">{{ i18n.ts._ad.back }}</button>
@@ -40,7 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
-import { url as local, host } from '@@/js/config.js';
+import { webUrl as local, webHost } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import MkButton from '@/components/MkButton.vue';
diff --git a/packages/frontend/src/components/global/MkMfm.ts b/packages/frontend/src/components/global/MkMfm.ts
index 9f92c43b68..72ff1722e4 100644
--- a/packages/frontend/src/components/global/MkMfm.ts
+++ b/packages/frontend/src/components/global/MkMfm.ts
@@ -6,7 +6,7 @@
 import { h, defineAsyncComponent } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
-import { host } from '@@/js/config.js';
+import { localHost } from '@@/js/config.js';
 import CkFollowMouse from '../CkFollowMouse.vue';
 import type { VNode, SetupContext } from 'vue';
 import type { MkABehavior } from '@/components/global/MkA.vue';
@@ -432,7 +432,7 @@ export default function MkMfm(props: MfmProps, { emit }: { emit: SetupContext<Mf
 			case 'mention': {
 				return [h('bdi', h(MkMention, {
 					key: Math.random(),
-					host: (token.props.host == null && props.author && props.author.host != null ? props.author.host : token.props.host) ?? host,
+					host: (token.props.host == null && props.author && props.author.host != null ? props.author.host : token.props.host) ?? localHost,
 					username: token.props.username,
 					navigationBehavior: props.linkNavigationBehavior,
 				}))];
diff --git a/packages/frontend/src/components/global/MkUrl.vue b/packages/frontend/src/components/global/MkUrl.vue
index 058f03aeac..2f84e305ee 100644
--- a/packages/frontend/src/components/global/MkUrl.vue
+++ b/packages/frontend/src/components/global/MkUrl.vue
@@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { defineAsyncComponent, ref } from 'vue';
 import { toUnicode as decodePunycode } from 'punycode.js';
-import { url as local } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import * as os from '@/os.js';
 import { useTooltip } from '@/use/use-tooltip.js';
 import { isEnabledUrlPreview } from '@/instance.js';
@@ -54,7 +54,7 @@ const props = withDefaults(defineProps<{
 	showUrlPreview: true,
 });
 
-const maybeRelativeUrl = maybeMakeRelative(props.url, local);
+const maybeRelativeUrl = maybeMakeRelative(props.url, webUrl);
 const self = maybeRelativeUrl !== props.url;
 const url = new URL(props.url);
 if (!['http:', 'https:'].includes(url.protocol)) throw new Error('invalid url');
diff --git a/packages/frontend/src/filters/user.ts b/packages/frontend/src/filters/user.ts
index d9bc316764..a69a27deb6 100644
--- a/packages/frontend/src/filters/user.ts
+++ b/packages/frontend/src/filters/user.ts
@@ -4,7 +4,7 @@
  */
 
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 
 export const acct = (user: Misskey.Acct) => {
 	return Misskey.acct.toString(user);
@@ -15,5 +15,5 @@ export const userName = (user: Misskey.entities.User) => {
 };
 
 export const userPage = (user: Misskey.Acct, path?: string, absolute = false) => {
-	return `${absolute ? url : ''}/@${acct(user)}${(path ? `/${path}` : '')}`;
+	return `${absolute ? webUrl : ''}/@${acct(user)}${(path ? `/${path}` : '')}`;
 };
diff --git a/packages/frontend/src/pages/about.overview.vue b/packages/frontend/src/pages/about.overview.vue
index 241ee3c388..e587e8f93d 100644
--- a/packages/frontend/src/pages/about.overview.vue
+++ b/packages/frontend/src/pages/about.overview.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div style="overflow: clip;">
 			<img :src="instance.sidebarLogoUrl ?? instance.iconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
 			<div :class="$style.bannerName">
-				<b>{{ instance.name ?? host }}</b>
+				<b>{{ instance.name ?? webHost }}</b>
 			</div>
 		</div>
 	</div>
@@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #key>Sharkey</template>
 				<template #value>{{ version }}</template>
 			</MkKeyValue>
-			<div v-html="i18n.tsx.poweredByMisskeyDescription({ name: instance.name ?? host })">
+			<div v-html="i18n.tsx.poweredByMisskeyDescription({ name: instance.name ?? webHost })">
 			</div>
 			<FormLink to="/about-sharkey">
 				<template #icon><i class="ti ti-info-circle"></i></template>
@@ -148,7 +148,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { host, version } from '@@/js/config.js';
+import { webHost, version } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import number from '@/filters/number.js';
diff --git a/packages/frontend/src/pages/admin-user.vue b/packages/frontend/src/pages/admin-user.vue
index dc29ae2f80..9ca6fbef34 100644
--- a/packages/frontend/src/pages/admin-user.vue
+++ b/packages/frontend/src/pages/admin-user.vue
@@ -279,7 +279,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
 import type { Badge } from '@/components/SkBadgeStrip.vue';
 import type { ChartSrc } from '@/components/MkChart.vue';
 import MkChart from '@/components/MkChart.vue';
diff --git a/packages/frontend/src/pages/admin/branding.vue b/packages/frontend/src/pages/admin/branding.vue
index 64faf49848..5427350e1a 100644
--- a/packages/frontend/src/pages/admin/branding.vue
+++ b/packages/frontend/src/pages/admin/branding.vue
@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #prefix><i class="ti ti-link"></i></template>
 					<template #label>{{ i18n.ts._serverSettings.iconUrl }} (App/192px)</template>
 					<template #caption>
-						<div>{{ i18n.tsx._serverSettings.appIconDescription({ host: instance.name ?? host }) }}</div>
+						<div>{{ i18n.tsx._serverSettings.appIconDescription({ host: instance.name ?? webHost }) }}</div>
 						<div>({{ i18n.ts._serverSettings.appIconUsageExample }})</div>
 						<div>{{ i18n.ts._serverSettings.appIconStyleRecommendation }}</div>
 						<div><strong>{{ i18n.tsx._serverSettings.appIconResolutionMustBe({ resolution: '192x192px' }) }}</strong></div>
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #prefix><i class="ti ti-link"></i></template>
 					<template #label>{{ i18n.ts._serverSettings.iconUrl }} (App/512px)</template>
 					<template #caption>
-						<div>{{ i18n.tsx._serverSettings.appIconDescription({ host: instance.name ?? host }) }}</div>
+						<div>{{ i18n.tsx._serverSettings.appIconDescription({ host: instance.name ?? webHost }) }}</div>
 						<div>({{ i18n.ts._serverSettings.appIconUsageExample }})</div>
 						<div>{{ i18n.ts._serverSettings.appIconStyleRecommendation }}</div>
 						<div><strong>{{ i18n.tsx._serverSettings.appIconResolutionMustBe({ resolution: '512x512px' }) }}</strong></div>
@@ -119,7 +119,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
 import JSON5 from 'json5';
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import FromSlot from '@/components/form/slot.vue';
diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
index 56d037758f..f56c127eb1 100644
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@@ -74,7 +74,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import type { PageHeaderItem } from '@/types/page-header.js';
 import MkPostForm from '@/components/MkPostForm.vue';
 import MkTimeline from '@/components/MkTimeline.vue';
@@ -238,7 +238,7 @@ const headerActions = computed(() => {
 					console.warn('failed to copy channel URL. channel.value is null.');
 					return;
 				}
-				copyToClipboard(`${url}/channels/${channel.value.id}`);
+				copyToClipboard(`${webUrl}/channels/${channel.value.id}`);
 			},
 		});
 
@@ -255,7 +255,7 @@ const headerActions = computed(() => {
 					navigator.share({
 						title: channel.value.name,
 						text: channel.value.description ?? undefined,
-						url: `${url}/channels/${channel.value.id}`,
+						url: `${webUrl}/channels/${channel.value.id}`,
 					});
 				},
 			});
diff --git a/packages/frontend/src/pages/chat/XMessage.vue b/packages/frontend/src/pages/chat/XMessage.vue
index b72583214b..6e643b5110 100644
--- a/packages/frontend/src/pages/chat/XMessage.vue
+++ b/packages/frontend/src/pages/chat/XMessage.vue
@@ -55,7 +55,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, defineAsyncComponent, provide } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { isLink } from '@@/js/is-link.js';
 import type { MenuItem } from '@/types/menu.js';
 import type { NormalizedChatMessage } from './room.vue';
@@ -183,7 +183,7 @@ function showMenu(ev: MouseEvent, contextmenu = false) {
 			text: i18n.ts.reportAbuse,
 			icon: 'ti ti-exclamation-circle',
 			action: () => {
-				const localUrl = `${url}/chat/messages/${props.message.id}`;
+				const localUrl = `${webUrl}/chat/messages/${props.message.id}`;
 				const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), {
 					user: props.message.fromUser!,
 					initialComment: `${localUrl}\n-----\n`,
diff --git a/packages/frontend/src/pages/clip.vue b/packages/frontend/src/pages/clip.vue
index 87a361c1e2..0417fe5289 100644
--- a/packages/frontend/src/pages/clip.vue
+++ b/packages/frontend/src/pages/clip.vue
@@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, watch, provide, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import type { MenuItem } from '@/types/menu.js';
 import MkNotes from '@/components/MkNotes.vue';
 import { $i } from '@/i.js';
@@ -146,7 +146,7 @@ const headerActions = computed(() => clip.value && isOwned.value ? [{
 			icon: 'ti ti-link',
 			text: i18n.ts.copyUrl,
 			action: () => {
-				copyToClipboard(`${url}/clips/${clip.value!.id}`);
+				copyToClipboard(`${webUrl}/clips/${clip.value!.id}`);
 			},
 		}, {
 			icon: 'ti ti-code',
@@ -164,7 +164,7 @@ const headerActions = computed(() => clip.value && isOwned.value ? [{
 					navigator.share({
 						title: clip.value!.name,
 						text: clip.value!.description ?? '',
-						url: `${url}/clips/${clip.value!.id}`,
+						url: `${webUrl}/clips/${clip.value!.id}`,
 					});
 				},
 			});
diff --git a/packages/frontend/src/pages/explore.featured.vue b/packages/frontend/src/pages/explore.featured.vue
index 82badd40b3..189e1848d0 100644
--- a/packages/frontend/src/pages/explore.featured.vue
+++ b/packages/frontend/src/pages/explore.featured.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div v-else-if="tab === 'polls'">
 		<template v-if="ltlAvailable || gtlAvailable">
 			<MkFoldableSection v-if="ltlAvailable" class="_margin">
-				<template #header><i class="ph-house ph-bold ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.tsx.pollsOnLocal({ name: instance.name ?? host }) }}</template>
+				<template #header><i class="ph-house ph-bold ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.tsx.pollsOnLocal({ name: instance.name ?? webHost }) }}</template>
 				<MkNotes :pagination="paginationForPollsLocal" :disableAutoLoad="true"/>
 			</MkFoldableSection>
 
@@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import MkNotes from '@/components/MkNotes.vue';
 import MkTab from '@/components/MkTab.vue';
 import { i18n } from '@/i18n.js';
diff --git a/packages/frontend/src/pages/explore.users.vue b/packages/frontend/src/pages/explore.users.vue
index 77fe21c33f..94701865aa 100644
--- a/packages/frontend/src/pages/explore.users.vue
+++ b/packages/frontend/src/pages/explore.users.vue
@@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<template v-if="tag == null">
 			<MkFoldableSection class="_margin">
-				<template #header><i class="ti ti-chart-line ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.tsx.popularUsersLocal({ name: instance.name ?? host }) }}</template>
+				<template #header><i class="ti ti-chart-line ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.tsx.popularUsersLocal({ name: instance.name ?? webHost }) }}</template>
 				<MkUserList :pagination="popularUsersLocalF"/>
 			</MkFoldableSection>
 			<MkFoldableSection class="_margin">
@@ -69,7 +69,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { watch, ref, useTemplateRef, computed } from 'vue';
 import * as Misskey from 'misskey-js';
-import { host } from '@@/js/config';
+import { webHost } from '@@/js/config';
 import MkUserList from '@/components/MkUserList.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
 import MkTab from '@/components/MkTab.vue';
diff --git a/packages/frontend/src/pages/flash/flash.vue b/packages/frontend/src/pages/flash/flash.vue
index b17faca2a9..90152a9571 100644
--- a/packages/frontend/src/pages/flash/flash.vue
+++ b/packages/frontend/src/pages/flash/flash.vue
@@ -64,7 +64,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, onDeactivated, onUnmounted, ref, watch, shallowRef, defineAsyncComponent } from 'vue';
 import * as Misskey from 'misskey-js';
 import { Interpreter, Parser, values } from '@syuilo/aiscript';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import type { Ref } from 'vue';
 import type { AsUiComponent, AsUiRoot } from '@/aiscript/ui.js';
 import type { MenuItem } from '@/types/menu.js';
@@ -127,7 +127,7 @@ function share(ev: MouseEvent) {
 function copyLink() {
 	if (!flash.value) return;
 
-	copyToClipboard(`${url}/play/${flash.value.id}`);
+	copyToClipboard(`${webUrl}/play/${flash.value.id}`);
 }
 
 function shareWithNavigator() {
@@ -136,7 +136,7 @@ function shareWithNavigator() {
 	navigator.share({
 		title: flash.value.title,
 		text: flash.value.summary,
-		url: `${url}/play/${flash.value.id}`,
+		url: `${webUrl}/play/${flash.value.id}`,
 	});
 }
 
@@ -144,7 +144,7 @@ function shareWithNote() {
 	if (!flash.value) return;
 
 	os.post({
-		initialText: `${flash.value.title}\n${url}/play/${flash.value.id}`,
+		initialText: `${flash.value.title}\n${webUrl}/play/${flash.value.id}`,
 		instant: true,
 	});
 }
@@ -206,7 +206,7 @@ async function run() {
 			root.value = _root.value;
 		}),
 		THIS_ID: values.STR(flash.value.id),
-		THIS_URL: values.STR(`${url}/play/${flash.value.id}`),
+		THIS_URL: values.STR(`${webUrl}/play/${flash.value.id}`),
 	}, {
 		in: aiScriptReadline,
 		out: (value) => {
@@ -241,7 +241,7 @@ async function run() {
 function reportAbuse() {
 	if (!flash.value) return;
 
-	const pageUrl = `${url}/play/${flash.value.id}`;
+	const pageUrl = `${webUrl}/play/${flash.value.id}`;
 
 	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), {
 		user: flash.value.user,
diff --git a/packages/frontend/src/pages/gallery/post.vue b/packages/frontend/src/pages/gallery/post.vue
index 7c754f0b03..16cfd250a1 100644
--- a/packages/frontend/src/pages/gallery/post.vue
+++ b/packages/frontend/src/pages/gallery/post.vue
@@ -64,7 +64,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, watch, ref, defineAsyncComponent } from 'vue';
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import type { MenuItem } from '@/types/menu.js';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
@@ -109,20 +109,20 @@ function fetchPost() {
 }
 
 function copyLink() {
-	copyToClipboard(`${url}/gallery/${post.value.id}`);
+	copyToClipboard(`${webUrl}/gallery/${post.value.id}`);
 }
 
 function share() {
 	navigator.share({
 		title: post.value.title,
 		text: post.value.description,
-		url: `${url}/gallery/${post.value.id}`,
+		url: `${webUrl}/gallery/${post.value.id}`,
 	});
 }
 
 function shareWithNote() {
 	os.post({
-		initialText: `${post.value.title} ${url}/gallery/${post.value.id}`,
+		initialText: `${post.value.title} ${webUrl}/gallery/${post.value.id}`,
 	});
 }
 
@@ -156,7 +156,7 @@ function edit() {
 function reportAbuse() {
 	if (!post.value) return;
 
-	const pageUrl = `${url}/gallery/${post.value.id}`;
+	const pageUrl = `${webUrl}/gallery/${post.value.id}`;
 
 	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), {
 		user: post.value.user,
diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue
index 85befbb18b..a3119a4de8 100644
--- a/packages/frontend/src/pages/note.vue
+++ b/packages/frontend/src/pages/note.vue
@@ -151,7 +151,7 @@ function fetchNote() {
 				message: i18n.ts.thisContentsAreMarkedAsSigninRequiredByAuthor,
 				openOnRemote: {
 					type: 'lookup',
-					url: `${config.url}/notes/${props.noteId}`,
+					url: `${config.webUrl}/notes/${props.noteId}`,
 				},
 			});
 		}
diff --git a/packages/frontend/src/pages/page-editor/page-editor.vue b/packages/frontend/src/pages/page-editor/page-editor.vue
index 7368e0329a..f67fd591cf 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.vue
+++ b/packages/frontend/src/pages/page-editor/page-editor.vue
@@ -63,7 +63,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, provide, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { v4 as uuid } from 'uuid';
-import { url } from '@@/js/config.js';
 import XBlocks from './page-editor.blocks.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkSelect from '@/components/MkSelect.vue';
diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue
index f4d0f25734..50a828aef9 100644
--- a/packages/frontend/src/pages/page.vue
+++ b/packages/frontend/src/pages/page.vue
@@ -99,7 +99,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, watch, ref, defineAsyncComponent } from 'vue';
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import type { MenuItem } from '@/types/menu.js';
 import XPage from '@/components/page/page.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -188,14 +188,14 @@ function share(ev: MouseEvent) {
 function copyLink() {
 	if (!page.value) return;
 
-	copyToClipboard(`${url}/@${page.value.user.username}/pages/${page.value.name}`);
+	copyToClipboard(`${webUrl}/@${page.value.user.username}/pages/${page.value.name}`);
 }
 
 function shareWithNote() {
 	if (!page.value) return;
 
 	os.post({
-		initialText: `${page.value.title || page.value.name}\n${url}/@${page.value.user.username}/pages/${page.value.name}`,
+		initialText: `${page.value.title || page.value.name}\n${webUrl}/@${page.value.user.username}/pages/${page.value.name}`,
 		instant: true,
 	});
 }
@@ -206,7 +206,7 @@ function shareWithNavigator() {
 	navigator.share({
 		title: page.value.title ?? page.value.name,
 		text: page.value.summary ?? undefined,
-		url: `${url}/@${page.value.user.username}/pages/${page.value.name}`,
+		url: `${webUrl}/@${page.value.user.username}/pages/${page.value.name}`,
 	});
 }
 
@@ -248,7 +248,7 @@ function pin(pin) {
 function reportAbuse() {
 	if (!page.value) return;
 
-	const pageUrl = `${url}/@${props.username}/pages/${props.pageName}`;
+	const pageUrl = `${webUrl}/@${props.username}/pages/${props.pageName}`;
 
 	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), {
 		user: page.value.user,
diff --git a/packages/frontend/src/pages/reversi/game.board.vue b/packages/frontend/src/pages/reversi/game.board.vue
index 1c1adaf687..d5ffecf2b4 100644
--- a/packages/frontend/src/pages/reversi/game.board.vue
+++ b/packages/frontend/src/pages/reversi/game.board.vue
@@ -146,7 +146,7 @@ import { computed, onActivated, onDeactivated, onMounted, onUnmounted, ref, shal
 import * as Misskey from 'misskey-js';
 import * as Reversi from 'misskey-reversi';
 import { useInterval } from '@@/js/use-interval.js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import MkButton from '@/components/MkButton.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
@@ -443,7 +443,7 @@ function autoplay() {
 
 function share() {
 	os.post({
-		initialText: `#MisskeyReversi\n${url}/reversi/g/${game.value.id}`,
+		initialText: `#MisskeyReversi\n${webUrl}/reversi/g/${game.value.id}`,
 		instant: true,
 	});
 }
diff --git a/packages/frontend/src/pages/reversi/game.vue b/packages/frontend/src/pages/reversi/game.vue
index a447572cc0..fa40fee70d 100644
--- a/packages/frontend/src/pages/reversi/game.vue
+++ b/packages/frontend/src/pages/reversi/game.vue
@@ -20,7 +20,7 @@ import { useStream } from '@/stream.js';
 import { ensureSignin } from '@/i.js';
 import { useRouter } from '@/router.js';
 import * as os from '@/os.js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import { useInterval } from '@@/js/use-interval.js';
 
@@ -45,7 +45,7 @@ function start(_game: Misskey.entities.ReversiGameDetailed) {
 
 	if (shareWhenStart.value) {
 		misskeyApi('notes/create', {
-			text: `${i18n.ts._reversi.iStartedAGame}\n${url}/reversi/g/${props.gameId}`,
+			text: `${i18n.ts._reversi.iStartedAGame}\n${webUrl}/reversi/g/${props.gameId}`,
 			visibility: 'home',
 		});
 	}
diff --git a/packages/frontend/src/pages/search.note.vue b/packages/frontend/src/pages/search.note.vue
index 85183637f4..2fd72df6d5 100644
--- a/packages/frontend/src/pages/search.note.vue
+++ b/packages/frontend/src/pages/search.note.vue
@@ -127,7 +127,7 @@ import { computed, ref, shallowRef, toRef } from 'vue';
 import type * as Misskey from 'misskey-js';
 import type { Paging } from '@/components/MkPagination.vue';
 import { $i } from '@/i.js';
-import { host as localHost } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import * as os from '@/os.js';
@@ -207,7 +207,7 @@ type SearchParams = {
 };
 
 const fixHostIfLocal = (target: string | null | undefined) => {
-	if (!target || target === localHost) return '.';
+	if (!target || target === webHost) return '.';
 	return target;
 };
 
diff --git a/packages/frontend/src/pages/settings/2fa.qrdialog.vue b/packages/frontend/src/pages/settings/2fa.qrdialog.vue
index 5bb125e67c..2b147a1d5f 100644
--- a/packages/frontend/src/pages/settings/2fa.qrdialog.vue
+++ b/packages/frontend/src/pages/settings/2fa.qrdialog.vue
@@ -106,7 +106,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { hostname, port } from '@@/js/config';
+import { localHostname, port } from '@@/js/config';
 import { useTemplateRef, ref } from 'vue';
 import MkButton from '@/components/MkButton.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
@@ -162,7 +162,7 @@ function downloadBackupCodes() {
 		const txtBlob = new Blob([backupCodes.value.join('\n')], { type: 'text/plain' });
 		const dummya = window.document.createElement('a');
 		dummya.href = URL.createObjectURL(txtBlob);
-		dummya.download = `${$i.username}@${hostname}` + (port !== '' ? `_${port}` : '') + '-2fa-backup-codes.txt';
+		dummya.download = `${$i.username}@${localHostname}` + (port !== '' ? `_${port}` : '') + '-2fa-backup-codes.txt';
 		dummya.click();
 	}
 }
diff --git a/packages/frontend/src/pages/settings/profile.attribution-domains-setting.vue b/packages/frontend/src/pages/settings/profile.attribution-domains-setting.vue
index c77870f9d3..7a0f2ceb41 100644
--- a/packages/frontend/src/pages/settings/profile.attribution-domains-setting.vue
+++ b/packages/frontend/src/pages/settings/profile.attribution-domains-setting.vue
@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref, watch, computed } from 'vue';
-import { host as hostRaw } from '@@/js/config.js';
+import { localHost } from '@@/js/config.js';
 import { toUnicode } from 'punycode.js';
 import MkTextarea from '@/components/MkTextarea.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -36,7 +36,7 @@ const domainArray = computed(() => {
 		.filter(el => el);
 });
 const changed = ref(false);
-const tutorialTag = '`<meta name="fediverse:creator" content="' + $i.username + '@' + toUnicode(hostRaw) + '" />`';
+const tutorialTag = '`<meta name="fediverse:creator" content="' + $i.username + '@' + toUnicode(localHost) + '" />`';
 
 async function save() {
 	// checks for a full line without whitespace.
diff --git a/packages/frontend/src/pages/theme-editor.vue b/packages/frontend/src/pages/theme-editor.vue
index 585d96bd08..4facc6edce 100644
--- a/packages/frontend/src/pages/theme-editor.vue
+++ b/packages/frontend/src/pages/theme-editor.vue
@@ -79,7 +79,7 @@ import { v4 as uuid } from 'uuid';
 import JSON5 from 'json5';
 import lightTheme from '@@/themes/_light.json5';
 import darkTheme from '@@/themes/_dark.json5';
-import { host } from '@@/js/config.js';
+import { localHost } from '@@/js/config.js';
 import type { Theme } from '@/theme.js';
 import MkButton from '@/components/MkButton.vue';
 import MkCodeEditor from '@/components/MkCodeEditor.vue';
@@ -190,7 +190,7 @@ async function saveAs() {
 
 	theme.value.id = uuid();
 	theme.value.name = name;
-	theme.value.author = `@${$i.username}@${toUnicode(host)}`;
+	theme.value.author = `@${$i.username}@${toUnicode(localHost)}`;
 	if (description.value) theme.value.desc = description.value;
 	await addTheme(theme.value);
 	applyTheme(theme.value);
diff --git a/packages/frontend/src/pages/welcome.setup.vue b/packages/frontend/src/pages/welcome.setup.vue
index 4d9c0bb742..f84f11dcab 100644
--- a/packages/frontend/src/pages/welcome.setup.vue
+++ b/packages/frontend/src/pages/welcome.setup.vue
@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-admin-username>
 					<template #label>{{ i18n.ts.username }}</template>
 					<template #prefix>@</template>
-					<template #suffix>@{{ host }}</template>
+					<template #suffix>@{{ localHost }}</template>
 				</MkInput>
 				<MkInput v-model="password" type="password" data-cy-admin-password>
 					<template #label>{{ i18n.ts.password }}</template>
@@ -40,7 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { host, version } from '@@/js/config.js';
+import { localHost, version } from '@@/js/config.js';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import * as os from '@/os.js';
diff --git a/packages/frontend/src/preferences/manager.ts b/packages/frontend/src/preferences/manager.ts
index 349040d98e..9e882ea9ed 100644
--- a/packages/frontend/src/preferences/manager.ts
+++ b/packages/frontend/src/preferences/manager.ts
@@ -5,7 +5,7 @@
 
 import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
 import { v4 as uuid } from 'uuid';
-import { host, version } from '@@/js/config.js';
+import { localHost, version } from '@@/js/config.js';
 import { PREF_DEF } from './def.js';
 import type { Ref, WritableComputedRef } from 'vue';
 import type { MenuItem } from '@/types/menu.js';
@@ -182,7 +182,7 @@ export class PreferencesManager {
 
 		if (parseScope(record[0]).account == null && this.isAccountDependentKey(key)) {
 			this.profile.preferences[key].push([makeScope({
-				server: host,
+				server: localHost,
 				account: $i!.id,
 			}), v, {}]);
 			this.save();
@@ -191,7 +191,7 @@ export class PreferencesManager {
 
 		if (parseScope(record[0]).server == null && this.isServerDependentKey(key)) {
 			this.profile.preferences[key].push([makeScope({
-				server: host,
+				server: localHost,
 			}), v, {}]);
 			this.save();
 			return;
@@ -339,10 +339,10 @@ export class PreferencesManager {
 
 		if ($i == null) return records.find(([scope, v]) => parseScope(scope).account == null)!;
 
-		const accountOverrideRecord = records.find(([scope, v]) => parseScope(scope).server === host && parseScope(scope).account === $i!.id);
+		const accountOverrideRecord = records.find(([scope, v]) => parseScope(scope).server === localHost && parseScope(scope).account === $i!.id);
 		if (accountOverrideRecord) return accountOverrideRecord;
 
-		const serverOverrideRecord = records.find(([scope, v]) => parseScope(scope).server === host && parseScope(scope).account == null);
+		const serverOverrideRecord = records.find(([scope, v]) => parseScope(scope).server === localHost && parseScope(scope).account == null);
 		if (serverOverrideRecord) return serverOverrideRecord;
 
 		const record = records.find(([scope, v]) => parseScope(scope).account == null);
@@ -351,7 +351,7 @@ export class PreferencesManager {
 
 	public isAccountOverrided<K extends keyof PREF>(key: K): boolean {
 		if ($i == null) return false;
-		return this.profile.preferences[key].some(([scope, v]) => parseScope(scope).server === host && parseScope(scope).account === $i!.id) ?? false;
+		return this.profile.preferences[key].some(([scope, v]) => parseScope(scope).server === localHost && parseScope(scope).account === $i!.id) ?? false;
 	}
 
 	public setAccountOverride<K extends keyof PREF>(key: K) {
@@ -361,7 +361,7 @@ export class PreferencesManager {
 
 		const records = this.profile.preferences[key];
 		records.push([makeScope({
-			server: host,
+			server: localHost,
 			account: $i!.id,
 		}), this.s[key], {}]);
 
@@ -374,7 +374,7 @@ export class PreferencesManager {
 
 		const records = this.profile.preferences[key];
 
-		const index = records.findIndex(([scope, v]) => parseScope(scope).server === host && parseScope(scope).account === $i!.id);
+		const index = records.findIndex(([scope, v]) => parseScope(scope).server === localHost && parseScope(scope).account === $i!.id);
 		if (index === -1) return;
 
 		records.splice(index, 1);
diff --git a/packages/frontend/src/ui/_common_/common.ts b/packages/frontend/src/ui/_common_/common.ts
index fcb9f2acfc..11b7eb6c6d 100644
--- a/packages/frontend/src/ui/_common_/common.ts
+++ b/packages/frontend/src/ui/_common_/common.ts
@@ -7,7 +7,7 @@ import { defineAsyncComponent } from 'vue';
 import type { MenuItem } from '@/types/menu.js';
 import * as os from '@/os.js';
 import { instance } from '@/instance.js';
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/i.js';
 
@@ -44,7 +44,7 @@ export function openInstanceMenu(ev: MouseEvent) {
 	const menuItems: MenuItem[] = [];
 
 	menuItems.push({
-		text: instance.name ?? host,
+		text: instance.name ?? webHost,
 		type: 'label',
 	}, {
 		type: 'link',
diff --git a/packages/frontend/src/ui/_common_/titlebar.vue b/packages/frontend/src/ui/_common_/titlebar.vue
index 4450e60b18..d0c1e4c623 100644
--- a/packages/frontend/src/ui/_common_/titlebar.vue
+++ b/packages/frontend/src/ui/_common_/titlebar.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div :class="$style.root">
 	<div :class="$style.title">
 		<img :src="instance.sidebarLogoUrl || instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="instance.sidebarLogoUrl ? $style.wideInstanceIcon : $style.instanceIcon"/>
-		<span :class="$style.instanceTitle">{{ instance.name ?? host }}</span>
+		<span :class="$style.instanceTitle">{{ instance.name ?? webHost }}</span>
 	</div>
 	<div :class="$style.controls">
 		<span :class="$style.left">
@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import { ref } from 'vue';
 import { instance } from '@/instance.js';
 import { prefer } from '@/preferences.js';
diff --git a/packages/frontend/src/utility/get-embed-code.ts b/packages/frontend/src/utility/get-embed-code.ts
index d458e64f19..c4741d73f5 100644
--- a/packages/frontend/src/utility/get-embed-code.ts
+++ b/packages/frontend/src/utility/get-embed-code.ts
@@ -4,7 +4,7 @@
  */
 import { defineAsyncComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { defaultEmbedParams, embedRouteWithScrollbar } from '@@/js/embed-page.js';
 import type { EmbedParams, EmbeddableEntity } from '@@/js/embed-page.js';
 import * as os from '@/os.js';
@@ -53,8 +53,8 @@ export function getEmbedCode(path: string, params?: EmbedParams): string {
 	}
 
 	const iframeCode = [
-		`<iframe src="${url + path + paramString}" data-misskey-embed-id="${iframeId}" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"></iframe>`,
-		`<script defer src="${url}/embed.js"></script>`,
+		`<iframe src="${webUrl + path + paramString}" data-misskey-embed-id="${iframeId}" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"></iframe>`,
+		`<script defer src="${webUrl}/embed.js"></script>`,
 	];
 	return iframeCode.join('\n');
 }
diff --git a/packages/frontend/src/utility/get-note-menu.ts b/packages/frontend/src/utility/get-note-menu.ts
index 056480a7ef..0096ed68da 100644
--- a/packages/frontend/src/utility/get-note-menu.ts
+++ b/packages/frontend/src/utility/get-note-menu.ts
@@ -5,7 +5,7 @@
 
 import { defineAsyncComponent } from 'vue';
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { claimAchievement } from './achievements.js';
 import type { Ref, ShallowRef } from 'vue';
 import type { MenuItem } from '@/types/menu.js';
@@ -137,7 +137,7 @@ export function getAbuseNoteMenu(note: Misskey.entities.Note, text: string): Men
 		icon: 'ti ti-exclamation-circle',
 		text,
 		action: (): void => {
-			const localUrl = `${url}/notes/${note.id}`;
+			const localUrl = `${webUrl}/notes/${note.id}`;
 			let noteInfo = '';
 			if (note.url ?? note.uri != null) noteInfo = `Note: ${note.url ?? note.uri}\n`;
 			noteInfo += `Local Note: ${localUrl}\n`;
@@ -156,7 +156,7 @@ export function getCopyNoteLinkMenu(note: Misskey.entities.Note, text: string):
 		icon: 'ti ti-link',
 		text,
 		action: (): void => {
-			copyToClipboard(`${url}/notes/${note.id}`);
+			copyToClipboard(`${webUrl}/notes/${note.id}`);
 		},
 	};
 }
@@ -282,7 +282,7 @@ export function getNoteMenu(props: {
 		navigator.share({
 			title: i18n.tsx.noteOf({ user: appearNote.user.name ?? appearNote.user.username }),
 			text: appearNote.text ?? '',
-			url: `${url}/notes/${appearNote.id}`,
+			url: `${webUrl}/notes/${appearNote.id}`,
 		});
 	}
 
diff --git a/packages/frontend/src/utility/get-user-menu.ts b/packages/frontend/src/utility/get-user-menu.ts
index fde390cece..e1a746b579 100644
--- a/packages/frontend/src/utility/get-user-menu.ts
+++ b/packages/frontend/src/utility/get-user-menu.ts
@@ -6,7 +6,7 @@
 import { toUnicode } from 'punycode.js';
 import { defineAsyncComponent, ref, watch } from 'vue';
 import * as Misskey from 'misskey-js';
-import { host, url } from '@@/js/config.js';
+import { localHost, webUrl } from '@@/js/config.js';
 import type { Router } from '@/router.js';
 import type { MenuItem } from '@/types/menu.js';
 import { i18n } from '@/i18n.js';
@@ -164,7 +164,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
 		icon: 'ti ti-at',
 		text: i18n.ts.copyUsername,
 		action: () => {
-			copyToClipboard(`@${user.username}@${user.host ?? host}`);
+			copyToClipboard(`@${user.username}@${user.host ?? localHost}`);
 		},
 	});
 
@@ -173,7 +173,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
 		text: i18n.ts.copyProfileUrl,
 		action: () => {
 			const canonical = user.host === null ? `@${user.username}` : `@${user.username}@${toUnicode(user.host)}`;
-			copyToClipboard(`${url}/${canonical}`);
+			copyToClipboard(`${webUrl}/${canonical}`);
 		},
 	});
 
@@ -181,7 +181,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
 		icon: 'ti ti-rss',
 		text: i18n.ts.copyRSS,
 		action: () => {
-			copyToClipboard(`${user.host ?? host}/@${user.username}.atom`);
+			copyToClipboard(`${user.host ?? localHost}/@${user.username}.atom`);
 		},
 	});
 
diff --git a/packages/frontend/src/utility/getNoteUrls.ts b/packages/frontend/src/utility/getNoteUrls.ts
index efd014cbf0..c92e3a868b 100644
--- a/packages/frontend/src/utility/getNoteUrls.ts
+++ b/packages/frontend/src/utility/getNoteUrls.ts
@@ -9,7 +9,7 @@ import type * as Misskey from 'misskey-js';
 export function getNoteUrls(note: Misskey.entities.Note): string[] {
 	const urls: string[] = [
 		// Any note
-		`${config.url}/notes/${note.id}`,
+		`${config.webUrl}/notes/${note.id}`,
 	];
 
 	// Remote note
@@ -18,7 +18,7 @@ export function getNoteUrls(note: Misskey.entities.Note): string[] {
 
 	if (note.reply) {
 		// Any Reply
-		urls.push(`${config.url}/notes/${note.reply.id}`);
+		urls.push(`${config.webUrl}/notes/${note.reply.id}`);
 		// Remote Reply
 		if (note.reply.url) urls.push(note.reply.url);
 		if (note.reply.uri) urls.push(note.reply.uri);
@@ -26,7 +26,7 @@ export function getNoteUrls(note: Misskey.entities.Note): string[] {
 
 	if (note.renote) {
 		// Any Renote
-		urls.push(`${config.url}/notes/${note.renote.id}`);
+		urls.push(`${config.webUrl}/notes/${note.renote.id}`);
 		// Remote Renote
 		if (note.renote.url) urls.push(note.renote.url);
 		if (note.renote.uri) urls.push(note.renote.uri);
@@ -34,7 +34,7 @@ export function getNoteUrls(note: Misskey.entities.Note): string[] {
 
 	if (note.renote?.renote) {
 		// Any Quote
-		urls.push(`${config.url}/notes/${note.renote.renote.id}`);
+		urls.push(`${config.webUrl}/notes/${note.renote.renote.id}`);
 		// Remote Quote
 		if (note.renote.renote.url) urls.push(note.renote.renote.url);
 		if (note.renote.renote.uri) urls.push(note.renote.renote.uri);
diff --git a/packages/frontend/src/utility/media-proxy.ts b/packages/frontend/src/utility/media-proxy.ts
index 78eba35ead..d93c0448d1 100644
--- a/packages/frontend/src/utility/media-proxy.ts
+++ b/packages/frontend/src/utility/media-proxy.ts
@@ -4,14 +4,14 @@
  */
 
 import { MediaProxy } from '@@/js/media-proxy.js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { instance } from '@/instance.js';
 
 let _mediaProxy: MediaProxy | null = null;
 
 export function getProxiedImageUrl(...args: Parameters<MediaProxy['getProxiedImageUrl']>): string {
 	if (_mediaProxy == null) {
-		_mediaProxy = new MediaProxy(instance, url);
+		_mediaProxy = new MediaProxy(instance, webUrl);
 	}
 
 	return _mediaProxy.getProxiedImageUrl(...args);
@@ -19,7 +19,7 @@ export function getProxiedImageUrl(...args: Parameters<MediaProxy['getProxiedIma
 
 export function getProxiedImageUrlNullable(...args: Parameters<MediaProxy['getProxiedImageUrlNullable']>): string | null {
 	if (_mediaProxy == null) {
-		_mediaProxy = new MediaProxy(instance, url);
+		_mediaProxy = new MediaProxy(instance, webUrl);
 	}
 
 	return _mediaProxy.getProxiedImageUrlNullable(...args);
@@ -27,7 +27,7 @@ export function getProxiedImageUrlNullable(...args: Parameters<MediaProxy['getPr
 
 export function getStaticImageUrl(...args: Parameters<MediaProxy['getStaticImageUrl']>): string {
 	if (_mediaProxy == null) {
-		_mediaProxy = new MediaProxy(instance, url);
+		_mediaProxy = new MediaProxy(instance, webUrl);
 	}
 
 	return _mediaProxy.getStaticImageUrl(...args);
diff --git a/packages/frontend/src/utility/player-url-transform.ts b/packages/frontend/src/utility/player-url-transform.ts
index 39c6df6500..068a11874e 100644
--- a/packages/frontend/src/utility/player-url-transform.ts
+++ b/packages/frontend/src/utility/player-url-transform.ts
@@ -2,7 +2,7 @@
  * SPDX-FileCopyrightText: syuilo and misskey-project
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { hostname } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 
 export function transformPlayerUrl(url: string): string {
 	const urlObj = new URL(url);
@@ -13,7 +13,7 @@ export function transformPlayerUrl(url: string): string {
 	if (urlObj.hostname === 'player.twitch.tv') {
 		// TwitchはCSPの制約あり
 		// https://dev.twitch.tv/docs/embed/video-and-clips/
-		urlParams.set('parent', hostname);
+		urlParams.set('parent', webHost);
 		urlParams.set('allowfullscreen', '');
 		urlParams.set('autoplay', 'true');
 	} else {
diff --git a/packages/frontend/src/utility/popout.ts b/packages/frontend/src/utility/popout.ts
index 5b141222e8..6cde3d8a33 100644
--- a/packages/frontend/src/utility/popout.ts
+++ b/packages/frontend/src/utility/popout.ts
@@ -7,7 +7,7 @@ import { appendQuery } from '@@/js/url.js';
 import * as config from '@@/js/config.js';
 
 export function popout(path: string, w?: HTMLElement) {
-	let url = path.startsWith('http://') || path.startsWith('https://') ? path : config.url + path;
+	let url = path.startsWith('http://') || path.startsWith('https://') ? path : config.webUrl + path;
 	url = appendQuery(url, 'zen');
 	if (w) {
 		const position = w.getBoundingClientRect();
diff --git a/packages/frontend/src/widgets/WidgetInstanceInfo.vue b/packages/frontend/src/widgets/WidgetInstanceInfo.vue
index 9708b63a8d..4ace9c25b4 100644
--- a/packages/frontend/src/widgets/WidgetInstanceInfo.vue
+++ b/packages/frontend/src/widgets/WidgetInstanceInfo.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="$style.bodyContainer">
 			<div :class="$style.body">
 				<MkA :class="$style.name" to="/about" behavior="window">{{ instance.name }}</MkA>
-				<div :class="$style.host">{{ host }}</div>
+				<div :class="$style.host">{{ webHost }}</div>
 			</div>
 		</div>
 	</div>
@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { useWidgetPropsManager } from './widget.js';
 import type { WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import type { GetFormResultType } from '@/utility/form.js';
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import { instance } from '@/instance.js';
 
 const name = 'instanceInfo';
diff --git a/packages/frontend/src/widgets/WidgetRss.vue b/packages/frontend/src/widgets/WidgetRss.vue
index 132eb0a629..8583d56c89 100644
--- a/packages/frontend/src/widgets/WidgetRss.vue
+++ b/packages/frontend/src/widgets/WidgetRss.vue
@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref, watch, computed } from 'vue';
 import * as Misskey from 'misskey-js';
-import { url as base } from '@@/js/config.js';
+import { webUrl as base } from '@@/js/config.js';
 import { useInterval } from '@@/js/use-interval.js';
 import { useWidgetPropsManager } from './widget.js';
 import type { WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
diff --git a/packages/frontend/src/widgets/WidgetRssTicker.vue b/packages/frontend/src/widgets/WidgetRssTicker.vue
index b5be4d35c2..86346626b0 100644
--- a/packages/frontend/src/widgets/WidgetRssTicker.vue
+++ b/packages/frontend/src/widgets/WidgetRssTicker.vue
@@ -35,7 +35,7 @@ import MarqueeText from '@/components/MkMarquee.vue';
 import type { GetFormResultType } from '@/utility/form.js';
 import MkContainer from '@/components/MkContainer.vue';
 import { shuffle } from '@/utility/shuffle.js';
-import { url as base } from '@@/js/config.js';
+import { webUrl as base } from '@@/js/config.js';
 import { useInterval } from '@@/js/use-interval.js';
 
 const name = 'rssTicker';