Accessing client username from HTTP headers

[tpuiseux]

Hi, we have a Trame web app deployed in Docker using the Cookiecutter example. The app is accessible through a nginx reverse proxy with basic authentication enabled to control client access. Once the client is connected, I would like to use their username to filter the data displayed in the Trame app. So far, I have successfully added the username to the HTTP headers sent by the proxy to the web app, but I haven't managed to access it from the app itself. Is there a way to access the HTTP request from the Trame app? Or do you see simpler approach to retrieve the username directly within the app?

[jourdain]

You will need to retrieve those from the JS side and let the JS tell trame who is logged in. Technically trame only care of its websocket so no http header. On the other end, you could add a new endpoint where you can inspect the http header. You will just need the client to make a request on that endpoint using that path when deployed in docker /api/{sessionId}/endpoint.

HTH

[tpuiseux]

Thank you! To anyone who might be interested, I adapted this example to create a custom endpoint and print the http headers sent by the proxy. Here the resulting code:

from trame.app import get_server
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import vuetify3 as v3, html, client
from trame.decorators import TrameApp, controller
from pathlib import Path
from aiohttp import web

@TrameApp()
class App:
    def __init__(self, server=None):
        self.server = get_server(server, client_type="vue3")
        self.server.cli.add_argument("--session")
        self._build_ui()

        # Use CLI to know when used inside docker
        args, _ = self.server.cli.parse_known_args()
        session = args.session

        # simple default state
        self.state.response = {}
        self.state.session = session
        self.state.url = "/headers"
        self.state.username = "null"
        # Need to adjust URL when within docker
        if session:
            self.state.url = f"/api/{session}/headers"

    @property
    def state(self):
        return self.server.state

    @property
    def ctrl(self):
        return self.server.controller

    @controller.add("on_server_bind")
    def _bind_routes(self, wslink_server):
        wslink_server.app.add_routes(
            [web.get("/headers", self.on_trame_endpoint)]
        )

    @controller.add("on_client_connected")
    def request_headers(self):
        print(f"Accessing the {self.state.url}")
        self.ctrl.js_eval()

    def on_trame_endpoint(self, request):
        headers = request.headers
        # add to the nginx configuration file: "proxy_set_header X-User-Name $remote user"
        self.state.username = headers.get('X-User-Name', 'Unknown User')
        headers_list = [f"{key}: {value}" for key, value in headers.items()]
        #self.state.flush()
        return web.json_response({"headers":headers_list})


    def _build_ui(self):
        with SinglePageLayout(self.server) as layout:
            self.ctrl.js_eval = client.JSEval(exec="utils.get('fetch')(url).then(v => v.json()).then(v => (response = v))").exec
            with layout.content:
                html.Div("URL: {{ url }}")
                html.Div("Session: {{ session }}")
                html.Div("Username: {{ username }}")
                html.Div("Headers: {{ JSON.stringify(response, null, 2) }}")


def main():
    app = App()
    app.server.start()


if __name__ == "__main__":
    main()