Use XML Http Request To Retrieve Dashboard

Grafana
1

I’m attempting to embed a grafana dashboard into our application. Currently I have it set up to use Nginx as a reverse proxy, but I’m having trouble pulling the dashboard across.

nginx.conf

http {
    server {
        listen 80;

        location / {
            proxy_pass http://localhost:8082;
        }
      
        location /grafana/ {
            auth_request /auth;
            proxy_pass http://grafana.staged-by-discourse.com/;
            proxy_set_header Authorization "";
            proxy_set_header Host $host;
            proxy_set_header X-WEBAUTH-EMAIL $email;
        }

        location /auth {...}
    }
}

This appears to work. If I have an iframe pointing directly at the dashboard, and then hardcode the email we want to use in our Nginx configuration, then the dashboard is shown. However if I try to use an XHR request then things go downhill.

const xhr - new XMLHttpRequest();
xhr.open("GET", "/grafana/dashboard-url");
xhr.onreadystatechange = function() {
    if (this.readyState === this.DONE && this.status === 200) {
        const iframe = document.querySelector("iframe");
        iframe.srcdoc = this.responseText;
        iframe.src = "data:text/html;charset=utf-8," + escape(this.responseText);
    }
}
xhr.setRequestHeader("Authorization", "Bearer " + token);
xhr.send();

It shows me -> “If you’re seeing this Grafana has failed to load its application files …” I get this error in the javascript console:

[Error] RangeError: Unable to resolve "/*" to about:blank/
    u (vendor.3281536e2e768a717e3c.js:41:127743)
    l (vendor.3281536e2e768a717e3c.js:41:128201)
    B (vendor.3281536e2e768a717e3c.js:41:137444)
    config (vendor.3281536e2e768a717e3c.js:41:172072)
    (anonymous function) (app.3281536e2e768a717e3c.js:1:814401)
    o (app.3281536e2e768a717e3c.js:1:523)
    (anonymous function) (app.3281536e2e768a717e3c.js:22:434013)
    o (app.3281536e2e768a717e3c.js:1:523)
    n (app.3281536e2e768a717e3c.js:1:389)
    (anonymous function) (app.3281536e2e768a717e3c.js:1:2227)
    Global Code (app.3281536e2e768a717e3c.js:1:2230)

Running Grafana 6.2.4 in Safari on Mac.

Am I just fundamentally misunderstanding how this works?

Thanks!

2

you need to proxy all requests that go into booting and showing a dashboard & metric requests

3

@torkel Thanks for the response! I tried adding a proxy for /public; which seemed to fix not retrieving the right css files, is there something else I’m missing?

And as I say it does work if I just put the src straight in the iframe so as far as I can tell the proxy should be set up correctly

If I run it in Chrome I actually get a totally different outcome. The page seems to constantly reload itself, and when it is there it displays a Page Not Found error, but then seems to fail with this error instead:

DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'http://localhost/grafana/' cannot be created in a document with origin 'http://localhost' and URL 'about:srcdoc'.
4

No doubt this will probably be an issue with my grafana set up I imagine. I think the reason I was having to add a proxy for /public at all Is something to do with my route url. I have a feeling it might be because grafana will try to load files relative to the iframe’s src which in this case is just /, rather than /grafana/? Or something along those lines? Here’s all I’ve changed in my grafana ini:

[server]
root_url = http://grafana.staged-by-discourse.com/grafana/

[security]
allow_embedding = true

[auth.proxy]
enabled = true
auto_sign_up = false