fix: センシティブな画像をアイコン・バナーに指定できないように

CHANGELOG.md

@@ -1,10 +1,10 @@
 ## Unreleased
 
 ### General
--
+- Fix: センシティブな画像をアイコン・バナーに指定できないように
 
 ### Client
--
+- Enhance: アイコン画像・バナー画像を外せるように
 
 ### Server
 -

locales/index.d.ts

@@ -4984,6 +4984,15 @@ export interface Locale extends ILocale {
      * お問い合わせ
      */
     "inquiry": string;
+    /**
+     * センシティブなメディアは選択できません
+     */
+    "cannotSelectSensitiveMedia": string;
+    /**
+     * 自分でセンシティブ設定を行っていないのにこのエラーが出ている場合、自動判定によりセンシティブなメディアとされている可能性があります。
+     * サーバーの規則に照らして不要な場合は、ファイルのセンシティブ設定を解除してもう一度お試しください。
+     */
+    "cannotSelectSensitiveMediaDescription": string;
     "_delivery": {
         /**
          * 配信状態

locales/ja-JP.yml

@@ -1242,6 +1242,8 @@ keepOriginalFilenameDescription: "この設定をオフにすると、アップ
 noDescription: "説明文はありません"
 alwaysConfirmFollow: "フォローの際常に確認する"
 inquiry: "お問い合わせ"
+cannotSelectSensitiveMedia: "センシティブなメディアは選択できません"
+cannotSelectSensitiveMediaDescription: "自分でセンシティブ設定を行っていないのにこのエラーが出ている場合、自動判定によりセンシティブなメディアとされている可能性があります。\nサーバーの規則に照らして不要な場合は、ファイルのセンシティブ設定を解除してもう一度お試しください。"
 
 _delivery:
   status: "配信状態"

packages/backend/src/server/api/endpoints/i/update.ts

@@ -74,6 +74,18 @@ export const meta = {
 			id: '75aedb19-2afd-4e6d-87fc-67941256fa60',
 		},
 
+		avatarIsSensitive: {
+			message: 'The file specified as an avatar is marked as sensitive.',
+			code: 'AVATAR_IS_SENSITIVE',
+			id: '71bb5e53-4742-4609-b465-36081e131208',
+		},
+
+		bannerIsSensitive: {
+			message: 'The file specified as a banner is marked as sensitive.',
+			code: 'BANNER_IS_SENSITIVE',
+			id: 'e148b34c-9f33-4300-93e0-7817008fb366',
+		},
+
 		noSuchPage: {
 			message: 'No such page.',
 			code: 'NO_SUCH_PAGE',
@@ -326,6 +338,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 
 				if (avatar == null || avatar.userId !== user.id) throw new ApiError(meta.errors.noSuchAvatar);
 				if (!avatar.type.startsWith('image/')) throw new ApiError(meta.errors.avatarNotAnImage);
+				if (avatar.isSensitive) throw new ApiError(meta.errors.avatarIsSensitive);
 
 				updates.avatarId = avatar.id;
 				updates.avatarUrl = this.driveFileEntityService.getPublicUrl(avatar, 'avatar');
@@ -341,6 +354,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 
 				if (banner == null || banner.userId !== user.id) throw new ApiError(meta.errors.noSuchBanner);
 				if (!banner.type.startsWith('image/')) throw new ApiError(meta.errors.bannerNotAnImage);
+				if (banner.isSensitive) throw new ApiError(meta.errors.bannerIsSensitive);
 
 				updates.bannerId = banner.id;
 				updates.bannerUrl = this.driveFileEntityService.getPublicUrl(banner);

packages/frontend/src/components/MkDrive.file.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div
-	:class="[$style.root, { [$style.isSelected]: isSelected }]"
+	:class="[$style.root, { [$style.isSelected]: isSelected, [$style.isDisabled]: isDisabled }]"
 	draggable="true"
 	:title="title"
 	@click="onClick"
@@ -55,9 +55,11 @@ const props = withDefaults(defineProps<{
 	file: Misskey.entities.DriveFile;
 	folder: Misskey.entities.DriveFolder | null;
 	isSelected?: boolean;
+	isDisabled?: boolean;
 	selectMode?: boolean;
 }>(), {
 	isSelected: false,
+	isDisabled: false,
 	selectMode: false,
 });
 
@@ -72,6 +74,8 @@ const isDragging = ref(false);
 const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`);
 
 function onClick(ev: MouseEvent) {
+	if (props.isDisabled) return;
+
 	if (props.selectMode) {
 		emit('chosen', props.file);
 	} else {
@@ -88,6 +92,8 @@ function onContextmenu(ev: MouseEvent) {
 }
 
 function onDragstart(ev: DragEvent) {
+	if (props.isDisabled) return;
+
 	if (ev.dataTransfer) {
 		ev.dataTransfer.effectAllowed = 'move';
 		ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
@@ -173,6 +179,23 @@ function onDragend() {
 			color: #fff;
 		}
 	}
+
+	&.isDisabled {
+		cursor: not-allowed;
+
+		.thumbnail {
+			opacity: 0.5;
+		}
+
+		.name {
+			opacity: 0.5;
+		}
+
+		&:hover,
+		&:active {
+			background: none;
+		}
+	}
 }
 
 .label {

packages/frontend/src/components/MkDrive.vue

@@ -73,6 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:folder="folder"
 					:selectMode="select === 'file'"
 					:isSelected="selectedFiles.some(x => x.id === file.id)"
+					:isDisabled="excludeSensitive && file.isSensitive"
 					@chosen="chooseFile"
 					@dragstart="isDragSource = true"
 					@dragend="isDragSource = false"
@@ -114,9 +115,11 @@ const props = withDefaults(defineProps<{
 	initialFolder?: Misskey.entities.DriveFolder;
 	type?: string;
 	multiple?: boolean;
+	excludeSensitive?: boolean;
 	select?: 'file' | 'folder' | null;
 }>(), {
 	multiple: false,
+	excludeSensitive: false,
 	select: null,
 });
 

packages/frontend/src/components/MkDriveSelectDialog.vue

@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		{{ multiple ? ((type === 'file') ? i18n.ts.selectFiles : i18n.ts.selectFolders) : ((type === 'file') ? i18n.ts.selectFile : i18n.ts.selectFolder) }}
 		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
 	</template>
-	<XDrive :multiple="multiple" :select="type" @changeSelection="onChangeSelection" @selected="ok()"/>
+	<XDrive :multiple="multiple" :excludeSensitive="excludeSensitive" :select="type" @changeSelection="onChangeSelection" @selected="ok()"/>
 </MkModalWindow>
 </template>
 
@@ -34,6 +34,7 @@ import { i18n } from '@/i18n.js';
 withDefaults(defineProps<{
 	type?: 'file' | 'folder';
 	multiple: boolean;
+	excludeSensitive: boolean;
 }>(), {
 	type: 'file',
 });

packages/frontend/src/os.ts

@@ -31,6 +31,7 @@ export const apiWithDialog = (<E extends keyof Misskey.Endpoints = keyof Misskey
 	endpoint: E,
 	data: P = {} as any,
 	token?: string | null | undefined,
+	customErrors?: Record<string, { title?: string; text: string; }>,
 ) => {
 	const promise = misskeyApi(endpoint, data, token);
 	promiseDialog(promise, null, async (err) => {
@@ -67,6 +68,10 @@ export const apiWithDialog = (<E extends keyof Misskey.Endpoints = keyof Misskey
 		} else if (err.code === 'ROLE_PERMISSION_DENIED') {
 			title = i18n.ts.permissionDeniedError;
 			text = i18n.ts.permissionDeniedErrorDescription;
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+		} else if (customErrors && customErrors[err.code] != null) {
+			title = customErrors[err.code].title;
+			text = customErrors[err.code].text;
 		} else if (err.code.startsWith('TOO_MANY')) {
 			title = i18n.ts.youCannotCreateAnymore;
 			text = `${i18n.ts.error}: ${err.id}`;
@@ -82,11 +87,13 @@ export const apiWithDialog = (<E extends keyof Misskey.Endpoints = keyof Misskey
 	});
 
 	return promise;
-}) as typeof misskeyApi;
+});
+
+type Unpromise<T> = T extends Promise<infer U> ? U : never;
 
 export function promiseDialog<T extends Promise<any>>(
 	promise: T,
-	onSuccess?: ((res: any) => void) | null,
+	onSuccess?: ((res: Unpromise<T>) => void) | null,
 	onFailure?: ((err: Misskey.api.APIError) => void) | null,
 	text?: string,
 ): T {
@@ -541,11 +548,12 @@ export async function selectUser(opts: { includeSelf?: boolean; localOnly?: bool
 	});
 }
 
-export async function selectDriveFile(multiple: boolean): Promise<Misskey.entities.DriveFile[]> {
+export async function selectDriveFile(multiple: boolean, excludeSensitive: boolean): Promise<Misskey.entities.DriveFile[]> {
 	return new Promise(resolve => {
 		popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), {
 			type: 'file',
 			multiple,
+			excludeSensitive,
 		}, {
 			done: files => {
 				if (files) {
@@ -556,11 +564,12 @@ export async function selectDriveFile(multiple: boolean): Promise<Misskey.entiti
 	});
 }
 
-export async function selectDriveFolder(multiple: boolean): Promise<Misskey.entities.DriveFolder[]> {
+export async function selectDriveFolder(multiple: boolean, excludeSensitive: boolean): Promise<Misskey.entities.DriveFolder[]> {
 	return new Promise(resolve => {
 		popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), {
 			type: 'folder',
 			multiple,
+			excludeSensitive,
 		}, {
 			done: folders => {
 				if (folders) {

packages/frontend/src/pages/settings/profile.vue

@@ -128,6 +128,7 @@ import { defaultStore } from '@/store.js';
 import { globalEvents } from '@/events.js';
 import MkInfo from '@/components/MkInfo.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 
 const $i = signinRequired();
 
@@ -204,7 +205,26 @@ function save() {
 }
 
 function changeAvatar(ev) {
-	selectFile(ev.currentTarget ?? ev.target, i18n.ts.avatar).then(async (file) => {
+	selectFile(ev.currentTarget ?? ev.target, i18n.ts.avatar, {
+		excludeSensitive: true,
+		additionalMenu: $i.avatarId ? [
+			{ type: 'divider' },
+			{
+				type: 'button',
+				text: i18n.ts.detach,
+				icon: 'ti ti-circle-x',
+				action: () => {
+					os.apiWithDialog('i/update', {
+						avatarId: null,
+					}).then(() => {
+						$i.avatarId = null;
+						$i.avatarUrl = null;
+						globalEvents.emit('requestClearPageCache');
+					});
+				},
+			},
+		] : undefined,
+	}).then(async (file) => {
 		let originalOrCropped = file;
 
 		const { canceled } = await os.confirm({
@@ -220,18 +240,43 @@ function changeAvatar(ev) {
 			});
 		}
 
-		const i = await os.apiWithDialog('i/update', {
+		await os.apiWithDialog('i/update', {
 			avatarId: originalOrCropped.id,
+		}, undefined, {
+			'AVATAR_IS_SENSITIVE': {
+				title: i18n.ts.cannotSelectSensitiveMedia,
+				text: i18n.ts.cannotSelectSensitiveMediaDescription,
+			},
+		}).then(() => {
+			$i.avatarId = originalOrCropped.id;
+			$i.avatarUrl = originalOrCropped.url;
+			globalEvents.emit('requestClearPageCache');
+			claimAchievement('profileFilled');
 		});
-		$i.avatarId = i.avatarId;
-		$i.avatarUrl = i.avatarUrl;
-		globalEvents.emit('requestClearPageCache');
-		claimAchievement('profileFilled');
 	});
 }
 
 function changeBanner(ev) {
-	selectFile(ev.currentTarget ?? ev.target, i18n.ts.banner).then(async (file) => {
+	selectFile(ev.currentTarget ?? ev.target, i18n.ts.banner, {
+		excludeSensitive: true,
+		additionalMenu: $i.bannerId ? [
+			{ type: 'divider' },
+			{
+				type: 'button',
+				text: i18n.ts.detach,
+				icon: 'ti ti-circle-x',
+				action: () => {
+					os.apiWithDialog('i/update', {
+						bannerId: null,
+					}).then(() => {
+						$i.bannerId = null;
+						$i.bannerUrl = null;
+						globalEvents.emit('requestClearPageCache');
+					});
+				},
+			},
+		] : undefined,
+	}).then(async (file) => {
 		let originalOrCropped = file;
 
 		const { canceled } = await os.confirm({
@@ -247,12 +292,18 @@ function changeBanner(ev) {
 			});
 		}
 
-		const i = await os.apiWithDialog('i/update', {
+		await os.apiWithDialog('i/update', {
 			bannerId: originalOrCropped.id,
+		}, undefined, {
+			'BANNER_IS_SENSITIVE': {
+				title: i18n.ts.cannotSelectSensitiveMedia,
+				text: i18n.ts.cannotSelectSensitiveMediaDescription,
+			},
+		}).then(() => {
+			$i.bannerId = originalOrCropped.id;
+			$i.bannerUrl = originalOrCropped.url;
+			globalEvents.emit('requestClearPageCache');
 		});
-		$i.bannerId = i.bannerId;
-		$i.bannerUrl = i.bannerUrl;
-		globalEvents.emit('requestClearPageCache');
 	});
 }