Allow the WebUI to connect to an authenticated API

[hazae41]

Checklist

• [X] My issue is specific & actionable.
• [X] I am not suggesting a protocol enhancement.
• [X] I have searched on the issue tracker for my issue.

Description

ipfs/kubo#2389

Is there a way to connect to an authenticated API from the WebUI?

It seems the WebUI only accepts an URL or a Multiaddress without any possibility to customize the Authorization header

Maybe there should be a way to put the authorization into the URL via path or query parameters?

Thanks

[hazae41]

I managed to get it to work by putting the secret token in a cookie and by using a Nginx reverse proxy to pass the cookie into an authorization header

server {
    listen       80;

    location / {
        proxy_http_version    1.1;
        proxy_pass            https://ipfs.example.com/;
        proxy_ssl_server_name on;
        proxy_set_header      Authorization      "Bearer $cookie_token";
        proxy_pass_header     Authorization;
        client_max_body_size  100M;
    }
}

Then go to your proxy url /webui and execute the following JavaScript in the web console

document.cookie="token=YOUR_IPFS_TOKEN"

Reload the page and voila

https://github.com/hazae41/safe-ipfs

[lidel]

I think there is an old code that support Basic Auth (https://github.com/ipfs/ipfs-webui/issues/836, https://github.com/ipfs/ipfs-webui/issues/1586), but afaik there is no support for Bearer tokens.

The basic auth credentials are passed in URL form:

@hazae41 does Basic Auth work for you (then we can close this), or do you need ability to pass custom Authorization header (then we should turn this into feature request).

[hazae41]

Thanks, I will try

Yet Bearer should be good to add at some point if you have time

[hazae41]

When the WebUI is same-origin, I can successfully go to /webui and enter the user:pass in URL and it works

But when the WebUI is cross-origin, its requests don't pass CORS, because it sends an OPTIONS preflight request without Authorization header, so the API then replies a Forbidden 403 since there is no header, which fails the CORS preflight test

The solution would be to always reply to OPTIONS requests with HTTP 200

I also noticed it can work with Bearer if we enter this JSON into the URL input

{"url":"https://ipfs.example.com","headers":{"authorization":"Bearer YOUR_TOKEN"}}

[github-actions[bot]]

Oops, seems like we needed more information for this issue, please comment with more details or this issue will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it is missing author input.

[hazae41]

It's still an issue when connecting from a third-party, it's blocked by CORS

The solution would be to always reply to OPTIONS requests with HTTP 200

[vpavlin]

Can't you just set Allow-Origin and Allow-Methods in IPFS config?

ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods '["PUT", "POST", "OPTIONS"]'
ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["'${IPFS_EXTERNAL_URL}'"]'

Or is the problem that you don't control the node?

[2color]

In case someone comes across this issue, see the new guide covering how to configure IPFS Web UI with a remote Kubo node that is secured with Basic HTTP Auth: https://github.com/ipfs/ipfs-docs/pull/2000.

The guide also covers how to configure CORS and handle OPTIONS requests. It uses Caddy as the reverse proxy, so that you get a TLS cert too, which is needed in any real-world deployment.

I'm not sure if there's anything else to do in this issue, since it's not the WebUI that needs changing, it's just CORS that needs to be configured correctly. I suppose the only thing that might be relevant is enabling CORS preflight handling in Kubo, but that would be an issue for the Kubo repo.