How to authenticate and embedded Grafana charts into iframe?

Question

I embedded charts from Grafana into iframe into my HTML page.

It kept asking me to enter un/pw in the iframe.

How do I bypass the login that?

Is there a way to bypass that in the code?

Is this a setting in Grafana?

I explore further, I found the API section, I created an API key, and now I have the key token.

eyJrIjoiMnpVSVA***********QiOjF9

How do I use the key above to embedded graphs in my iframe?

Please check: https://stackoverflow.com/questions/45836514/no-response-from-grafana-via-ajax — xuanyuanaosheng, Feb 24 '21 at 10:38

score 6 · Answer 1 · answered Aug 06 '19 at 18:56

6

You can't use API key for the GUI. If you don't want to allow anonymous authentication, then the best option will be auth proxy, where you can implement own custom business logic for authentication.

You will have full freedom with auth proxy setup how to pass auth info (JWT token, cookie, key) to the auth proxy and auth proxy will just add header(s) (e.g. X-WEBAUTH-USER), which will be used as a user identity in Grafana.

answered Aug 06 '19 at 18:56

Jan Garaj

25,598
3
38
59

I can't use Ajax *GET* with header of basic auth ? – code-8 Aug 06 '19 at 19:49
I can't imagine how can you use Ajax GET with basic auth to authenticate whole single page app (Grafana in this case). – Jan Garaj Aug 07 '19 at 17:53
How exactly would the auth proxy help bypassing the login UI? To my understanding, all the auth proxy does is allow you to say who you are using the X-WEBAUTH-USER header when you make calls _to the API_. Which HTTP request would contain this header exactly, in order to bypass the login UI? – DanielM Aug 10 '22 at 15:40

score 5 · Answer 2 · edited Jul 22 '20 at 16:10

5

[auth.anonymous]
# enable anonymous access
enabled = true

# set to true if you host Grafana behind HTTPS. default is false.
cookie_secure = true

# set cookie SameSite attribute. defaults to `lax`. can be set to "lax", "strict" and "none"
cookie_samesite = none

# set to true if you want to allow browsers to render Grafana in a <frame>, <iframe>, <embed> or <object>. default is false.
allow_embedding = true

And then Restart grafana or PC

edited Jul 22 '20 at 16:10

viktorkho

618
6
19

answered Feb 26 '20 at 10:17

mahendra maid

437
1
6
14

Which file is this one? – Vitomakes Apr 06 '21 at 09:20
7

this is anonymous ,... how to do it with authentication! – UnnameDSoS Mar 28 '22 at 09:51

score 1 · Answer 3 · answered May 04 '21 at 10:48

If you just want to show some charts from Grafana you don't need to work with the API key.

You just need to change some configuration settings in the grafana.ini file (/etc/grafana/grafana.ini).

Below is the configuration that you need:

[auth.anonymous]
# enable anonymous access 
enabled = true

# specify organization name that should be used for unauthenticated users
org_name = ORGANIZATION

# specify role for unauthenticated users
org_role = Viewer

[auth]
# Set to true to disable (hide) the login form, useful if you use OAuth
disable_login_form = true

[security]
# set to true if you want to allow browsers to render Grafana in a <frame>, <iframe>, <embed> or <object>. default is false.
allow_embedding = true

On the Server Admin page on the Grafana website go to Orgs and your main organization name should be the same as you set in the configuration above (org_name = ORGANIZATION).

Save all your settings and restart the grafana-server and you should be good to go!

score -4 · Answer 4 · answered Feb 24 '21 at 10:31

I have test Nima Boobard methods ,but it has errer:

jquery-3.5.0.min.js:2 Uncaught TypeError: Cannot read property 'appendChild' of null
    at b (jquery-3.5.0.min.js:2)
    at Pe (jquery-3.5.0.min.js:2)
    at S.fn.init.append (jquery-3.5.0.min.js:2)
    at S.fn.init.<anonymous> (jquery-3.5.0.min.js:2)
    at $ (jquery-3.5.0.min.js:2)
    at S.fn.init.html (jquery-3.5.0.min.js:2)
    at Object.success (x.html:17)
    at c (jquery-3.5.0.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.5.0.min.js:2)
    at l (jquery-3.5.0.min.js:2)
b @ jquery-3.5.0.min.js:2
Pe @ jquery-3.5.0.min.js:2
append @ jquery-3.5.0.min.js:2
(anonymous) @ jquery-3.5.0.min.js:2
$ @ jquery-3.5.0.min.js:2
html @ jquery-3.5.0.min.js:2
success @ x.html:17
c @ jquery-3.5.0.min.js:2
fireWith @ jquery-3.5.0.min.js:2
l @ jquery-3.5.0.min.js:2
(anonymous) @ jquery-3.5.0.min.js:2
load (async)
send @ jquery-3.5.0.min.js:2
ajax @ jquery-3.5.0.min.js:2
(anonymous) @ x.html:5
about:blank:1 Access to font at 'file:///C:/public/fonts/roboto/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
jquery-3.5.0.min.js:2 GET file:///C:/public/fonts/roboto/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2 net::ERR_FAILED
(anonymous) @ jquery-3.5.0.min.js:2
Pe @ jquery-3.5.0.min.js:2
append @ jquery-3.5.0.min.js:2
(anonymous) @ jquery-3.5.0.min.js:2
$ @ jquery-3.5.0.min.js:2
html @ jquery-3.5.0.min.js:2
success @ x.html:17
c @ jquery-3.5.0.min.js:2
fireWith @ jquery-3.5.0.min.js:2
l @ jquery-3.5.0.min.js:2
(anonymous) @ jquery-3.5.0.min.js:2
load (async)
send @ jquery-3.5.0.min.js:2
ajax @ jquery-3.5.0.min.js:2
(anonymous) @ x.html:5
jquery-3.5.0.min.js:2 GET file:///C:/public/build/grafana.dark.44867deea2b1d2a74880.css net::ERR_FILE_NOT_FOUND

Probably your html document doesn't have a div with id 'container' — Nima Boobard, Feb 25 '21 at 11:06

How to authenticate and embedded Grafana charts into iframe?

4 Answers4