heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

fix: 外部メディアプロキシ使用時にアバタークロップができない問題を修正 (#10142)

Browse source 
* 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>
This commit is contained in:
tamaina 2023-02-28 17:14:23 +09:00 committed by GitHub
parent 1ba848e5f5
commit 12932d2831
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/backend/src/server/FileServerService.ts
View file

@ -226,7 +226,10 @@ export class FileServerService {
return; 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 reply.header('Cache-Control', 'public, max-age=259200'); // 3 days

4
packages/frontend/src/components/MkCropperDialog.vue
View file

@ -18,7 +18,7 @@
</div> </div>
</Transition> </Transition>
<div class="container"> <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>
</div> </div>
</template> </template>
@ -49,7 +49,7 @@ const props = defineProps<{
aspectRatio: number; aspectRatio: number;
}>(); }>();
const imgUrl = getProxiedImageUrl(props.file.url); const imgUrl = getProxiedImageUrl(props.file.url, undefined, true);
let dialogEl = $shallowRef<InstanceType<typeof MkModalWindow>>(); let dialogEl = $shallowRef<InstanceType<typeof MkModalWindow>>();
let imgEl = $shallowRef<HTMLImageElement>(); let imgEl = $shallowRef<HTMLImageElement>();
let cropper: Cropper | null = null; let cropper: Cropper | null = null;

18
packages/frontend/src/scripts/media-proxy.ts
View file

@ -1,20 +1,20 @@
import { query, appendQuery } from '@/scripts/url'; import { query } from '@/scripts/url';
import { url } from '@/config'; import { url } from '@/config';
import { instance } from '@/instance'; import { instance } from '@/instance';
export function getProxiedImageUrl(imageUrl: string, type?: 'preview'): string { export function getProxiedImageUrl(imageUrl: string, type?: 'preview', mustOrigin: boolean = false): string {
if (imageUrl.startsWith(instance.mediaProxy + '/') || imageUrl.startsWith('/proxy/')) { const localProxy = `${url}/proxy`;
// もう既にproxyっぽそうだったらsearchParams付けるだけ
return appendQuery(imageUrl, query({ if (imageUrl.startsWith(instance.mediaProxy + '/') || imageUrl.startsWith('/proxy/') || imageUrl.startsWith(localProxy + '/')) {
fallback: '1', // もう既にproxyっぽそうだったらurlを取り出す
...(type ? { [type]: '1' } : {}), imageUrl = (new URL(imageUrl)).searchParams.get('url') ?? imageUrl;
}));
} }
return `${instance.mediaProxy}/image.webp?${query({ return `${mustOrigin ? localProxy : instance.mediaProxy}/image.webp?${query({
url: imageUrl, url: imageUrl,
fallback: '1', fallback: '1',
...(type ? { [type]: '1' } : {}), ...(type ? { [type]: '1' } : {}),
...(mustOrigin ? { origin: '1' } : {}),
})}`; })}`;
} }