Embed Grafana dashboard in web application

hemamalini · October 22, 2017, 9:41am

The HTML response I get from Java, I am passing to html via JavaScript to render the page in browser.

hemamalini · October 22, 2017, 3:42pm

How can I access the page in iframe or via jQuery load?

torkel · October 23, 2017, 5:58am

Not sure you can access it

hemamalini · October 23, 2017, 6:24am

Even in iframe , we can’t load the dashboard with API token ?

torkel · October 28, 2017, 2:07pm

No, but you can enable anonymous access, it’s about the same in terms of security

hemamalini · October 28, 2017, 2:26pm

But with anonymous access ,anyone can access the dashboard . How it is secure

torkel · October 28, 2017, 5:53pm

The same is true if you use api key in url with iframe, anyone can then use the api key to access any dashboard or make any query against your data sources.

hemamalini · October 28, 2017, 6:14pm

Ya, true that’s why I used Java HTTP connection to get html source and pass that HTML source to HTML div via JavaScript. But the page was not rendering properly due to Js error. Using http connection I was getting alert page only. I could see it got authenticated and was able to get the page except Ajax call to render the grafana app tag.i was getting JavaScript error .

torkel · October 29, 2017, 5:45am

Why would that work hand how would that make any difference in terms of security? Grafana fronten will still query its backend and expect data back, second you can possible think you can proxy granfana html into a div and think that will work??

manuvamadevan · April 13, 2018, 11:49am

If you need a simple non-interactive graph , please try the render API
http://docs.grafana.org/reference/sharing/
Should provide a png

OR
For full dashboard,
Add a reverse proxy just infrontof Grafana ,
Add grafana inside an iframe in your html page , with a relative path,
Configure reverse proxy , so that the requests with that configured context path pass to grafana , with appropriate rewrites (only needed if there is difference in grafana.ini , the field root_url have a different context path configuration.)
And configure the reverse proxy with the API token , so that no login is needed.

symington · September 9, 2018, 3:24pm

Can you give an example of using Grafana in an iframe with a relative path?

thavo · August 18, 2019, 1:14am

Hi, have you managed to get an example ? This feature seams to be a “must-have” but only few examples. Thanks,

callmeprado · March 24, 2020, 6:32am

Hi hema, what did you do to display the dashboard on your external website?

hemamalini · August 1, 2020, 3:03pm

Using iframe , embedded the dashboard url

stresslvlup · October 19, 2020, 8:35am

Hi. I am facing the same issue here. I have generated the API key and called from my server side. I would like to embed the grafana dashboard in my website without enabling anonymous access. Anyone got this working? Appreciate your help. I am in this situation for 3 weeks plus

jetforme · November 25, 2020, 9:44am

This page is blank (header & footer & nav are there) for me on Safari. On Chrome there seems to be proper content.

ahmedanis · November 30, 2020, 4:34pm

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?

davidallen5 · October 10, 2023, 5:28pm

Because this is one of the more popular forum topics here, we took the time to write up all of the guidance you’ll find in this thread and similar threads about different embedding techniques, their pros and cons, and how to do iFrame embedding, including the security guidance.

Please have a look at this post, and refer to it for most questions like what are posted here, it explains the current state of Grafana 2023