Embed Grafana dashboard in web application

21

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

1 Like
22

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

23

Not sure you can access it

24

Even in iframe , we canā€™t load the dashboard with API token ?

25

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

26

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

27

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.

28

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 .

29

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??

1 Like
30

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.

4 Likes
31

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

3 Likes
32

Hi, have you managed to get an example ? This feature seams to be a ā€œmust-haveā€ but only few examples. Thanks,

2 Likes
33

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

34

Using iframe , embedded the dashboard url

35

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

1 Like
36

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

37

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?

40

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