From 12932d2831213bb2a60949f8d388fc2f6bd64ba3 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 28 Feb 2023 17:14:23 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A4=96=E9=83=A8=E3=83=A1=E3=83=87?=
 =?UTF-8?q?=E3=82=A3=E3=82=A2=E3=83=97=E3=83=AD=E3=82=AD=E3=82=B7=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E6=99=82=E3=81=AB=E3=82=A2=E3=83=90=E3=82=BF=E3=83=BC?=
 =?UTF-8?q?=E3=82=AF=E3=83=AD=E3=83=83=E3=83=97=E3=81=8C=E3=81=A7=E3=81=8D?=
 =?UTF-8?q?=E3=81=AA=E3=81=84=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=20(#10142)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* wip

* fix

* Update packages/frontend/src/scripts/media-proxy.ts

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 .../backend/src/server/FileServerService.ts    |  5 ++++-
 .../src/components/MkCropperDialog.vue         |  4 ++--
 packages/frontend/src/scripts/media-proxy.ts   | 18 +++++++++---------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/backend/src/server/FileServerService.ts b/packages/backend/src/server/FileServerService.ts
index c12ae9b82..e5eefac1f 100644
--- a/packages/backend/src/server/FileServerService.ts
+++ b/packages/backend/src/server/FileServerService.ts
@@ -226,7 +226,10 @@ export class FileServerService {
 			return;
 		}
 
-		if (this.config.externalMediaProxyEnabled) {
+		// アバタークロップなど、どうしてもオリジンである必要がある場合
+		const mustOrigin = 'origin' in request.query;
+
+		if (this.config.externalMediaProxyEnabled && !mustOrigin) {
 			// 外部のメディアプロキシが有効なら、そちらにリダイレクト
 
 			reply.header('Cache-Control', 'public, max-age=259200'); // 3 days
diff --git a/packages/frontend/src/components/MkCropperDialog.vue b/packages/frontend/src/components/MkCropperDialog.vue
index d1b5cc511..043a614e4 100644
--- a/packages/frontend/src/components/MkCropperDialog.vue
+++ b/packages/frontend/src/components/MkCropperDialog.vue
@@ -18,7 +18,7 @@
 				</div>
 			</Transition>
 			<div class="container">
-				<img ref="imgEl" :src="imgUrl" style="display: none;" crossorigin="anonymous" @load="onImageLoad">
+				<img ref="imgEl" :src="imgUrl" style="display: none;" @load="onImageLoad">
 			</div>
 		</div>
 	</template>
@@ -49,7 +49,7 @@ const props = defineProps<{
 	aspectRatio: number;
 }>();
 
-const imgUrl = getProxiedImageUrl(props.file.url);
+const imgUrl = getProxiedImageUrl(props.file.url, undefined, true);
 let dialogEl = $shallowRef<InstanceType<typeof MkModalWindow>>();
 let imgEl = $shallowRef<HTMLImageElement>();
 let cropper: Cropper | null = null;
diff --git a/packages/frontend/src/scripts/media-proxy.ts b/packages/frontend/src/scripts/media-proxy.ts
index 274e96e0a..2fe5bdcf8 100644
--- a/packages/frontend/src/scripts/media-proxy.ts
+++ b/packages/frontend/src/scripts/media-proxy.ts
@@ -1,20 +1,20 @@
-import { query, appendQuery } from '@/scripts/url';
+import { query } from '@/scripts/url';
 import { url } from '@/config';
 import { instance } from '@/instance';
 
-export function getProxiedImageUrl(imageUrl: string, type?: 'preview'): string {
-	if (imageUrl.startsWith(instance.mediaProxy + '/') || imageUrl.startsWith('/proxy/')) {
-		// もう既にproxyっぽそうだったらsearchParams付けるだけ
-		return appendQuery(imageUrl, query({
-			fallback: '1',
-			...(type ? { [type]: '1' } : {}),
-		}));
+export function getProxiedImageUrl(imageUrl: string, type?: 'preview', mustOrigin: boolean = false): string {
+	const localProxy = `${url}/proxy`;
+
+	if (imageUrl.startsWith(instance.mediaProxy + '/') || imageUrl.startsWith('/proxy/') || imageUrl.startsWith(localProxy + '/')) {
+		// もう既にproxyっぽそうだったらurlを取り出す
+		imageUrl = (new URL(imageUrl)).searchParams.get('url') ?? imageUrl;
 	}
 
-	return `${instance.mediaProxy}/image.webp?${query({
+	return `${mustOrigin ? localProxy : instance.mediaProxy}/image.webp?${query({
 		url: imageUrl,
 		fallback: '1',
 		...(type ? { [type]: '1' } : {}),
+		...(mustOrigin ? { origin: '1' } : {}),
 	})}`;
 }