Error in setting cookie (previously: "Cross-site POST form submissions are forbidden error")

[tcompa]

I am using the following setup:

On the remote machine:

1. I run fractal-server (1.3.0a2)
2. I run fractal-web via npm run dev (I cannot actually build it, for the moment, due to AUTH_COOKIE_NAME error in npm run build #141), on port 5174.
3. I restart apache2, with the following /etc/apache2/sites-available/fractal-web.conf:

LoadModule proxy_http_module /usr/lib/apache2/modules/mod_proxy_http.so
<VirtualHost *:80>
    ServerName localhost
    ProxyPass / http://127.0.0.1:5174/
    ProxyPassReverse / http://127.0.0.1:5174/

    ErrorLog ${APACHE_LOG_DIR}/server-error.log
    LogLevel debug
    CustomLog ${APACHE_LOG_DIR}/server-access.log combined
</VirtualHost>

4. From another machine in the same private network (which is actually my machine, but with a VPN on), I browse to the actual IP of the remote machine (note: no SSH tunnels are needed).
5. I do get the right fractal-web homepage with "Welcome to Fractal's web client.", and (most importantly) with the correct fractal-version in the footer (this means that GET calls to fractal-server are working). Up to here, all good.
6. I open the login page and try to log in. This simply opens a page saying that "Cross-site POST form submissions are forbidden". The call never reached fractal-server.

As a first attempt, I added ORIGIN=http://localhost:80 or ORIGIN=http://localhost:5174 to my .env file, but this changed nothing. The same is true for PROTOCOL_HEADER=x-forwarded-proto HOST_HEADER=x-forwarded-host.

This is likely an error in the svelte configuration, see e.g.:

• https://kit.svelte.dev/docs/adapter-node#environment-variables
• Cross-site POST form submissions are forbidden sveltejs/kit#6589

[tcompa]

After better understanding of #141, I could test again with node build.
Also, I understood that I need to change the ORIGIN variable in a different way, which leads to a minor step forward.

I now build the app and the run it via

PORT=5174 ORIGIN=http://X.X.X.X node build

where X.X.X.X is the address of the remote machine (that is, the one that I am connecting to, in the browser).

When I try to log in, I correctly see a call to fractal-server endpoint ("POST /auth/token/login HTTP/1.1" 200 OK).
So far so good, but then I am not actually logged in. Rather, I am redirected to the login page again.

The svelte logs read

istening on 0.0.0.0:5174
[GET] - /
Public page - No auth required
SSR - Main layout
Server info loaded: Alive true - 1.3.0a2 - testing
No auth cookie found
[POST] - /auth/login
Public page - No auth required
Login action
{
  domain: 'localhost',
  path: '/',
  expires: 2023-05-16T10:49:13.000Z,
  sameSite: 'lax',
  secure: false,
  httpOnly: true
}
[GET] - /
Public page - No auth required
SSR - Main layout
Server info loaded: Alive true - 1.3.0a2 - testing
No auth cookie found

My best guess is now that I need to better set the AUTH_COOKIE_DOMAIN (or other properties of the cookie).

[tcompa]

To test: set AUTH_COOKIE_DOMAIN to the same IP as ORIGIN.

[tcompa]

Possibly relevant ref: https://httpd.apache.org/docs/2.4/mod/mod_proxy.html#proxypassreversecookiedomain

[tcompa]

To test: set AUTH_COOKIE_DOMAIN to the same IP as ORIGIN.

For the record, this is definitely needed - and it leads to the cookie being set in the browser.

The next issue now is that the call to fastapi whoami endpoint fails with a 401 error. This may be related to:

Possibly relevant ref: https://httpd.apache.org/docs/2.4/mod/mod_proxy.html#proxypassreversecookiedomain

[rkpasia]

It could also be relevant this https://kit.svelte.dev/docs/adapter-node#environment-variables

PROTOCOL_HEADER=x-forwarded-proto HOST_HEADER=x-forwarded-host node build
x-forwarded-proto and x-forwarded-host are de facto standard headers that forward the original protocol and host if you're using a reverse proxy (think load balancers and CDNs). You should only set these variables if your server is behind a trusted reverse proxy; otherwise, it'd be possible for clients to spoof these headers.

[tcompa]

Here is a config set that currently works.
Note that

• XXXX is the IP address of the remote machine where fractal-server and node are running.
• We use port 5174 for fractal-web.

fractal-server config

When serving with uvicorn, host should be set to XXXX (e.g. via fractalctl start --host XXXX).
(we did not test gunicorn, but that should be via the --bind option)

Note that we did not set any value for FRACTAL_CORS_ALLOW_ORIGIN, and that the default points to 5173 while we are testing with 5174 --> this variable is not relevant now (that is clear, because all requests come from the same host).

fractal-web config

First we set .env to be

FRACTAL_SERVER_HOST=http://XXXX:8000
AUTH_COOKIE_NAME=fastapiusersauth
AUTH_COOKIE_SECURE=false
AUTH_COOKIE_DOMAIN=XXXX   # this is crucial, otherwise the browser won't set the cookie
AUTH_COOKIE_PATH=/
AUTH_COOKIE_MAX_AGE=1800
AUTH_COOKIE_SAME_SITE=lax
AUTH_COOKIE_HTTP_ONLY=true

After npm run build, we serve the app via node, as in:

PROTOCOL_HEADER=x-forwarded-proto HOST_HEADER=x-forwarded-host PORT=5174 ORIGIN=http://XXXX node build

(see https://kit.svelte.dev/docs/adapter-node#environment-variables)

Apache proxy config

A minimal working configuration reads like

LoadModule proxy_http_module /usr/lib/apache2/modules/mod_proxy_http.so

<VirtualHost *:80>

    ProxyPass / http://127.0.0.1:5174/
    ProxyPassReverse / http://127.0.0.1:5174/

</VirtualHost>

[tcompa]

There is now a minimal example of configuration settings in https://github.com/fractal-analytics-platform/fractal-web/tree/main/examples/config_1, to be tested again once we switch to https or if we use a different apache configuration.