Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IKUpload: How to modify the GET request's header? #101

Closed
devcloser opened this issue Oct 10, 2022 · 6 comments
Closed

IKUpload: How to modify the GET request's header? #101

devcloser opened this issue Oct 10, 2022 · 6 comments

Comments

@devcloser
Copy link

From uploading-files-in-react docs

  • I've created the auth endpoint (express-js)
  • I've specificed the auth endpoint for authenticationEndpoint
  • Image upload is working as expected

However, I have a concern that this is not considered secure as anyone could call the auth endpoint and get a token.

Then, I saw the reply here

    The endpoint is supposed to host on your backend. You can make it secure in a way that no unauthorised user can get token. Similar to how you might be protecting other resources on your application.

Originally posted by @imagekitio in #50 (comment)

So, I protected the auth endpoint, but I could not find a way to modify the authenticationEndpoint GET request's header to pass users Bearer Token along from the client-side.

Any advice, please?

@imagekitio
Copy link
Contributor

I want to understand this and discuss alternatives before committing to this direction. If I understand correctly you are making auth endpoint secure using HTTP auth. Wouldn't it mean that authenticated users will see this Bearer Token, then later issue a request to auth endpoint to get token for upload API outside of your app. Is this Bearer Token unique for each logged-in user in your application.

Not sure but wouldn't it be better and more secure to have some session related checks on this auth endpoint. I am assuming you are already limiting access to certain part of your application and it is not through the Bearer Token (HTTP auth).

@coadtan
Copy link

coadtan commented Nov 16, 2022

Before I begin I have to say that I moved the image upload logic to the server-side (node) instead.

The original question is to find a way to add my JWT (not for uploading the image but to be able to authenticate a request on my backend) to the request header whenImageKit SDK makes a call to a server via authenticationEndpoint .

Why do I want to authenticate the Image Kit auth endpoint? Because I don't want anyone to call that endpoint and retrieve the image kit token.

Not sure if that's clear? Please feel free to let me know.

@michaelt448
Copy link

@imagekitio any development on this? it would be great to be able to insert headers into authentication endpoint requests.

@imagekitio
Copy link
Contributor

@michaelt448 yes. How about we make authentication endpoint an optional parameter and allow token parameter in the upload function payload? If token is provided, that will take precedence and SDK won't call the authentication endpoint to get token. This allows the decoupling of getting token securely in any manner without overcomplicating SDK logic.

@coadtan we recently released V2 version that uses JWT to verify whole payload body except file buffer.

@imagekitio
Copy link
Contributor

Version 2.0.0 of imagekit-javascript SDK is released which fixes this. This SDK will be updated now.

@imagekitio
Copy link
Contributor

Version 3.0.0 released that has a fix for this. We have deprecated the use of the authenticationEndpoint parameter. Instead, the SDK now introduces a new parameter named authenticator. This parameter expects an asynchronous function that resolves with an object containing the necessary security parameters i.e signature, token, and expire.

Here is an example of how you can send any custom header to your backend.

 const authenticator = async () => {
    try {

        // You can also pass headers and validate the request source in the backend, or you can use headers for any other use case.
        const headers = {
          'CustomHeader': 'CustomValue'
        };

        const response = await fetch('server_endpoint', {
            headers
        });

        if (!response.ok) {
            const errorText = await response.text();
            throw new Error(`Request failed with status ${response.status}: ${errorText}`);
        }

        const data = await response.json();
        const { signature, expire, token } = data;
        return { signature, expire, token };
    } catch (error) {
        throw new Error(`Authentication request failed: ${error.message}`);
    }
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants