Merge commit from fork

(cherry picked from commit d10fdfe9738b17a9d81037c031b40a2cc4cb8038)

* SP-2025-03.1 always wrap icon&thumbnail URLs

if they're not HTTP URLs, the frontend won't be able to display them
anyway (`<img src="mailto:…">` or '<div stile="background-image:
url(nntp:…)">` aren't going to work!), so let's always run them through the
media proxy, which will fail harder (fetching a `javascript:` URL
won't do anything in the backend, might do something in the frontend)
and will always protect the client's address in cases like `gemini:`
where the browser could try to fetch

* SP-2025-03.2 use object binding for more styles

interpolating a random (remote-controlled!) string into a `style`
attribute is a bad idea; using VueJS object binding, we should get
proper quoting and therefore safe parse failures instead of CSS
injections / XSS

* SP-2025-03.3 slightly more robust "self" URL handling

parse URLs instead of treating them as strings; this is still not
perfect, but the `URL` class only handles full URLs, not relative
ones, so there's so way to ask it "give me a URL object that
represents this resource relative to this base URL"

notice that passing very weird URLs to `MkUrl` and `MkUrlPreview` will
break the frontend (in dev mode) because there's an untrapped `new
URL(…)` that may explode; production builds seem to safely ignore the
error, though

---------

Co-authored-by: Julia <julia@insertdomain.name>
Co-authored-by: dakkar <dakkar@thenautilus.net>

packages/backend/src/server/web/UrlPreviewService.ts

@@ -37,7 +37,6 @@ export class UrlPreviewService {
 	@bindThis
 	private wrap(url?: string | null): string | null {
 		if (!url) return null;
-		if (!RegExp(/^https?:\/\//).exec(url)) return url;
 
 		return appendQuery(
 			`${this.config.mediaProxy}/preview/${encodeURIComponent(omitHttps(url))}`,

packages/frontend/src/components/MkLink.vue

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	ref="el"
 	style="word-break: break-all;"
 	class="_link"
-	:[attr]="self ? url.substring(local.length) : url"
+	:[attr]="maybeRelativeUrl"
 	:rel="rel ?? 'nofollow noopener'"
 	:target="target"
 	:behavior="props.navigationBehavior"
@@ -28,7 +28,8 @@ import { useTooltip } from '@/scripts/use-tooltip.js';
 import { warningExternalWebsite } from '@/scripts/warning-external-website.js';
 import * as os from '@/os.js';
 import { isEnabledUrlPreview } from '@/instance.js';
-import { MkABehavior } from '@/components/global/MkA.vue';
+import type { MkABehavior } from '@/components/global/MkA.vue';
+import { maybeMakeRelative } from '@/scripts/url.js';
 
 const props = withDefaults(defineProps<{
 	url: string;
@@ -39,7 +40,8 @@ const props = withDefaults(defineProps<{
 	hideIcon: false,
 });
 
-const self = props.url.startsWith(local);
+const maybeRelativeUrl = maybeMakeRelative(props.url, local);
+const self = maybeRelativeUrl !== props.url;
 const attr = self ? 'to' : 'href';
 const target = self ? null : '_blank';
 

packages/frontend/src/components/MkUrlPreview.vue

@@ -47,13 +47,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<component
 		:is="self ? 'MkA' : 'a'"
 		:class="[$style.link, { [$style.compact]: compact }]"
-		:[attr]="self ? url.substring(local.length) : url"
+		:[attr]="maybeRelativeUrl"
 		rel="nofollow noopener"
 		:target="target"
 		:title="url"
 		@click="(ev: MouseEvent) => warningExternalWebsite(ev, url)"
 	>
-		<div v-if="thumbnail" :class="[$style.thumbnail, { [$style.thumbnailBlur]: sensitive }]" :style="defaultStore.state.dataSaver.urlPreview ? '' : `background-image: url('${thumbnail}')`">
+		<div v-if="thumbnail" :class="[$style.thumbnail, { [$style.thumbnailBlur]: sensitive }]" :style="defaultStore.state.dataSaver.urlPreview ? '' : { backgroundImage: `url('${thumbnail}')` }">
 		</div>
 		<article :class="$style.body">
 			<header :class="$style.header">
@@ -101,6 +101,7 @@ import MkButton from '@/components/MkButton.vue';
 import { versatileLang } from '@/scripts/intl-const.js';
 import { defaultStore } from '@/store.js';
 import { warningExternalWebsite } from '@/scripts/warning-external-website.js';
+import { maybeMakeRelative } from '@/scripts/url.js';
 
 type SummalyResult = Awaited<ReturnType<typeof summaly>>;
 
@@ -118,7 +119,8 @@ const props = withDefaults(defineProps<{
 const MOBILE_THRESHOLD = 500;
 const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
 
-const self = props.url.startsWith(local);
+const maybeRelativeUrl = maybeMakeRelative(props.url, local);
+const self = maybeRelativeUrl !== props.url;
 const attr = self ? 'to' : 'href';
 const target = self ? null : '_blank';
 const fetching = ref(true);

packages/frontend/src/components/MkUserInfo.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_panel" :class="$style.root">
-	<div :class="$style.banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
+	<div :class="$style.banner" :style="user.bannerUrl ? { backgroundImage: `url(${user.bannerUrl})` } : ''"></div>
 	<MkAvatar :class="$style.avatar" :user="user" indicator/>
 	<div :class="$style.title">
 		<MkA :class="$style.name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>

packages/frontend/src/components/MkUserPopup.vue

@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 >
 	<div v-if="showing" :class="$style.root" class="_popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { emit('mouseover'); }" @mouseleave="() => { emit('mouseleave'); }">
 		<div v-if="user != null">
-			<div :class="$style.banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''">
+			<div :class="$style.banner" :style="user.bannerUrl ? { backgroundImage: `url(${user.bannerUrl})` } : ''">
 				<span v-if="$i && $i.id != user.id && user.isFollowed" :class="$style.followed">{{ i18n.ts.followsYou }}</span>
 			</div>
 			<svg viewBox="0 0 128 128" :class="$style.avatarBack">

packages/frontend/src/components/MkUserSetupDialog.User.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div v-adaptive-bg class="_panel" style="position: relative;">
-	<div :class="$style.banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
+	<div :class="$style.banner" :style="user.bannerUrl ? { backgroundImage: `url(${user.bannerUrl})` } : ''"></div>
 	<MkAvatar :class="$style.avatar" :user="user" indicator/>
 	<div :class="$style.title">
 		<div :class="$style.name"><MkUserName :user="user" :nowrap="false"/></div>

packages/frontend/src/components/global/MkUrl.vue

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	ref="el"
 	:class="$style.root"
 	class="_link"
-	:[attr]="self ? props.url.substring(local.length) : props.url"
+	:[attr]="maybeRelativeUrl"
 	:rel="rel ?? 'nofollow noopener'"
 	:target="target"
 	:behavior="props.navigationBehavior"
@@ -40,7 +40,8 @@ import { useTooltip } from '@/scripts/use-tooltip.js';
 import { safeURIDecode } from '@/scripts/safe-uri-decode.js';
 import { warningExternalWebsite } from '@/scripts/warning-external-website.js';
 import { isEnabledUrlPreview } from '@/instance.js';
-import { MkABehavior } from '@/components/global/MkA.vue';
+import type { MkABehavior } from '@/components/global/MkA.vue';
+import { maybeMakeRelative } from '@/scripts/url.js';
 
 const props = withDefaults(defineProps<{
 	url: string;
@@ -51,7 +52,8 @@ const props = withDefaults(defineProps<{
 	showUrlPreview: true,
 });
 
-const self = props.url.startsWith(local);
+const maybeRelativeUrl = maybeMakeRelative(props.url, local);
+const self = maybeRelativeUrl !== props.url;
 const url = new URL(props.url);
 if (!['http:', 'https:'].includes(url.protocol)) throw new Error('invalid url');
 const el = ref();

packages/frontend/src/scripts/url.ts

@@ -27,3 +27,20 @@ export function omitHttps(url: string): string {
 	if (url.startsWith('https%3A%2F%2F')) return url.slice(14);
 	return url;
 }
+
+export function maybeMakeRelative(urlStr: string, baseStr: string): string {
+	try {
+		const baseObj = new URL(baseStr);
+		const urlObj = new URL(urlStr);
+		/* in all places where maybeMakeRelative is used, baseStr is the
+		 * instance's public URL, which can't have path components, so the
+		 * relative URL will always have the whole path from the urlStr
+		*/
+		if (urlObj.origin === baseObj.origin) {
+			return urlObj.pathname + urlObj.search + urlObj.hash;
+		}
+		return urlStr;
+	} catch (e) {
+		return '';
+	}
+}

packages/frontend/src/widgets/WidgetPhotos.vue

@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div
 				v-for="(image, i) in images" :key="i"
 				:class="$style.img"
-				:style="`background-image: url(${thumbnail(image)})`"
+				:style="{ backgroundImage: `url(${thumbnail(image)})` }"
 			></div>
 		</div>
 	</div>

packages/frontend/src/widgets/server-metric/cpu-mem.vue

@@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<rect
 			x="-2" y="-2"
 			:width="viewBoxX + 4" :height="viewBoxY + 4"
-			:style="`stroke: none; fill: url(#${ cpuGradientId }); mask: url(#${ cpuMaskId })`"
+			:style="{ stroke: 'none', fill: `url(#${ cpuGradientId })`, mask: `url(#${ cpuMaskId })` }"
 		/>
 		<text x="1" y="5">CPU <tspan>{{ cpuP }}%</tspan></text>
 	</svg>
@@ -67,7 +67,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<rect
 			x="-2" y="-2"
 			:width="viewBoxX + 4" :height="viewBoxY + 4"
-			:style="`stroke: none; fill: url(#${ memGradientId }); mask: url(#${ memMaskId })`"
+			:style="{ stroke: 'none', fill: `url(#${ memGradientId })`, mask: `url(#${ memMaskId })` }"
 		/>
 		<text x="1" y="5">MEM <tspan>{{ memP }}%</tspan></text>
 	</svg>