How to add additional Header to all Requests (or at least to a Button)?

Dash Python
1

Hi,

I want to run a Dash application on a platform that - for security reasons - wants me to send an additional Header with each request made by Dash (such as clicking on a Button).

Technically the platform sets a cookie and wants me to send the content of the cookie in the request header.

Unfortunately I did not find any Example how to do this with Dash (or Flask or React.js).

Thanks in Advance
Hans

Extract X-XSRF-TOKEN from cookie and add to header in POST - 403 error
2

This isn’t possible right now but we’re planning on adding support for this. This issue in particular has been sponsored by an organization, so we are looking at getting it in by around September. You can follow the progress here: https://github.com/plotly/dash-renderer/issues/65

3

I have a similar requirement - now that this feature has been merged are there any examples demonstrating how to achieve this? From what I understand I will need to do something along the lines of:

app.renderer = """
var renderer = new DashRenderer({
    request_pre: (payload) => {
        // some code here to set header
        console.log(payload);
    },
})
"""
4

Yeah… looks like the API ended up not exposing the request object. ([Feature Request] Ability to add custom request headers · Issue #1329 · plotly/dash · GitHub)

5

Actually, every request sent by plotly dash front end to its back end contains the cookies, so you could copy the auth header contents from your browser local storage and save it as a cookie. While this isnt sending it in the headers to Plotly Dash backend, it will still get it.

Front end JSX can have something like this near your iframed dash

import { useEffect } from 'react';

export default function HomeDashboard() {
  useEffect(() => {
    const cookieString = 'auth-token=' + localStorage.getItem('your-app-auth-token');
    console.log('Auth cookie: ' + cookieString);
    document.cookie = cookieString;
  }, []);
  return (
    <>
   
      <iframe src={plotly dash URL} height={600} width={600} title="AACA metrics" />
    </>
  );
}

Then on your back end (python) side :

@callback(
    Output("graph-content", "figure"), Input("dropdown-selection", "value")
)
def update_graph(value):
    if request:
        auth_token = request.cookies['auth-token']
        if verify_my_auth_token(auth_token):
           dff = df[df.country == value]
           return px.line(dff, x="year", y="pop")
6

Hello @hamx0r,

For me, I replace the original fetch request and add the headers to it and then call the original fetch request.