HTTP Basic Auth Not Working on Firefox

[ax3l]

Describe the bug

I noticed that putting a trame app behind a HTTP Basic Auth link, e.g., https://user:[email protected], does break the trame app. It would be nice if this worked, to easily share password-protected applications via URLs/URIs.

To Reproduce

Create a .htpasswd or similar for your Apache/Nginx webserver that serves trame. For instance, added to a Cloud provider's ingress. Then, load the trame application via a direct linke of the form https://user:[email protected].

The page stays blank and the browser developer console shows errors loading trame & its third party resources.

Observation

Interestingly, because browsers cache the HTTP basic auth, one can get the app to work by hitting "refresh" after the first load of the page. The browser then strips the user and password from the current URL, does not inject them into loaded resources of the trame app, and loads up successfully.

Expected behavior

If would be great if this worked on first load. A possible implementation could reload automatically or ensure that the loaded resources do not throw errors.

Screenshots

The system I see this on (NERSC Perlmutter Spin using Ranger/Kubernetes) is down today, but I'll add one later.

Platform:

Device:

• [x] Desktop
• [x] Mobile

OS:

• [ ] Windows (not tested)
• [x] MacOS
• [x] Linux
• [x] Android
• [ ] iOS (not tested)

Browsers Affected:

• [ ] Chrome (works)
• [x] Firefox
• [ ] Microsoft Edge (not tested)
• [ ] Safari (not tested)
• [ ] Opera (not tested)
• [ ] Brave (not tested)
• [ ] IE 11 (not tested)

[jourdain]

Do you deploy trame using its docker image or just the command line in that context?

[ax3l]

We deploy using our own Docker image, which in the end runs a line like:

CMD ["python", "app.py", "--port", "8080", "--host", "0.0.0.0", "--server", \
     "--parameter", "/some/path/file.yaml"]

Everything works well if we do not add HTTP Basic Auth.

[ax3l]

The error message in detail is this. I marked the :[email protected] out due to credentials.

Firefox

Chrome

Works

[ax3l]

This is what I found:

• https://bugzilla.mozilla.org/show_bug.cgi?id=1195820
• https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/43#miscellaneous

I think one has to strip the user:password from the URI for resources that Trame loads and put them into a HTTP header for fetch()/new Request(), e.g., https://stackoverflow.com/a/51500400

Maybe just setting credentials: 'include' in fetch() also does the trick (SO, ref).

[jourdain]

Thanks for the clarification, all the inputs are very helpful.

Side note, in your docker, you should probably provide the --timeout 0 or something so the docker don't exit after 5 minutes when nobody is connected?

Also you can setup an --authKey arg to prevent random person to connect. Which is what you are trying to do with the basic authentication. Moreover, you can have an auth page within trame too.

[ax3l]

Thank you for the hints!

Side note, in your docker, you should probably provide the --timeout 0 or something so the docker don't exit after 5 minutes when nobody is connected?

Oh, --timeout 0 is an option to control start=None (to 0) from the CLI? I have not noticed issues yet, but good point, I will add this to our CMD:

CMD ["python", "app.py", "--timeout", "0", "--port", "8080", "--host", "0.0.0.0", "--server", \
     "--parameter", "/some/path/file.yaml"]

[ax3l]

Also you can setup an --authKey arg to prevent random person to connect. Which is what you are trying to do with the basic authentication.

Oh, that is good to know! I cannot find much documentation on this besides that it exists.

I noticed once I set the option python app.py --authKey abc in interactive use during development: my browser still opens to the default path but does not automatically pass the secret in the URI, leading to a connection error:

Moreover, you can have an auth page within trame too.

Oh, that would be a good solution as well. I cannot find docs on this. Is there an example or do you mean "you could code yourself an auth page"?

[jourdain]

The launcher capture parts of the --authKey and secret here and here. Also if you run your app with --help, it will list all the options available from the CLI. But in your case, you do not care about the launcher just how it is using that token infrastructure to secure the connection on the websocket.

For the login page within trame, just create 2 methods that build a UI. The first one with the login that get executed at startup. And the second one with the app UI that get executed if the login succeed.