we are loving dash for product prototyping!, we used to deliver quick iteration of data visualization with jupyter to our customers, but with dash… we can show them actual prototype apps, and being python it is just a small additional step to our pandas-plotly based workflow.
We want to include these dash prototypes in our real product (currently angular prog app) by embedding them in iframes, and that includes transparently authorizing the endpoint using our actual OAuth implementation (auth0).
We are deploying each prototype as its own application and serving them via AWS API Gateway acting as a proxy to flask, this way the dash server is not aware of being authenticated. Everything is done in the client where actually we are:
Authenticating the user when it accesses our app (receiving a JWT token).
Making a GET / call to the dash app, inserting an authorization header.
API Gateway authorizes the client and servers the dash app.
Response is embedded into an iframe and the app is rendered.
This seems promising, but it has a security hole as right now we can only secure the / endpoint, while _dash_layout, or _dash_update_component are open, so anyone knowing there is a dash application in there could just query those endpoints with a non browser client to suck the data out.
I would like to mend this extending dash to be able to store a JWT token (localstorage would be great) and blindly sending it away when performing any requests to the server. I could really appreciate the opinion of someone with a deep understanding of dash and maybe a difficulty estimation for this. I am going to invest some time on the issue in case anyone is interested, so let me know!
Yes, we have been experimenting with this idea for a while and we have come up with some interesting developments.
Regarding authorization, I am working in a new direction, embedding a dash application as a web component instead of an iframe so keeping control of networking and being able to intercept HTTP petitions to tamper with the headers.
We have this solutions in a prototype deployment in production and are working great, I could release some code and make a blog post about it if people show interests. Right now it is just a proof of concept but it is looking great!
I’d be very interested in seeing the code you’ve put together, so definitely a blog post, or pushing it to a GitHub repository would be greatly appreciated.
What I am after is adding a layer of authentication before anything is rendered, but the idea of embedding sounds interesting as well.
@jarias, just to clarify, you embedded a dash app within an angular webapp using iframes.
And can the angular and dash apps interact somehow? can they read off one another or trigger one another for example?
Wow, I am very sorry I just seemed to ignore you guys… It was not my intention at all
What we did was just a very unclean and hacky experiment, that I do not recommend for production as it has many disadvantages. We ended just forking dash and implementing our own oauth server bindings on top of the react packages.
However, if you want to follow the path of hacky and unclean (may for a PoC implementation) what we did was to inject into the javascript implementation of dash and modify some of it behaviour. I still do not know if this would work in current version.
dash uses fetch as their http agent. So you can just inject your own implementation window.fetch = (function(e) {})
we added an interceptor over the existing fetch so every time it sends a request we can add content to the headers such as an Authorization: Bearer <token> entry to enable oauth flows.
Communication between an Iframe and the parent window is something that I would not recommend, as you might be doing some suspicious things that are not would well considered by most modern browsers.
We though implemented some sort of communication, by parsing the querystrings part of the URL we sended to dash servers.
Hope this helps somehow, and again, please mind that this is very very hacky and greasy…
We are having the same problem here.
We are embedding a Dash app in an iframe served by a PHP website.
The users login to the website and all calls to the API gateway made by the frontend have a JWT bearer token except for the Dash App. It doesn’t send the token in its GET and POST requests. @jarias Did you ever find a clean solution for this ?
hi sir,
we are working on something similar to this. where we want to integrate our dash application with existing c# sharp application . we want to implement role based authorization is it possible to establish this with dash without using flask and only with dash
