ajaxbokehgoogle-iap

Making credentialed requests with Bokeh AjaxDataSource


I have a plot set up to use an AjaxDataSource. This is working pretty well in my local development, and was working as deployed in my Kubernetes cluster. However, after I added HTTPS and Google IAP (Identity-Aware Proxy) to my plotting app, all of the requests to the data-url for my AjaxDataSource are rejected by the Google IAP service.

I have run into this issue in the past with other AJAX requests to Google IAP-protected services, and resolved it by setting {withCredentials: true} in my axios requests. However, I do not have this option while working with Bokeh's AjaxDataSource. How do I get BokehJS to pass the cookies to my service in the AjaxDataSource?


Solution

  • Thanks to bigreddot for pointing me in the right direction. I was able to build a custom extension that did what I needed. Here's the source code for that extension:

    from bokeh.models import AjaxDataSource
    from bokeh.util.compiler import TypeScript
    
    TS_CODE = """
    import {AjaxDataSource} from "models/sources";
    
    export class CredentialedAjaxDataSource extends AjaxDataSource {
    
        prepare_request(): XMLHttpRequest {
            const xhr = new XMLHttpRequest();
            xhr.open(this.method, this.data_url, true);
            xhr.withCredentials = true;
            xhr.setRequestHeader("Content-Type", this.content_type);
    
            const http_headers = this.http_headers;
            for (const name in http_headers) {
              const value = http_headers[name];
              xhr.setRequestHeader(name, value)
            }
            return xhr;
        }
    }
    """
    
    
    class CredentialedAjaxDataSource(AjaxDataSource):
    
        __implementation__ = TypeScript(TS_CODE)
    
    

    Bokeh extensions documentation: https://docs.bokeh.org/en/latest/docs/user_guide/extensions.html