CODEWITHSUNDEEP
grafananginx-reverse-proxy
yudarik
yudarik

Reputation: 113

Setup Grafana docker behind nginx reverse proxy in an iframe with token Authentication

I'm trying to setup Grafana running on docker-compose behind nginx reverse proxy, it works ok, as long as I is set [auth.anonymous] to enabled=true.

But When I disable anonymous signin, and Try to signin with "Authorization" token in header, I get the error below when navigation to Grafana sub_path:

If you're seeing this Grafana has failed to load its application files

  1. This could be caused by your reverse proxy settings.

  2. If you host grafana under subpath make sure your grafana.ini root_path setting includes subpath

  3. If you have a local dev build make sure you build frontend using: npm run dev, npm run watch, or npm run build

  4. Sometimes restarting grafana-server can help

my ngnix.conf settings are:

server {
  listen 80
  charset utf-8
  location /grafana-dashboard/ {
    proxy_pass http://grafana:3000/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_max_temp_file_size 0;
  }
}

Grafana is running on grafana:3000 from docker-compose.

docker-compose.config.yaml content is:

version: '3.4'
services:
  grafana:
    container_name: grafana
    depends_on:
      - db
    networks:
    - static-network
    ports:
    - 3000:3000
    restart: always
    volumes:
    - grafana_stor:/var/lib/grafana
    environment:
    - GF_AUTH_PROXY_ENABLED=true
    - GF_SERVER_DOMAIN=10.0.0.3
    - GF_SERVER_ROOT_URL=http://10.0.0.3/grafana-dashboard/
    user: "472"

volumes:
  grafana_stor: {}

networks:
  static-network:
    ipam:
      config:
    - subnet: 172.20.0.0/16

Before accessing 10.0.0.3/grafana-dashboard/ I generate API_KEY using Grafana HTTP_API /api/auth/keys and then pass the returned token on "Authorization: Bearer [token]" header on the client.

Just to clarify, grafana-dashboard aimed to be displayed on an iframe within my webapp, but since I need to pass Authorization header, I make a request to the /grafana-dashboard/ that is served by nginx and then place the 'blob' response on an iframe.

The whole idea is to have "single sign-in" to grafana and to my webapp. So users that just signed-in to the webapp won't need to login to grafana as well. But if grafana is used directly (not from an iframe), grafana login screen or nginx simple authentication will be required.

Upvotes: 4

Views: 8485

Answers (3)

Andrew Gray
Andrew Gray

Reputation: 11

I was able to get this to work by attaching the API key from the Grafana HTTP API as a cookie. Then, in my nginx.conf, I have:

location /grafana-dashboard/ {

    # The important line:
    proxy_set_header Authorization "Bearer $cookie_grafana_key";

    proxy_pass http://grafana:3000/;
}

This way, you can use an iframe as normal and not have to worry about setting headers.

Also, I'm not sure if it's a nginx configuration issue, but when I added the authorization header and API key in an AJAX request—instead of passing the key as a cookie—I was getting the original error as well. I'm not sure what is up there.

Upvotes: 1

Abhishek T
Abhishek T

Reputation: 1

As Jan mentioned above, you are not passing user identity information from the nginx proxy. I used basic authentication and added below line to the location block

proxy_set_header  Authorization "Basic <base64 encoded username:password>";

which made it work. Better would be to add a new readonly user in Grafana and expose that instead of admin user. You might also want to update the grafana.ini with below configs for more security.

session_life_time = 900
allow_sign_up = false
allow_org_create = false

Upvotes: 0

Jan Garaj
Jan Garaj

Reputation: 28666

Your problems: 1. API key is for API access, but you are trying to load UI (not API, which is available on the /api path) with API key 2. You have enabled auth proxy, but you are not passing any user identity from the nginx proxy

Solution:

  1. Solve user authentication on the proxy (nginx): no auth, basic auth, SSO (OIDC/SAML), LDAP, ...
  2. Pass user identity from the proxy in the request header
  3. Configure Grafana auth proxy correctly for that request header: http://docs.grafana.org/auth/auth-proxy/

Upvotes: 0

Related Questions