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

packages/backend/migration/1711008460816-external-website-warn.js

@@ -0,0 +1,11 @@
+export class ExternalWebsiteWarn1711008460816 {
+    name = 'ExternalWebsiteWarn1711008460816'
+
+    async up(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "meta" ADD "wellKnownWebsites" character varying(3072) array NOT NULL DEFAULT '{}'`);
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "wellKnownWebsites"`);
+    }
+}

packages/backend/src/core/entities/MetaEntityService.ts

@@ -99,6 +99,7 @@ export class MetaEntityService {
 				imageUrl: ad.imageUrl,
 				dayOfWeek: ad.dayOfWeek,
 			})),
+			wellKnownWebsites: instance.wellKnownWebsites,
 			notesPerOneAd: instance.notesPerOneAd,
 			enableEmail: instance.enableEmail,
 			enableServiceWorker: instance.enableServiceWorker,

packages/backend/src/models/Meta.ts

@@ -594,6 +594,11 @@ export class MiMeta {
 	})
 	public notesPerOneAd: number;
 
+	@Column('varchar', {
+		length: 3072, array: true, default: '{}',
+	})
+	public wellKnownWebsites: string[];
+
 	@Column('varchar', {
 		length: 3072, array: true, default: '{}',
 	})

packages/backend/src/models/json-schema/meta.ts

@@ -183,6 +183,14 @@ export const packedMetaLiteSchema = {
 				},
 			},
 		},
+		wellKnownWebsites: {
+			type: 'array',
+			optional: false, nullable: false,
+			items: {
+				type: 'string',
+				optional: false, nullable: false,
+			},
+		},
 		notesPerOneAd: {
 			type: 'number',
 			optional: false, nullable: false,

packages/backend/src/server/api/endpoints/admin/meta.ts

@@ -381,9 +381,17 @@ export const meta = {
 				type: 'number',
 				optional: false, nullable: false,
 			},
+			wellKnownWebsites: {
+				type: 'array',
+				optional: false, nullable: false,
+				items: {
+					type: 'string',
+					optional: false, nullable: false,
+				},
+			},
 			urlPreviewDenyList: {
 				type: 'array',
-				optional: true, nullable: false,
+				optional: false, nullable: false,
 				items: {
 					type: 'string',
 					optional: false, nullable: false,
@@ -602,6 +610,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				perRemoteUserUserTimelineCacheMax: instance.perRemoteUserUserTimelineCacheMax,
 				perUserHomeTimelineCacheMax: instance.perUserHomeTimelineCacheMax,
 				perUserListTimelineCacheMax: instance.perUserListTimelineCacheMax,
+				wellKnownWebsites: instance.wellKnownWebsites,
 				notesPerOneAd: instance.notesPerOneAd,
 				urlPreviewDenyList: instance.urlPreviewDenyList,
 				featuredGameChannels: instance.featuredGameChannels,

packages/backend/src/server/api/endpoints/admin/update-meta.ts

@@ -155,6 +155,11 @@ export const paramDef = {
 				type: 'string',
 			},
 		},
+		wellKnownWebsites: {
+			type: 'array', nullable: true, items: {
+				type: 'string',
+			},
+		},
 		urlPreviewDenyList: {
 			type: 'array', nullable: true, items: {
 				type: 'string',
@@ -220,6 +225,10 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				}).map(x => x.toLowerCase());
 			}
 
+			if (Array.isArray(ps.wellKnownWebsites)) {
+				set.wellKnownWebsites = ps.wellKnownWebsites.filter(Boolean);
+			}
+
 			if (Array.isArray(ps.urlPreviewDenyList)) {
 				set.urlPreviewDenyList = ps.urlPreviewDenyList.filter(Boolean);
 			}

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;
+}

packages/misskey-js/src/autogen/types.ts

@@ -4991,6 +4991,7 @@ export type components = {
           imageUrl: string;
           dayOfWeek: number;
         })[];
+      wellKnownWebsites: string[];
       /** @default 0 */
       notesPerOneAd: number;
       enableEmail: boolean;
@@ -5181,7 +5182,8 @@ export type operations = {
             perUserHomeTimelineCacheMax: number;
             perUserListTimelineCacheMax: number;
             notesPerOneAd: number;
-            urlPreviewDenyList?: string[];
+            wellKnownWebsites: string[];
+            urlPreviewDenyList: string[];
             featuredGameChannels: string[];
             backgroundImageUrl: string | null;
             deeplAuthKey: string | null;
@@ -9657,6 +9659,7 @@ export type operations = {
           notesPerOneAd?: number;
           silencedHosts?: string[] | null;
           sensitiveMediaHosts?: string[] | null;
+          wellKnownWebsites?: string[] | null;
           urlPreviewDenyList?: string[] | null;
           featuredGameChannels?: string[] | null;
         };