Bearer token auth

Grafana Authentication
1

Hi

We are trying to display the dashboard in an iframe embedded in our web app. We can use XHR to fetch the initial page with additional auth headers and put the result in the iframe to have the emtpy dashboard displayed. The additional data fetch requests made by the dashboard then get error 401 Unauthorized.

Only way to make it work is to use a browser extension that will add the auth header to all requests, and this isn’t something we can use in production.

Is there any recommended way to do what we are trying to do?

2

Hi! I don’t know if you have this possibility, but I believe your problem is related to cookies and so on.
i.e: You make the first request with the auth headers, but Grafana doesn’t return the login cookies for those type of requests. Thus you’d need to send these headers on every request.

So, if you don’t mind logging in the same account always, to solve this issue you could try to make a normal login to Grafana before. This will make the browser save the logged user Cookie, and then every request will work normally.

3

Thanks! I’ve actually solved it by adding a patch that adds auth header to all fetch requests. After adding it, everyting is working fine.

4

Nice!
If you don’t mind, does that patch changes the Grafana code or your app code?

5

No changes to Grafana code. Fetch the initial page you want via XHR (with auth header added), then add script tag to add the auth header to the response and then add that response to iframe.srcdoc

1 Like
7

Hi tpetrovic,

I am also trying to use XHR with AUTHORIZATION Bearer token. but it always returns HTML with 404 instead of the dashboards (i noted that your html returns were blanks as a result of 401, i have yet to figure why mine is 404). the same authorization bearer token is used on that “browser extension” (i use “modify header value” extn in FF) and it returns correctly. The browser returns valid grafanabootdata correctly, but my XHR calls do not.

my setup is using CORS (tested correct as my logs returns 200 OK on OPTIONS) and Reverse proxy in IIS (tested correct as the returned pages are all 200 OK). however, I also used POSTER/POSTMAN to send request dashboard to grafana with AUTHORIZATION header added and nothing else (same as browser) it returns 200 OK but the HTML data grafanabootdata is empty user=""

i used this format to retrieve dashboard:

http://192.168.1.121/grafana/d/KD9aK_Qik/dashboard?orgId=2

http://192.168.1.121/{subdomain in iis}/d/{Dasboard uid}/{dashboard name}?orgId={org number}

that works on my browser with extension to add authorization bearer header. my token is also valid as it works on the browser. XHR and POSTER/POSTMAN doesn’t work even though responses all are 200 OK. I am testing only within our network for now.

is there some config in grafana i should be aware of? can you share your grafana settings?

8

Hi k3nn,

There were no additional grafana configs as far as I know, my job was only to display the dashboard in an iframe.

It is weird that you are getting a 404 - does copying the same request url you are making from Network tab to browser url also return 404 (when that extension for setting headers is active)?

9

when the browser extn is active, the browser url shows correct dashboard with all the graphs ok. the same url returns 404 when used in POSTMAN/POSTER. i’ll try and use cURL and see the results. thanks

10

cURL also returns no login in granabootdata

window.grafanaBootData = {
user: {“isSignedIn”:true,“id”:0,“login”:"",“email”:"",“name”:"",“lightTheme”:false,“orgCount”:0,“orgId”:2,“orgName”:"",“orgRole”:“Admin”,“isGrafanaAdmin”:false,“gravatarUrl”:"",“timezone”:“browser”,“locale”:“en-US”,“helpFlags1”:0,“hasEditPermissionInFolders”:true},

while this is from the browser

window.grafanaBootData = {
  user: {"isSignedIn":true,"id":8,"login":"xx.xx@xxech.com","email":"xx.xx@xxech.com","name":"jec","lightTheme":true,"orgCount":1,"orgId":2,"orgName":"Client PCI","orgRole":"Admin","isGrafanaAdmin":false,"gravatarUrl":"/avatar/b7400e88876717d2f32e718a01a22b7d","timezone":"browser","locale":"en-US","helpFlags1":0,"hasEditPermissionInFolders":true},

i’m really confused how the browser gets it correctly and all other else doesn’t. can i see your XHR codes pls? mine is below:

function GetGrafana() {
    var getRequest = {
        method: 'GET',
        mode: 'cors',
        credentials: 'include',
        withCredentials: true,
        headers: {
            'Accept': 'application/json',
            'Authorization': 'Bearer @Model.Token'
        }
    }
    fetch('@Model.UrlDashboard', getRequest)
        .then(resp => resp.text())
        .then(function (response) {
                var parent = $('#grafanaFrameDiv');
            var strResp = response.replace('base href="/"', 'base href="@Model.GrafanaIntHost"' + '/');

                var newElement = $(strResp);
                $('#grafanaFrame').remove();
                parent.append(newElement);

            //}
        })
        .catch(error =>
            console.error('Error:', error)
        );
}

also do i have to enable auth.proxy? or turn it off? what’re your settings sir?

11

hey iam using react to display grafana using iframe i send auth token in query params to by backend which display the basic grafana dashboard but all other api call which iframe made shows un authorize can you help me how to solve this issue?

12

can you give an example how you do this?