I want to embed my dashboards into iframe for my webpage. Allowing anonymous authorisation is not a good fit for us as it leaves major security leaks. I played around with a proxy, but i haven’t gotten this to work.
the ideal scenario would be this:
User enter login credentials into our webpage, once correct he gets redirected (and automatically logged into grafana) to his corresponding dashboard that is inside an iframe.
I feel ike this is possible (with a proxy), but cant make it work here.
Can somebody help me with this?
you can try auth proxy:
then on your proxy, add the
proxy_set_header
to forward the header name.
got this now in my nginx config file (/etc/nginx/sites-available/default).
nginx and grafana are running on the same instance.
server {
listen 80;
server_name localhost; # Change this if you have a domain name
# Location block to handle proxying requests to Grafana
location / {
# Set headers to forward authentication data
proxy_set_header X-WEBAUTH-USER $remote_user; # Pass the username to Grafana
proxy_set_header X-WEBAUTH-PASSWORD $http_password; # (Optional) Pass the password to Grafana if required
# Proxy pass to Grafana running locally (on port 3000)
proxy_pass http://localhost:3000;
# Preserve the original Host header, client IP, and protocol information
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
# Forward cookies for session management
proxy_set_header Cookie $http_cookie;
proxy_set_header Set-Cookie $http_set_cookie;
# Allow embedding Grafana in iframes (for the iframe in your website)
add_header X-Frame-Options "ALLOWALL";
# Prevent CORS issues if required for embedding Grafana
add_header Access-Control-Allow-Origin *;
# Debugging header to verify that the correct username is being passed
add_header X-Debug-Username $remote_user;
}
}
No.
I’ll go over all set up components right now:
Grafana config file:
[security]
allow_embedding = true
[auth.anonymous]
enabled = false
[auth.basic]
enabled = false
[auth.proxy]
enabled = true
header_name = X-WEBAUTH-USER
header_property = username
auto_sign_up = false
sync_ttl = 60
;whitelist =
;headers = Email:X-User-Email, Name:X-User-Name
;headers_encoded = false
enable_login_token = false
nginx config file you saw
iframe in my .html file (localhost obviously changed to actual URL):
<iframe src="http://localhost:3000/d/{dashboard ID}/main" width="100%" height="800px"></iframe>
running the website currently off of a live server extention which launches a development local server.
I will say this again: I am trying to log into my own login page, with an existing grafana users cerdentials and trying to then automatically show the dashboard in grafana, no second login page (which also doesnt work for the record)
$remote_user works for basic auth not for a username?
I setup nginx like this:
proxy_set_header X-WEBAUTH-USER “username”;
where i have a user called username in grafana, this does not prompt for a password, it just logs you in as the user i specified.
i have not got it working for multiple users either.
I am going to try authelia however, you can maybe give this a try and let me know?
so if i’de put “admin”, it’d work?
it should, it works for me
coul you maybe share what your nginx file looks like?
I am using npm so it’s a front end view:
but the location stanza looks like this:
location /grafana {
rewrite ^/grafana/(.*) /$1 break;
proxy_set_header X-WEBAUTH-USER “xxx”;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Scheme $scheme;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://grafana:3000;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $http_connection;
proxy_http_version 1.1;
}
