using a server worker as a forward proxy

[GitHub4LP]

Proposed change

Some service responses are based on the root path, but the actual address that can be accessed is based on the subpath /jupyter_subpath/proxy/{{port}}/, can there be a solution to solve this kind of problem, e.g., using a server worker as a forward proxy?

Alternative options

Optional

Who would use this feature?

Some service responses are based on the root path, but the actual address that can be accessed is based on the subpath /jupyter_subpath/proxy/{{port}}/

(Optional): Suggest a solution

server worker as a forward proxy

[manics]

Jupyter-server-proxy already has absolute_url and mappath options, is there anything that can't be handled by these?

[GitHub4LP]

Jupyter-server-proxy already has absolute_url and mappath options, is there anything that can't be handled by these?

Some web services respond based on /, i.e., the browser automatically requests host/x , but through the jupyter-server-proxy, the real address can be accessed is host/jupyter_subpath/proxy/{{port}}/x , through the server worker can intercept the host/x, and instead request the host/jupyter_subpath/proxy/{{port}}/x response
@manics

[manics]

Unfortunately that's not possible. Jupyter Server only has control of paths under http://host/jupyter_subpath/. If you want control of paths outside of jupyter-server (i.e. http://host/x you'll probably need to use a front-end proxy (e.g. nginx, traefik, etc) with a custom route

[GitHub4LP]

I mean, a server worker can do that.
@manics

function longestCommonPrefix(str1, str2) {
    if (str1 === str2) {
        return str1;
    }
    let minLength = Math.min(str1.length, str2.length);
    let prefix = '';
    for (let i = 0; i < minLength; i++) {
        if (str1[i] === str2[i]) {
            prefix += str1[i];
        } else {
            break;
        }
    }
    return prefix;
}

self.addEventListener('install', (event) => {
    event.waitUntil(
        self.skipWaiting()
    );
});

self.addEventListener('activate', (event) => {
    self.clients.claim();
});

self.addEventListener('fetch', event => {
    event.respondWith(
        (async () => {
            const clientId = event.resultingClientId || event.clientId;
            const clientsList = await clients.matchAll({ includeUncontrolled: true })
            const client = clientsList.find(client => client.id === clientId);
            if (client) {
                let url = new URL(client.url);
                let subpath = url.pathname.slice(0, url.pathname.lastIndexOf('/')+1);
                let requestUrl = new URL(event.request.url);
                if(requestUrl.host===url.host){
                    const lcp = longestCommonPrefix(subpath, requestUrl.pathname);
                    if (lcp !== subpath) {
                        requestUrl.pathname = requestUrl.pathname.replace(
                            lcp,
                            subpath
                        );
                        const modifiedRequest = new Request(requestUrl, {
                            method: event.request.method,
                            headers: event.request.headers,
                            body: event.request.method === 'GET' || event.request.method === 'HEAD' ? null : event.request.body,
                            mode: event.request.mode,
                            credentials: event.request.credentials,
                            cache: event.request.cache,
                            redirect: event.request.redirect,
                            referrer: event.request.referrer,
                            integrity: event.request.integrity
                        });
                        return fetch(modifiedRequest);
                    }
                }else{
                    event.request.headers["cross-origin-resource-policy"] = "cross-origin";
                    return fetch(event.request);
                }
            }
            return fetch(event.request);
        })()
    );
});

sw.js