enhance(frontend): 外部サイトへのリンクは移動の前に警告を表示するように (MisskeyIO#558)

packages/frontend/src/components/MkLink.vue

@@ -5,8 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <component
-	:is="self ? 'MkA' : 'a'" ref="el" style="word-break: break-all;" class="_link" :[attr]="self ? url.substring(local.length) : url" :rel="rel ?? 'nofollow noopener'" :target="target"
+	:is="self ? 'MkA' : 'a'"
+	ref="el"
+	style="word-break: break-all;"
+	class="_link"
+	:[attr]="self ? url.substring(local.length) : url"
+	:rel="rel ?? 'nofollow noopener'"
+	:target="target"
 	:title="url"
+	@click="(ev: MouseEvent) => warningExternalWebsite(ev, url)"
 >
 	<slot></slot>
 	<i v-if="target === '_blank'" class="ti ti-external-link" :class="$style.icon"></i>
@@ -17,6 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { defineAsyncComponent, ref } from 'vue';
 import { url as local } from '@/config.js';
 import { useTooltip } from '@/scripts/use-tooltip.js';
+import { warningExternalWebsite } from '@/scripts/warning-external-website.js';
 import * as os from '@/os.js';
 
 const props = withDefaults(defineProps<{

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

@@ -5,7 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <component
-	:is="self ? 'MkA' : 'a'" ref="el" :class="$style.root" class="_link" :[attr]="self ? props.url.substring(local.length) : props.url" :rel="rel ?? 'nofollow noopener'" :target="target"
+	:is="self ? 'MkA' : 'a'"
+	ref="el"
+	:class="$style.root"
+	class="_link"
+	:[attr]="self ? props.url.substring(local.length) : props.url"
+	:rel="rel ?? 'nofollow noopener'"
+	:target="target"
+	@click="(ev: MouseEvent) => warningExternalWebsite(ev, props.url)"
 	@contextmenu.stop="() => {}"
 >
 	<template v-if="!self">
@@ -30,6 +37,7 @@ import { url as local } from '@/config.js';
 import * as os from '@/os.js';
 import { useTooltip } from '@/scripts/use-tooltip.js';
 import { safeURIDecode } from '@/scripts/safe-uri-decode.js';
+import { warningExternalWebsite } from '@/scripts/warning-external-website.js';
 
 const props = withDefaults(defineProps<{
 	url: string;

packages/frontend/src/pages/admin/moderation.vue

@@ -45,6 +45,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<template #caption>{{ i18n.ts.prohibitedWordsDescription }}<br>{{ i18n.ts.prohibitedWordsDescription2 }}</template>
 					</MkTextarea>
 
+					<MkTextarea v-model="wellKnownWebsites">
+						<template #label>{{ i18n.ts.wellKnownWebsites }}</template>
+						<template #caption>{{ i18n.ts.wellKnownWebsitesDescription }}</template>
+					</MkTextarea>
+
 					<MkTextarea v-model="urlPreviewDenyList">
 						<template #label>{{ i18n.ts.urlPreviewDenyList }}</template>
 						<template #caption>{{ i18n.ts.urlPreviewDenyListDescription }}</template>
@@ -91,7 +96,8 @@ const hiddenTags = ref<string>('');
 const preservedUsernames = ref<string>('');
 const tosUrl = ref<string | null>(null);
 const privacyPolicyUrl = ref<string | null>(null);
-const urlPreviewDenyList = ref<string | undefined>('');
+const wellKnownWebsites = ref<string>('');
+const urlPreviewDenyList = ref<string>('');
 
 async function init() {
 	const meta = await misskeyApi('admin/meta');
@@ -103,7 +109,8 @@ async function init() {
 	preservedUsernames.value = meta.preservedUsernames.join('\n');
 	tosUrl.value = meta.tosUrl;
 	privacyPolicyUrl.value = meta.privacyPolicyUrl;
-	urlPreviewDenyList.value = meta.urlPreviewDenyList?.join('\n');
+	wellKnownWebsites.value = meta.wellKnownWebsites.join('\n');
+	urlPreviewDenyList.value = meta.urlPreviewDenyList.join('\n');
 }
 
 function save() {
@@ -116,7 +123,8 @@ function save() {
 		prohibitedWords: prohibitedWords.value.split('\n'),
 		hiddenTags: hiddenTags.value.split('\n'),
 		preservedUsernames: preservedUsernames.value.split('\n'),
-		urlPreviewDenyList: urlPreviewDenyList.value?.split('\n'),
+		wellKnownWebsites: wellKnownWebsites.value.split('\n'),
+		urlPreviewDenyList: urlPreviewDenyList.value.split('\n'),
 	}).then(() => {
 		fetchInstance(true);
 	});

packages/frontend/src/scripts/warning-external-website.ts

@@ -0,0 +1,33 @@
+import { url as local } from '@/config.js';
+import { instance } from '@/instance.js';
+import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
+
+const isRegExp = /^\/(.+)\/(.*)$/;
+
+export async function warningExternalWebsite(ev: MouseEvent, url: string) {
+	const self = url.startsWith(local);
+	const isWellKnownWebsite = self || instance.wellKnownWebsites.some(expression => {
+		const r = isRegExp.exec(expression);
+		if (r) {
+			return new RegExp(r[1], r[2]).test(url);
+		} else return expression.split(' ').every(keyword => url.includes(keyword));
+	});
+
+	if (!self && !isWellKnownWebsite) {
+		ev.preventDefault();
+		ev.stopPropagation();
+
+		const confirm = await os.confirm({
+			type: 'warning',
+			title: i18n.ts.warningRedirectingExternalWebsiteTitle,
+			text: i18n.tsx.warningRedirectingExternalWebsiteDescription({ url }),
+		});
+
+		if (confirm.canceled) return false;
+
+		window.open(url, '_blank', 'noopener');
+	}
+
+	return true;
+}