CORS issues when fetching EMBY images

[VicMoore 558]

 

I have written a tool for editing Emby images (Primary, Logo, and Backdrop) and have run into cors problems when trying to modify or save these images.  I fetch the images via the Emby API and display them on a Javascript canvas.  When I extract the image from the canvas I get a "tainted image error."

        Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

I am using the Javascript download program below.  How do I modify this code to work with Emby so that "cors"  works and allows me to use the image I fetch?  

Vic

 

 

async function download(url, callback, options) {
    let myHeaders = new Headers();
    myHeaders.append('pragma', 'no-store');
    myHeaders.append('cache-control', 'no-store');   // reload, no-store, no-cache

    let myRequest = new Request(url, {
        method: 'GET',
        //headers: myHeaders,
        mode:   'cors',
        //cache: 'no-store'
    });

    let data = await (await fetch(myRequest).catch(handleErr)).json();

    if(data.code && data.code==400) {
        console.log("=== Error 400 ",data.code);
    } else {
        //console.log("=== Fetched Obj = ",data);
        callback(data, options);
    };

    function handleErr(err) {
        let resp = new Response(
            JSON.stringify({
                code: 400,
                message: "Error"
            })
        );
        return resp;
    };
};
 

 

[Luke 37071]

Did you try removing the mode param, or isn't there a no-cors option on it if I recall?

[VicMoore 558]

tried both and neither worked.

Vic

[VicMoore 558]

Would it be possible to add an API to set the HTTP server's CORS headers?

Vic

[Luke 37071]

I don't think that's necessary because it already does. I'll have to look at what the web app is doing.

[VicMoore 558]

The tool is attached. Sign-on to your emby server, navigate to a movie and click on it. Select edit and the movie metadata editor will come up. now click edit image.  The image editor experiences the CORS problem.

Vic

 

tool - luke.zip

Edited December 24, 2022 by VicMoore

[Cheesegeezer 3086]

Unfortunately Vic its a security feature in browsers now  because Javascripts are readable by every browser. Https would work. Alternatively you could use nodeJS which would also get you round the problem.

 

i have had issues before and its a silly one that i forgot to add the http:// to the beginning of the request. That always threw the CORS error too.

 

[VicMoore 558]

Thanks Cheesegeezer for the info.  If I understand right, and I frequently don't, converting the Emby server to HTTPS will solve the problem?  

I checked and I always add the HTTP:// to my requests. Thanks for pointing out this possible problem.

Vic

[Cheesegeezer 3086]

49 minutes ago, VicMoore said:

Thanks Cheesegeezer for the info.  If I understand right, and I frequently don't, converting the Emby server to HTTPS will solve the problem?

yep sure would because its secure. If you noticed before with swagger and the api, in order to access the api, after the CORS security was introduced, we had to change the http physical swagger address to https and then it would work.

cors is only enforced when not accessing local addresses and by that i mean if you test on same server that is hosted on same dev laptop, it will be fine, but accessing another address on the network will fire up the cors issue. 

49 minutes ago, VicMoore said:

I checked and I always add the HTTP:// to my requests. Thanks for pointing out this possible problem.

Vic

Yeah it killed me for days wondering why lol then i posted here in the dev section and someone kindly pointed that out to me and all was good. 
 

merry Christmas Vic and hope you have a good ones.

[VicMoore 558]

Thanks Cheesegeezer

I will try to convert to https.  It will be a learning experience.

If you have a spare moment try the app I posted above and let me know if the image editor works when you are running HTTPS.  I dont have the save keys enabled so it will not save anything.

Merry Christmas,   Vic

Edited December 24, 2022 by VicMoore

[Cheesegeezer 3086]

2 hours ago, VicMoore said:

Thanks Cheesegeezer

I will try to convert to https.  It will be a learning experience.

If you have a spare moment try the app I posted above and let me know if the image editor works when you are running HTTPS.  I dont have the save keys enabled so it will not save anything.

Merry Christmas,   Vic

I will for sure fire it up, but wont be till 27th, someone invented Xmas and we now have to cook for a Roman legion these days lol  

have a good one and catch you on the flip side

[Luke 37071]

If you want to mirror what our javascript does, try removing mode from your fetch requests and instead specfying:

credentials: 'same-origin'

 

[VicMoore 558]

Luke, I tried your suggestion and it didn't work.

Vic

async function download(url, callback, options) {
    let myHeaders = new Headers();
    myHeaders.append('pragma', 'no-store');
    myHeaders.append('cache-control', 'no-store');   // reload, no-store, no-cache

    let myRequest = new Request(url, {
        method: "GET",
        credentials: 'same-origin'
        //headers: myHeaders,
        //mode:   "cors"
        //cache: 'no-store'
    });

    let data = await (await fetch(myRequest).catch(handleErr)).json();

    if(data.code && data.code==400) {
        console.log("=== Error 400 ",data.code);
    } else {
        //console.log("=== Fetched Obj = ",data);
        callback(data, options);
    };

    function handleErr(err) {
        let resp = new Response(
            JSON.stringify({
                code: 400,
                message: "Error"
            })
        );
        return resp;
    };
};

Edited December 26, 2022 by VicMoore

[roaku 795]

Have you tried the recommendations here?

https://stackoverflow.com/questions/25753754/canvas-todataurl-security-error-the-operation-is-insecure

[VicMoore 558]

Thanks Roaku for the link.  I tried every proposed solution. None worked.

Vic

[Cheesegeezer 3086]

7 hours ago, VicMoore said:

Thanks Roaku for the link.  I tried every proposed solution. None worked.

Vic

Hi Vic, you have an issue with your url call, it should not start with File:// this is why the cors error is being triggered.

double check it. In fact log the call(GET) to the url to console so you can see exactly what is being sent.

[Cheesegeezer 3086]

@VicMoore

This may have some info in that could help you also.

 

[VicMoore 558]

i will check it ASAP

vic