Giters

bokeh / bokeh

Interactive Data Visualization in the browser, from Python

Home Page:https://bokeh.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[FEATURE] Allow bokeh server embed script to forward credentials

pmeier opened this issue · comments

commented

Problem description

I want to run a panel application behind a FastAPI server, while the FastAPI server handles the authentication. The panel documentation currently has the following example on how to embed panel into FastAPI:

<!DOCTYPE html>
<html>
    <head>
        <title>Panel in FastAPI: sliders</title>
    </head>
    <body>
        {{ script|safe }}
    </body>
</html>
from bokeh.embed import server_document

@app.get("/")
async def bkapp_page(request: Request):
    script = server_document('http://127.0.0.1:5000/app')
    return templates.TemplateResponse("base.html", {"request": request, "script": script})

The script value uses this template and looks like

<script id="p1002">
  (function() {
    const xhr = new XMLHttpRequest()
    xhr.responseType = 'blob';
    xhr.open('GET', "http://127.0.0.1:5000/app/autoload.js?bokeh-autoload-element=p1002&bokeh-app-path=/app&bokeh-absolute-url=http://127.0.0.1:5000/app", true);
    xhr.onload = function (event) {
      const script = document.createElement('script');
      const src = URL.createObjectURL(event.target.response);
      script.src = src;
      document.body.appendChild(script);
    };
    xhr.send();
  })();
</script>

xhr is the request that will ultimately used by panel (and bokeh below it) to give my application access to the cookies. However, as written, the cookies will not be sent.

My first naive approach was to do

script = server_document('http://127.0.0.1:5000/app', headers=request.headers)

This indeed sets everything I need on the backend, but most of the headers are forbidden by the browser. Meaning, they will never be sent to my panel app and I don't get access to the cookies.

The correct approach is to set xhr.withCredentials = true;. Doing so indeed sends the cookies to my panel app. However, now I'm being hit by CORS and more specifically by

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:5000/app/autoload.js?bokeh-autoload-element=p1002&bokeh-absolute-url=http://127.0.0.1:5000.

A detailed description of the error can be found here. The TL;DR is is that the request the browser sends to my application is correct and contains the cookie, but because the application responds with the Access-Control-Allow-Headers * header indicating that any origin is allowed, the browser blocks the response.

Feature description

  1. bokeh.embed.server_document should have a with_credentials: bool = False option that, if set, sets xhr.withCredentials = true;.
  2. The bokeh application should have an option to specify the value of the Access-Control-Allow-Headers to be able to fix the CORS issue.

Potential alternatives

A potential workaround would be to send the cookie through a non-standard header, i.e. X-Cookie. This means a lot more wrapper code down below given that niceties like the pn.state.cookies dictionary and the like no longer work and my application has to do the parsing itself.

Additional information

No response

commented

@philippjfr it would be good to have Panel/Holoviz input on this

commented

Just for reference, here is how FastAPI / starlette handle this:

origin = request_headers["Origin"]
has_cookie = "cookie" in request_headers

# If request includes any cookie headers, then we must respond
# with the specific origin instead of '*'.
if self.allow_all_origins and has_cookie:
    self.allow_explicit_origin(headers, origin)

# If we only allow specific origins, then we have to mirror back
# the Origin header in the response.
elif not self.allow_all_origins and self.is_allowed_origin(origin=origin):
    self.allow_explicit_origin(headers, origin)
commented

This doesn't seem super specific to Panel and I think the proposed fix makes sense more generally. Embedding Bokeh apps in another server like Flask or FastAPI is a common need and it would be good to make sure the Cookies/Headers are appropriately forwarded. I can try to allocate some time to fixing this but it would certainly be faster if we had another volunteer for this.

commented

@philippjfr I would gladly help expedite the fix for this as I am facing the same issue. I have tried what was mentioned above setting xhr.withCredentials = true. I do see the headers and cookies come in now but get the CORS error. Let me know what I could do to help push the envelope forward.

commented

@rbuenavida I'm not familiar with the bokeh codebase. Basically you need to find the place where the xhr request is going and apply the logic from #13792 (comment) to the response.

commented

@pmeier do you mean where is

    xhr.open('GET', "http://127.0.0.1:5000/app/autoload.js?bokeh-autoload-element=p1002&bokeh-app-path=/app&bokeh-absolute-url=http://127.0.0.1:5000/app", true);

handled? If so, that is here:

https://github.com/bokeh/bokeh/blob/branch-3.5/src/bokeh/server/views/autoload_js_handler.py#L61