add ability to add custom request headers

[elfjes]

I'm looking for a way to customize the DashRenderer request HTTP headers, mainly for authentication purposes. There's a thread on the community forum that wasn't resolved, but otherwise I don't see any discussion, either on GitHub or on the forum. I was wondering, has there been any progress on this? And if not, would you be willing to accept help and/or help me out creating a PR for this?

It looks to me a reasonably straightforward solution would be to modify the handleServerside callback to look something like this:

function handleServerside(
    hooks: any,
    config: any,
    payload: any
): Promise<any> {
    let rawRequest = mergeDeepRight(config.fetch, {
        method: 'POST',
        headers: getCSRFHeader() as any
    });

    if (hooks.request_pre !== null) {
        hooks.request_pre(payload, rawRequest);
    }

    rawRequest.body = JSON.stringify(payload);
    return fetch(
        `${urlBase(config)}_dash-update-component`,
        rawRequest
    ).then(...)
}

and then to modify the request_pre hook to accept an additional parameter.

Alternatives I can think of:

• Expose only the headers as an additional parameter to the request_pre hook.
• Expose the config object to a new (pre-load) hook

What are your thoughts on this?

[elfjes]

Any chance I could get a response on this, or is it better to discuss this on the forum?

[Nicolas-Medina-Teracode]

Hi! Did you end up solving this? I am having the same issue, needing to authenticate my requests and not being able to modify the.

[elfjes]

@Nicolas-Medina-Teracode nope, we decided to go with a different library

[thdrobinson]

Are there any workarounds for doing this?

[Chiragasourabh]

I'm building a Dash app that is running behind an authentication middleware. The bearer token for authentication is accessible from localStorage localStorage.getItem('access_token'). However, the API calls to the _dash-update-component endpoint don't include the Authorization header, only the CSRF header.

I noticed that the handleServerside method in dash_renderer.js (which is available in dash/dash-renderer/build/ path) is responsible for making the API request. While I can modify the JavaScript code to include the Authorization header with the access token stored in localStorage, I'm wondering if there's a more generic solution that doesn't involve modifying the Dash library code directly after installation.

Has anyone else faced this issue before? Is there a recommended best practice for adding the Authorization header to Dash's _dash-update-component API request when using an authentication middleware? I'm hoping for a solution that doesn't involve modifying the Dash library code directly.

Thanks in advance for your help!

[olejorgenb]

At first glance it looks like plotly/dash-renderer#65 should solve this, but looks like the interface ended up not exposing the request object.

My usecase is for the layout request. I'd like to add a header identifying each client uniquely to aid in debugging. I know I can probably do this from the server as well (using eg. a cookie), but I think I would prefer the hooks over wrapping the request flask handler.

[Coding-with-Adam]

hey everyone,
This is not on our roadmap for feature development. But if anyone would like to make a Pull Request, we would consider it.

[DennisSchwartz]

I'm still interested in this. I will try to take a stab at it and report back.