Properly enable cors for images by default

2025-01-26 17:18:27 +01:00
parent a81c3c6afa
commit 3698c19aba
3 changed files with 28 additions and 14 deletions
--- a/src/lib/requests/RequestManager.ts
+++ b/src/lib/requests/RequestManager.ts
@@ -860,7 +860,7 @@ export class RequestManager {
        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) {
            return url;
        }
@@ -869,7 +869,7 @@ export class RequestManager {

        const img = new Image();

-        if (allowCors) {
+        if (!disableCors) {
            img.crossOrigin = 'anonymous';
        }
        img.src = url;
@@ -897,8 +897,8 @@ export class RequestManager {
        {
            priority,
            shouldDecode,
-            allowCors,
-        }: { priority?: QueuePriority; shouldDecode?: boolean; allowCors?: boolean } = {},
+            disableCors,
+        }: { priority?: QueuePriority; shouldDecode?: boolean; disableCors?: boolean } = {},
    ): ImageRequest {
        const imgRequest = new ControlledPromise<string>();
        imgRequest.promise.catch(() => {});
@@ -918,7 +918,7 @@ export class RequestManager {
                // throws error in case request was already aborted
                await Promise.race([imgRequest.promise, Promise.resolve()]);

-                if (allowCors) {
+                if (!disableCors) {
                    img.crossOrigin = 'anonymous';
                }
                img.src = url;
@@ -962,7 +962,11 @@ export class RequestManager {
     */
    private fetchImageViaFetchApi(
        url: string,
-        { priority, shouldDecode }: { priority?: QueuePriority; shouldDecode?: boolean } = {},
+        {
+            priority,
+            shouldDecode,
+            disableCors,
+        }: { priority?: QueuePriority; shouldDecode?: boolean; disableCors?: boolean } = {},
    ): ImageRequest {
        let objectUrl: string = '';
        const { abortRequest, signal } = this.createAbortController();
@@ -982,7 +986,7 @@ export class RequestManager {
                    .then(async (imageUrl) => {
                        objectUrl = imageUrl;

-                        await this.optionallyDecodeImage(imageUrl, shouldDecode);
+                        await this.optionallyDecodeImage(imageUrl, shouldDecode, disableCors);

                        return imageUrl;
                    }),
@@ -1004,12 +1008,17 @@ export class RequestManager {
     */
    public requestImage(
        url: string,
-        options: { priority?: QueuePriority; useFetchApi?: boolean; shouldDecode?: boolean; allowCors?: boolean } = {},
+        options: {
+            priority?: QueuePriority;
+            useFetchApi?: boolean;
+            shouldDecode?: boolean;
+            disableCors?: boolean;
+        } = {},
    ): ImageRequest {
        const finalOptions = {
            useFetchApi: false,
            shouldDecode: false,
-            allowCors: true,
+            disableCors: false,
            ...Object.fromEntries(Object.entries(options).filter(([, value]) => value !== undefined)),
        };

--- a/src/modules/core/components/SpinnerImage.tsx
+++ b/src/modules/core/components/SpinnerImage.tsx
@@ -35,7 +35,7 @@ interface IProps {

    shouldDecode?: boolean;
    useFetchApi?: boolean;
-    allowCors?: boolean;
+    disableCors?: boolean;

    priority?: Priority;

@@ -47,7 +47,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
        shouldLoad = true,
        shouldDecode,
        useFetchApi,
-        allowCors,
+        disableCors,
        src,
        alt,
        onLoad,
@@ -86,7 +86,12 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
            return () => {};
        }

-        const imageRequest = requestManager.requestImage(src, { priority, shouldDecode, useFetchApi, allowCors });
+        const imageRequest = requestManager.requestImage(src, {
+            priority,
+            shouldDecode,
+            useFetchApi,
+            disableCors,
+        });
        let cacheTimeout: NodeJS.Timeout;

        const fetchImage = async () => {
@@ -158,7 +163,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
                        }),
                    ]}
                    ref={imgRef}
-                    crossOrigin={allowCors ? 'anonymous' : undefined}
+                    crossOrigin={disableCors ? undefined : 'anonymous'}
                    src={imageSourceUrl}
                    alt={alt}
                    draggable={false}
--- a/src/modules/tracker/components/cards/TrackerMangaCard.tsx
+++ b/src/modules/tracker/components/cards/TrackerMangaCard.tsx
@@ -152,7 +152,7 @@ export const TrackerMangaCard = ({
                                <TrackerMangaCardLink url={manga.trackingUrl}>
                                    <SpinnerImage
                                        useFetchApi={false}
-                                        allowCors={false}
+                                        disableCors
                                        alt={manga.title}
                                        src={manga.coverUrl}
                                        spinnerStyle={{ width: '100%', height: '100%' }}