Implementing JWT Token with every request

[Cedric E]

Hi,

I found a similar thread in Angular regarding my requirement. I've also tried adding the token just like what is stated from that thread. However, when I checked the request header, it seems like it is not appending the token. Is this also implemented in React?

Angular Reference: link

Sample code:

import React, { Component } from 'react';

import { FileManagerComponent, Inject, NavigationPane, DetailsView, Toolbar } from '@syncfusion/ej2-react-filemanager';

import { API } from './API';

import { getAccessToken } from './service/Authentication';

export class FileArchive extends Component {

    async beforeSend(args) {

        const token = await getAccessToken();

        args.ajaxSettings.beforeSend = function(args) {

            args.httpRequest.setRequestHeader("Authorization", token);

        }

    }

    render() {

        return (

            <div>

                <FileManagerComponent id="file-archive" ajaxSettings={{

                    url: `${API.Url}`,

                    downloadUrl: `${API.DownloadUrl}`,

                    uploadUrl: `${API.UploadUrl}`,

                    getImageUrl: `${API.GetImageUrl}`

                }} beforeSend={this.beforeSend.bind(this)}>

                    <Inject services={[ NavigationPane, DetailsView, Toolbar]} />

                </FileManagerComponent>

            </div>

        )

    }

}

export default FileArchive;

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Cedric, 

 

Greetings from Syncfusion support. 

 

We can send the JWT token in every request of React FileManager except (Download file operations). We have prepared a simple sample with JWT token for your convenience. 

 

https://stackblitz.com/edit/react-cybqvy-4rp8un?file=index.js  

 

Output: 

 

 

 

 

We suggest you check out the following forum to know more about sending JWT token in FileManager request headers of every file operation in FileManager. 

 

https://www.syncfusion.com/forums/144270/how-to-implement-jwt-token-send-with-every-filemanager-request  

 

Please, get back to us if you need any further assistance. 

 

Regards, 

Shameer Ali Baig S. 

[Luke Mitchell]

Why would this component be built in such a way that it is not possible to easily authorize all of its requests? Security should be the number one priority. It is as almost as if it was assumed that everyone would be using this for publicly available filesystems or something.

I've been able to use the workaround provided for the file operations URL (the "beforeSend" method) but the workaround for the download URL apparently affects performance and the URL for downloading images would have to have the token provided as a query parameter... This is not a good practice at all and is very insecure.

Do you have plans to address this issue? It should be first priority to build something where all requests can be authorized.

Thanks.

[Sowmiya Padmanaban]

 

Hi Luke Mitchell,  

 

Based on the current implementation of FileManager component, we have used form submit for download operations of FileManager component and not a ajax request. So, we can’t add the JWT token with this request. However, you can add the custom data to the download operations using beforeDownload event. 

 

Please, refer the below forum link for beforeDownload operations. 

 

https://www.syncfusion.com/forums/157578/customization-beyond-basic-implementations-source-customization 

 

However, we have used Query parameter for GetImage operations of FileManager component. Other than the two operations ( Download, GetImage), you can send the JWT token using beforeSend event of FileManager component. 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Luke Mitchell]

 

Hi Luke Mitchell,  

 

Based on the current implementation of FileManager component, we have used form submit for download operations of FileManager component and not a ajax request. So, we can’t add the JWT token with this request. However, you can add the custom data to the download operations using beforeDownload event. 

 

Please, refer the below forum link for beforeDownload operations. 

 

https://www.syncfusion.com/forums/157578/customization-beyond-basic-implementations-source-customization 

 

However, we have used Query parameter for GetImage operations of FileManager component. Other than the two operations ( Download, GetImage), you can send the JWT token using beforeSend event of FileManager component. 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

When do you plan on fixing the implementation of the file manager to allow for easily setting headers? Providing a token as a query param for GetImageUrl is bad security and not good practice. Users should be able to set headers for all requests that this component makes very easily.

I must say, our team purchased a license for Syncfusion solely for this component and I'm not impressed with its design for not taking security and private filesystems into account.

Please escalate this issue if you can and fix this component to allow for properly settings headers for all requests.

[Keerthana Rajendran]

Hi Luke, 

 

We have validated your concerns with the FileManager component. We would like to let you know that, all the file operations in FileManager is being performed in a secured way. To pass different token values for each request based on user’s requirement, we have provided beforeSend event and this is the solution to pass token. 

 

We have used GetImage operation to show image preview in LargeIcons view. We have not used Ajax for this action and if this is not required in your end, you can also disable the GetImage option using showThumbanil property(defaults to true)  to prevent the request sent to fetch the image.  

 

As mentioned earlier, we have used the form option for downloading a file from the file manager. Here, you are unable to add the authorization header. To achieve your requirement, you can also cancel our default download actions using beforeDownload event and perform custom download based on your scenario.  

 

Please let us know if you need further assistance.  

 

Regards, 

Keerthana.