JupyterHub with jupyter-server-proxy '_xsrf' POST error

JupyterHub
,
1

Hi!

I’m trying to host a web application with the jupyter-server-proxy extension in kubernetes.
jupyterhub/jupyter-server-proxy: Jupyter notebook server extension to proxy web services. (github.com)

Im using ZeroToJupyterHub helm chart

My ‘dummy’ code is this

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/submit', methods=['POST'])
def submit():
    user_input = request.form['user_input']
    return render_template('result.html', user_input=user_input)

if __name__ == '__main__':
    app.run(debug=True, port=5050)

And i can see the first page with this URL
https://myorg/user/username/proxy/5050

But when i try to give it an input i get this error

403 : Forbidden

‘_xsrf’ argument missing from POST

and the URL changes to https://myorg/submit

Im guessing that the POST call can’t go thru the proxy? if so is there a way to get the POST call thru?

2

@Enzawdo Could you please post a full reproducer sharing your index.html and result.html templates so that we can test it rapidly? Cheers!

1 Like
3

my templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask App</title>
</head>
<body>
    <h1>Enter your input:</h1>
    <form action="/submit" method="post">
        <input type="text" name="user_input">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

and my templates/result.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Result</title>
</head>
<body>
    <h1>Your input:</h1>
    <p>{{ user_input }}</p>
</body>
</html>

It’s very basic, what im actually trying to do is to start a fiftyone instance, but i got issues there aswell so i wanted to see what the issue truly is by making a dummy app.

1 Like
4

The problem lies here. You are setting an absolute path for submit end point so when you actually posting form data, it is attempting to submit the form to jupyterhub.example.com/submit and not jupyterhub.example.com/user/<user>/<server>/proxy/5050/submit. In your example, if you change the action URL to relative, like <form action="submit" method="post">, it should work.

I am not aware of fiftyone instance, but that app should support path prefix so that the app can be served under path /user/<user>/<server>/proxy/<port>/ to make it work with jupyter-server-proxy. Does it make sense?

1 Like
5

Thank you! Unfortuently I still get the same error…

6

With JupyterHub 4.1.5 and Jupyter Server Proxy 4.1.2, it works on my side. Is the app still trying to submit to jupyterhub.example.com/submit instead of jupyterhub.example.com/user/<user>/<server>/proxy/5050/submit?

Here are the logs:

python app.py 
 * Serving Flask app 'app'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5050
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!
127.0.0.1 - - [02/May/2024 11:23:40] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [02/May/2024 11:23:45] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [02/May/2024 11:23:48] "POST /submit HTTP/1.1" 200 -
7

I got JupyterHub 4.0.2, and jupyter server proxy 4.1.2.

The sumbit now happens to jupyterhub.example.com/user/<user>/<server>/proxy/submit, So the port are missing for some reason.

8

The famous trailing slash is important. So, you should access the app at jupyterhub.example.com/user/<user>/<server>/proxy/5050/ and from your original post I see that you are not using slash after port number. Could you retry with it?

1 Like
9

IT WORKS!! Thanks, still get issues with fiftyone and upploading of the dataset. But now i know it is a fiftyone issue :slight_smile:

1 Like