JHipster生成Keycloak部署Nginx后控制台HTTPS混合内容错误

核心原因 #

1. Keycloak未识别反向代理后的HTTPS环境，生成的资源链接默认使用HTTP，触发浏览器CSP安全限制
2. Nginx的CSP头配置不完整，且代理规则存在路径匹配冲突

解决方案步骤 #

1. 修正Keycloak Docker配置

打开keycloak.yml，启用代理转发并指定HTTPS前端地址：

version: '3.8'
services:
  keycloak:
    image: quay.io/keycloak/keycloak:19.0.1
    command: ['start-dev --import-realm --http-relative-path=/auth']
    volumes:
      - ./realm-config:/opt/keycloak/data/import
    environment:
      - KC_DB=dev-file
      - KEYCLOAK_ADMIN=xxxxx
      - KEYCLOAK_ADMIN_PASSWORD=xxxxx
      - KC_FEATURES=scripts
      - KC_HTTP_PORT=9080
      - KC_HTTPS_PORT=9443
      # 启用反向代理支持，信任Nginx传递的X-Forwarded头
      - PROXY_ADDRESS_FORWARDING=true
      # 指定对外服务的主机名
      - KC_HOSTNAME=auth.website.com
      # 强制Keycloak生成HTTPS的前端资源链接
      - KEYCLOAK_FRONTEND_URL=https://auth.website.com/auth
    ports:
      - 9080:9080
      - 9443:9443

2. 修复Nginx配置

调整CSP头和代理规则，确保HTTPS链路一致：

server {
    server_name auth.website.com;
    return 301 https://auth.website.com$request_uri;
}
server {
    listen 443 ssl;
    ssl_certificate /etc/ssl/certs/website.crt;
    ssl_certificate_key /etc/ssl/private/website.key;
    # 修正CSP规则，允许HTTPS来源的frame
    add_header Content-Security-Policy "frame-src 'self' https://auth.website.com;";

    server_name auth.website.com www.auth.website.com;
    access_log /var/log/nginx/auth-website.log;
    error_log  /var/log/nginx/auth-website-error.log error;

    # 统一处理Keycloak的/auth路径，避免冲突
    location /auth {
        proxy_pass http://localhost:9080/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;
        # 强制将Keycloak的HTTP重定向转为HTTPS
        proxy_redirect http:// https://;
    }

    # 非Keycloak的请求保留此规则（无需则删除）
    # location / {
    #     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    #     proxy_set_header X-Forwarded-Proto $scheme;
    #     proxy_set_header X-Real-IP $remote_addr;
    #     proxy_set_header Host $http_host;
    #     proxy_buffer_size   128k;
    #     proxy_buffers   4 256k;
    #     proxy_busy_buffers_size   256k;
    #     proxy_pass http://website_ip_address:9080;
    #     proxy_redirect off;
    # }
}

3. 重启服务生效

# 重启Keycloak容器
docker-compose down && docker-compose up -d
# 重启Nginx
systemctl restart nginx

验证：访问https://auth.website.com/auth/admin/master/console/，管理控制台应正常加载，浏览器控制台无CSP报错。

内容的提问来源于stack exchange，提问作者Galilo Galilo