fix(client): インスタンスティッカーのfaviconを読み込む際に偽サイト警告が出ることがあるのを修正

This commit is contained in:
syuilo 2022-11-12 09:39:11 +09:00
parent 8935eaec3b
commit 1f3b1e7074
4 changed files with 25 additions and 12 deletions

View file

@ -20,6 +20,7 @@ You should also include the user name that made the change.
### Bugfixes ### Bugfixes
- Server: Bug fix for Pinned Users lookup on instance @squidicuzz - Server: Bug fix for Pinned Users lookup on instance @squidicuzz
- Client: インスタンスティッカーのfaviconを読み込む際に偽サイト警告が出ることがあるのを修正 @syuilo
## 12.119.0 (2022/09/10) ## 12.119.0 (2022/09/10)

View file

@ -34,9 +34,9 @@ import XModalWindow from '@/components/MkModalWindow.vue';
import * as os from '@/os'; import * as os from '@/os';
import { $i } from '@/account'; import { $i } from '@/account';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import { apiUrl, url } from '@/config'; import { apiUrl } from '@/config';
import { query } from '@/scripts/url';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { getProxiedImageUrl } from '@/scripts/media-proxy';
const emit = defineEmits<{ const emit = defineEmits<{
(ev: 'ok', cropped: misskey.entities.DriveFile): void; (ev: 'ok', cropped: misskey.entities.DriveFile): void;
@ -49,9 +49,7 @@ const props = defineProps<{
aspectRatio: number; aspectRatio: number;
}>(); }>();
const imgUrl = `${url}/proxy/image.webp?${query({ const imgUrl = getProxiedImageUrl(props.file.url);
url: props.file.url,
})}`;
let dialogEl = $ref<InstanceType<typeof XModalWindow>>(); let dialogEl = $ref<InstanceType<typeof XModalWindow>>();
let imgEl = $ref<HTMLImageElement>(); let imgEl = $ref<HTMLImageElement>();
let cropper: Cropper | null = null; let cropper: Cropper | null = null;
@ -72,10 +70,10 @@ const ok = async () => {
method: 'POST', method: 'POST',
body: formData, body: formData,
}) })
.then(response => response.json()) .then(response => response.json())
.then(f => { .then(f => {
res(f); res(f);
}); });
}); });
}); });

View file

@ -9,6 +9,7 @@
import { } from 'vue'; import { } from 'vue';
import { instanceName } from '@/config'; import { instanceName } from '@/config';
import { instance as Instance } from '@/instance'; import { instance as Instance } from '@/instance';
import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
const props = defineProps<{ const props = defineProps<{
instance?: { instance?: {
@ -20,15 +21,15 @@ const props = defineProps<{
// if no instance data is given, this is for the local instance // if no instance data is given, this is for the local instance
const instance = props.instance ?? { const instance = props.instance ?? {
faviconUrl: Instance.iconUrl || Instance.faviconUrl || '/favicon.ico', faviconUrl: getProxiedImageUrlNullable(Instance.iconUrl) ?? getProxiedImageUrlNullable(Instance.faviconUrl) ?? '/favicon.ico',
name: instanceName, 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 themeColor = instance.themeColor ?? '#777777';
const bg = { const bg = {
background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)` background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`,
}; };
</script> </script>

View file

@ -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);
}