ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Properly enable cors for images by default

Browse Source
This commit is contained in:
schroda
2025-01-26 17:18:27 +01:00
parent a81c3c6afa
commit 3698c19aba
3 changed files with 28 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/lib/requests/RequestManager.ts
View File

@@ -860,7 +860,7 @@ export class RequestManager {
abort(); abort();
} }
private async optionallyDecodeImage(url: string, shouldDecode?: boolean, allowCors?: boolean): Promise<string> { private async optionallyDecodeImage(url: string, shouldDecode?: boolean, disableCors?: boolean): Promise<string> {
if (!shouldDecode) { if (!shouldDecode) {
return url; return url;
} }
@@ -869,7 +869,7 @@ export class RequestManager {
const img = new Image(); const img = new Image();
if (allowCors) { if (!disableCors) {
img.crossOrigin = 'anonymous'; img.crossOrigin = 'anonymous';
} }
img.src = url; img.src = url;
@@ -897,8 +897,8 @@ export class RequestManager {
{ {
priority, priority,
shouldDecode, shouldDecode,
allowCors, disableCors,
}: { priority?: QueuePriority; shouldDecode?: boolean; allowCors?: boolean } = {}, }: { priority?: QueuePriority; shouldDecode?: boolean; disableCors?: boolean } = {},
): ImageRequest { ): ImageRequest {
const imgRequest = new ControlledPromise<string>(); const imgRequest = new ControlledPromise<string>();
imgRequest.promise.catch(() => {}); imgRequest.promise.catch(() => {});
@@ -918,7 +918,7 @@ export class RequestManager {
// throws error in case request was already aborted // throws error in case request was already aborted
await Promise.race([imgRequest.promise, Promise.resolve()]); await Promise.race([imgRequest.promise, Promise.resolve()]);
if (allowCors) { if (!disableCors) {
img.crossOrigin = 'anonymous'; img.crossOrigin = 'anonymous';
} }
img.src = url; img.src = url;
@@ -962,7 +962,11 @@ export class RequestManager {
*/ */
private fetchImageViaFetchApi( private fetchImageViaFetchApi(
url: string, url: string,
{ priority, shouldDecode }: { priority?: QueuePriority; shouldDecode?: boolean } = {}, {
priority,
shouldDecode,
disableCors,
}: { priority?: QueuePriority; shouldDecode?: boolean; disableCors?: boolean } = {},
): ImageRequest { ): ImageRequest {
let objectUrl: string = ''; let objectUrl: string = '';
const { abortRequest, signal } = this.createAbortController(); const { abortRequest, signal } = this.createAbortController();
@@ -982,7 +986,7 @@ export class RequestManager {
.then(async (imageUrl) => { .then(async (imageUrl) => {
objectUrl = imageUrl; objectUrl = imageUrl;
await this.optionallyDecodeImage(imageUrl, shouldDecode); await this.optionallyDecodeImage(imageUrl, shouldDecode, disableCors);
return imageUrl; return imageUrl;
}), }),
@@ -1004,12 +1008,17 @@ export class RequestManager {
*/ */
public requestImage( public requestImage(
url: string, url: string,
options: { priority?: QueuePriority; useFetchApi?: boolean; shouldDecode?: boolean; allowCors?: boolean } = {}, options: {
priority?: QueuePriority;
useFetchApi?: boolean;
shouldDecode?: boolean;
disableCors?: boolean;
} = {},
): ImageRequest { ): ImageRequest {
const finalOptions = { const finalOptions = {
useFetchApi: false, useFetchApi: false,
shouldDecode: false, shouldDecode: false,
allowCors: true, disableCors: false,
...Object.fromEntries(Object.entries(options).filter(([, value]) => value !== undefined)), ...Object.fromEntries(Object.entries(options).filter(([, value]) => value !== undefined)),
}; };

13
src/modules/core/components/SpinnerImage.tsx
View File

@@ -35,7 +35,7 @@ interface IProps {
shouldDecode?: boolean; shouldDecode?: boolean;
useFetchApi?: boolean; useFetchApi?: boolean;
allowCors?: boolean; disableCors?: boolean;
priority?: Priority; priority?: Priority;
@@ -47,7 +47,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
shouldLoad = true, shouldLoad = true,
shouldDecode, shouldDecode,
useFetchApi, useFetchApi,
allowCors, disableCors,
src, src,
alt, alt,
onLoad, onLoad,
@@ -86,7 +86,12 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
return () => {}; return () => {};
} }
const imageRequest = requestManager.requestImage(src, { priority, shouldDecode, useFetchApi, allowCors }); const imageRequest = requestManager.requestImage(src, {
priority,
shouldDecode,
useFetchApi,
disableCors,
});
let cacheTimeout: NodeJS.Timeout; let cacheTimeout: NodeJS.Timeout;
const fetchImage = async () => { const fetchImage = async () => {
@@ -158,7 +163,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
}), }),
]} ]}
ref={imgRef} ref={imgRef}
crossOrigin={allowCors ? 'anonymous' : undefined} crossOrigin={disableCors ? undefined : 'anonymous'}
src={imageSourceUrl} src={imageSourceUrl}
alt={alt} alt={alt}
draggable={false} draggable={false}

2
src/modules/tracker/components/cards/TrackerMangaCard.tsx
View File

@@ -152,7 +152,7 @@ export const TrackerMangaCard = ({
<TrackerMangaCardLink url={manga.trackingUrl}> <TrackerMangaCardLink url={manga.trackingUrl}>
<SpinnerImage <SpinnerImage
useFetchApi={false} useFetchApi={false}
allowCors={false} disableCors
alt={manga.title} alt={manga.title}
src={manga.coverUrl} src={manga.coverUrl}
spinnerStyle={{ width: '100%', height: '100%' }} spinnerStyle={{ width: '100%', height: '100%' }}