Redirect to Consul UI by passing token in the header

Consul
1

Hi All, Is it possible to load Consul UI by passing the Secret Consul token (without having to enter manually) in headers along with the URL while redirecting from other service
I am trying to redirect from my python flask based application using flask’s redirect method as below

response = redirect(<consul-ui-url>)
response.headers = {'X-Consul-Token': <my-consul-token>}
return response

If I use the above, the page is not loading . I am getting a page where I am asked to click on the url which I mentioned above and after clicking on it, I am required to enter the secret token manually.

Can you please let me know what might be the issue here?

Your help is greatly appreciated. Thank you!

2

Hi @murali.naru158,

Is there a particular reason your application is trying to access the UI endpoints instead of interacting directly with the API?

The UI retrieves all of its data from the Consul API. If you are wanting programatic access to the data in Consul, the API is the best way to retrieve that as opposed to scraping the UI output.

3

Hi @blake This is to enable users(human) to monitor the services and other resources on Consul UI. This is not meant for scraping the UI data. I cannot afford Consul Enterprise which offers OIDC Auth-method and hence allow users role based access control without entering token manually.

4

The Consul UI is a complex JavaScript application that runs in the user’s web browser.

There is nothing you can send to the server in order to log in the UI, because the UI’s login state is entirely client side.

The only way I can think of, in which your desired flow would work, would be:

  • Put the entire Consul UI behind a reverse proxy, allowing you to divert certain paths to a custom helper application
  • Implement a path in the custom helper application which authenticates the user somehow, obtains a Consul token, and serves a page containing JavaScript to the user’s web browser that:
    1. Populates the token into browser localStorage, in the same way the real Consul UI would (this is why it needs to be behind a reverse proxy, so that from the browser’s perspective, it is all part of the same site, and can write to the site-specific localStorage)
    2. Redirects user again to the real Consul UI, which will read localStorage and be pre-authenticated
  • Now other systems in your organization can redirect users to your custom helper application that has been spliced into the Consul URL-space by the reverse proxy.

This is of course rather messy, and fragile if future Consul versions change how they manage logins. It would be much easier if HashiCorp allowed the use of OIDC… but I guess not doing so is part of their sales strategy for Consul Enterprise.

5

Hi @maxb Thanks for the detailed explanation. I already have custom helper application which accepts username and password and upon successful authentication - 1. gets the token from Consul through API , 2. redirects to Consul UI . So I should be “Storing the token in the localStorage” before redirection. Am I right?

6

Except, you can only access localStorage from a page loaded from the exact same origin (https://developer.mozilla.org/en-US/docs/Glossary/Origin), so your existing helper application would need to be relocated onto an URL like https://consul.mydomain.example/login-helper/ - hence the rest of the details in my previous reply.