From 1f3b1e7074c78a87ee3e7e089f8c1d2eeb2f2a49 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 12 Nov 2022 09:39:11 +0900
Subject: [PATCH] =?UTF-8?q?fix(client):=20=E3=82=A4=E3=83=B3=E3=82=B9?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=82=B9=E3=83=86=E3=82=A3=E3=83=83=E3=82=AB?=
 =?UTF-8?q?=E3=83=BC=E3=81=AEfavicon=E3=82=92=E8=AA=AD=E3=81=BF=E8=BE=BC?=
 =?UTF-8?q?=E3=82=80=E9=9A=9B=E3=81=AB=E5=81=BD=E3=82=B5=E3=82=A4=E3=83=88?=
 =?UTF-8?q?=E8=AD=A6=E5=91=8A=E3=81=8C=E5=87=BA=E3=82=8B=E3=81=93=E3=81=A8?=
 =?UTF-8?q?=E3=81=8C=E3=81=82=E3=82=8B=E3=81=AE=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                     |  1 +
 .../client/src/components/MkCropperDialog.vue    | 16 +++++++---------
 .../client/src/components/MkInstanceTicker.vue   |  7 ++++---
 packages/client/src/scripts/media-proxy.ts       | 13 +++++++++++++
 4 files changed, 25 insertions(+), 12 deletions(-)
 create mode 100644 packages/client/src/scripts/media-proxy.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d7513acdb..92e47077d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ You should also include the user name that made the change.
 
 ### Bugfixes
 - Server: Bug fix for Pinned Users lookup on instance @squidicuzz
+- Client: インスタンスティッカーのfaviconを読み込む際に偽サイト警告が出ることがあるのを修正 @syuilo
 
 ## 12.119.0 (2022/09/10)
 
diff --git a/packages/client/src/components/MkCropperDialog.vue b/packages/client/src/components/MkCropperDialog.vue
index 9a09834bf..4b05a5125 100644
--- a/packages/client/src/components/MkCropperDialog.vue
+++ b/packages/client/src/components/MkCropperDialog.vue
@@ -34,9 +34,9 @@ import XModalWindow from '@/components/MkModalWindow.vue';
 import * as os from '@/os';
 import { $i } from '@/account';
 import { defaultStore } from '@/store';
-import { apiUrl, url } from '@/config';
-import { query } from '@/scripts/url';
+import { apiUrl } from '@/config';
 import { i18n } from '@/i18n';
+import { getProxiedImageUrl } from '@/scripts/media-proxy';
 
 const emit = defineEmits<{
 	(ev: 'ok', cropped: misskey.entities.DriveFile): void;
@@ -49,9 +49,7 @@ const props = defineProps<{
 	aspectRatio: number;
 }>();
 
-const imgUrl = `${url}/proxy/image.webp?${query({
-	url: props.file.url,
-})}`;
+const imgUrl = getProxiedImageUrl(props.file.url);
 let dialogEl = $ref<InstanceType<typeof XModalWindow>>();
 let imgEl = $ref<HTMLImageElement>();
 let cropper: Cropper | null = null;
@@ -72,10 +70,10 @@ const ok = async () => {
 				method: 'POST',
 				body: formData,
 			})
-			.then(response => response.json())
-			.then(f => {
-				res(f);
-			});
+				.then(response => response.json())
+				.then(f => {
+					res(f);
+				});
 		});
 	});
 
diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue
index d9f196f88..a5ff656f6 100644
--- a/packages/client/src/components/MkInstanceTicker.vue
+++ b/packages/client/src/components/MkInstanceTicker.vue
@@ -9,6 +9,7 @@
 import { } from 'vue';
 import { instanceName } from '@/config';
 import { instance as Instance } from '@/instance';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
 
 const props = defineProps<{
 	instance?: {
@@ -20,15 +21,15 @@ const props = defineProps<{
 
 // if no instance data is given, this is for the local instance
 const instance = props.instance ?? {
-	faviconUrl: Instance.iconUrl || Instance.faviconUrl || '/favicon.ico',
+	faviconUrl: getProxiedImageUrlNullable(Instance.iconUrl) ?? getProxiedImageUrlNullable(Instance.faviconUrl) ?? '/favicon.ico',
 	name: instanceName,
-	themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement)?.content
+	themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement).content,
 };
 
 const themeColor = instance.themeColor ?? '#777777';
 
 const bg = {
-	background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`
+	background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`,
 };
 </script>
 
diff --git a/packages/client/src/scripts/media-proxy.ts b/packages/client/src/scripts/media-proxy.ts
new file mode 100644
index 000000000..76e20786f
--- /dev/null
+++ b/packages/client/src/scripts/media-proxy.ts
@@ -0,0 +1,13 @@
+import { query } from '@/scripts/url';
+import { url } from '@/config';
+
+export function getProxiedImageUrl(imageUrl: string): string {
+	return `${url}/proxy/image.webp?${query({
+		url: imageUrl,
+	})}`;
+}
+
+export function getProxiedImageUrlNullable(imageUrl: string | null | undefined): string | null {
+	if (imageUrl == null) return null;
+	return getProxiedImageUrl(imageUrl);
+}