18

I have a NGINX (1.14.1) which forwards /auth request to Keycloak (14.0.0) running in a cloud.

Here is the NGINX configuration in /etc/nginx/conf.d/my.domain.biz.conf

server {
  listen 80;
  server_name my.domain.biz;
  return 301 https://$host$request_uri;
}

server {
  listen 443 ssl;
  server_name my.domain.biz;
  ssl_certificate /etc/letsencrypt/live/domain.biz/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/domain.biz/privkey.pem;
  location /auth {
    proxy_pass http://127.0.0.1:8080/auth;
    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;
    proxy_set_header X-Scheme $scheme;
    add_header X-Frame-Options "ALLOW-FROM https://my.domain.biz/";
    add_header Content-Security-Policy "frame-src https://my.domain.biz/; frame-ancestors https://my.domain.biz/; object-src https://my.domain.biz/;";
  }
}

I'm able to create a realm and a public client in the Keycloak's admin console at https://my.domain.biz/auth/. I'm able to list the endpoints from https://my.domain.biz/auth/realms/myrealm/.well-known/openid-configuration

also, I have updated the following two values in security defenses of the realm settings,

X-Frame-Options: ALLOW-FROM https://my.domain.biz
Content-Security-Policy: frame-src https://my.domain.biz/; frame-ancestors https://my.domain.biz/; object-src https://my.domain.biz/;

I have a React webapp with keycloak-js 14.0.0 running on my laptop at http://localhost:8044/, which I want to authenticate with the Keycloak running in the cloud. The Keycloak client is initialized with the following keycloak.json,

{
  "realm": "myrealm",
  "auth-server-url": "https://my.domain.biz/auth/",
  "ssl-required": "external",
  "resource": "my-pkce",
  "public-client": true,
  "confidential-port": 0
}

and the React code snippet,

  const kc = new Keycloak('/keycloak.json');
  ...
  await kc.init({
    onLoad: 'login-required',
    pkceMethod: 'S256',
    enableLogging: true
  });

When accessed the webapp at http://localhost:8044/, it didn't redirect to the Keycloak's login page, with an error shown in the Chrome browser console:

Refused to frame 'https://my.domain.biz/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

and only one line is logged in the NGINX's /var/log/nginx/access.log,

"GET /auth/realms/myrealm/protocol/openid-connect/3p-cookies/step1.html HTTP/1.1" 404 2032 "http://localhost:8044/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.164 Safari/537.36" "-"

Do you have any idea of what could be wrong?

user3357926
  • 435
  • 1
  • 4
  • 13
  • 7
    Try to use also `checkLoginIframe: false` in `kc.init`. BTW `ALLOW-FROM` directive in `X-Frame-Options` is obsolete directive https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options – Jan Garaj Jul 24 '21 at 14:59
  • Yes, `checkLoginIframe: false` solved the problem. I have revert the Content-Security-Policy configuration from NGINX and Keyclock's realm settings. Thank you! – user3357926 Jul 24 '21 at 15:16
  • 1
    @JanGaraj How can we set this value if we are running keycloak as kubernetes pod. Is there any environment variable. I tried to search but could not find. Please suggest – rakesh kotian Jan 28 '22 at 13:45
  • Thanks to your question I added "Content-Security-Policy" to my nginx config. It is not mentioned in the official docs, but without this header keycloak does not work behind the proxy. – Dmytro Gierman Jul 13 '23 at 09:04

3 Answers3

9

In the recently versions of keycloak /auth param has been removed. so your init parameter configuration should look like this:

"auth-server-url": "https://my.domain.biz"

tested with the following stack:

angular version: 13.13.11

keycloakjs: 18

keycloak server: 18.0.1 (bitnami docker image)

I hope it helps

gvalenncia
  • 261
  • 3
  • 9
  • after 2-3 hours i find this is the issue. remove `/auth` and it started loading the app. But when the login screen from keyclock says page not found – Sridhar Natuva Nov 27 '22 at 20:09
8

After several painful hours, I discovered that spelling the Realm Name incorrectly on your frontend app can also lead to the same error. Note that Realm Names are case-sensitive.

Balocodes
  • 577
  • 7
  • 6
4

I solved without /auth suffix. for today, you shouldnt write "/auth" suffix path.

withoutOne
  • 723
  • 1
  • 6
  • 14