[Kibana Plugin]: Inject data (headers) from Kibana to the browser

Hi guys,

I'm looking for a way to make some data (headers received by the Kibana Server) available to the plugin front-end (re-use the headers to fetch some data through an external API).

It is also worth noticing that I retrieve the headers like this :

// Request interceptor, runs on every incoming request
server.ext('onRequest', async (request, h) => {
      const headers = request.headers;

      doSomethingWithHeaders(headers);

      return h.continue;
});

I've seen that I can use server.injectUiAppVars in the init method of the plugin to inject data and retrieve it in the browser.
I'm having trouble figuring out how to retrieve the headers from the hapi requests life-cycle (via the code above) and inject them with the injectUiAppVars function. Any clues ?

Cheers

Hi Dasko,

Maybe you can give a bit more details about the problem you're trying to solve? It sounds like you are trying to provide credentials/authentication token to the frontend so that the frontend code can do a fetch request to an external API. Why are you trying read the headers of incoming requests in the hapi requests life-cycle?

If you share variables with the frontend using server.injectUiAppVars you can retrieve these on the browser with

import chrome from 'ui/chrome';
const myVarName = chrome.getInjected('myVarName');

@rudolf,

It is indeed what I'm trying to do. We access Kibana through a proxy, and that proxy provides two headers that should be used to grant access to an external API. To be honest, I haven't found a way to grab those headers from Kibana except using hapi life-cycle. Do you know any other way ?

Cheers,
Dasko

So what problems are you having with using server.ext('onRequest'?

I've been tinkering a bit with the code, and got something that seems to be working fine.
I guess I was having trouble because I was tired of my week :sweat_smile:.

I'll post what I have, if that can help anyone.

export default function (kibana) {
  return new kibana.Plugin({
    require: ['elasticsearch'],
    name: 'Archives',
    uiExports: {
      app: {
        title: 'Archives',
        description: 'Archives',
        main: 'plugins/archives/app',
        icon: 'plugins/archives/archive.svg'
      }
    },
    init: (server, options) => {
      server.ext('onRequest', async (request, h) => {
        const headers = request.headers;

        console.log(headers['x-forwarded-group'])
        server.injectUiAppVars('archives', () => {
          return {
            headers: {
              group: headers['x-forwarded-group']
            }
          }
        })

        return h.continue;
      });
    },
    config(Joi) {
      return Joi.object({
        enabled: Joi.boolean().default(true),
      }).default();
    },

  });
}

Thank you for your help @rudolf, I'm sorry I wasted some of your time.

No problem, I'm glad you came right!