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>(); let imgEl = $ref(); 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)`, }; 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); +}