keycloak-js 初始化失败，因为祖先违反了内容安全策略指令：“frame-ancestors 'self'

Question

我有一个 NGINX (1.14.1)，它将 /auth 请求转发到在云中运行的 Keycloak (14.0.0)。

这是 /etc/nginx/conf.d/my.domain.biz.conf 中的 NGINX 配置

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/;";
  }
}

我可以在 Keycloak 的管理控制台https://my.domain.biz/auth/中创建一个领域和一个公共客户端。我可以从https://my.domain.biz/auth/realms/myrealm/.well-known/openid-configuration列出端点

另外，我还更新了领域设置的安全防御中的以下两个值，

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/;

我的笔记本电脑上运行着一个带有keycloak-js 14.0.0的 React Web 应用程序，地址为 http://localhost:8044/，我想使用在云中运行的 Keycloak 进行身份验证。Keycloak 客户端使用以下内容进行初始化keycloak.json，

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

和 React 代码片段，

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

当访问 http://localhost:8044/ 的 Web 应用程序时，它没有重定向到 Keycloak 的登录页面，并且 Chrome 浏览器控制台中显示错误：

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

NGINX 中只记录了一行/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" "-"

您知道可能出了什么问题吗？

Answer 1

在最近版本的 keycloak /auth 参数中已被删除。所以你的初始化参数配置应该如下所示：

“auth-server-url”：“https://my.domain.biz”

使用以下堆栈进行测试：

角度版本：11.13.13

钥匙斗篷：18

keycloak 服务器：18.0.1（bitnami docker 镜像）

我希望它有帮助

Answer 2

经过几个痛苦的小时后，我发现在前端应用程序上错误地拼写领域名称也会导致相同的错误。请注意，领域名称区分大小写。

Answer 3

我解决了没有 /auth 后缀的问题。今天，您不应该编写“/auth”后缀路径。