React前端HTTPS部署后调用HTTP Keycloak遇混合内容错误求助

问题背景 #

前端已迁移至HTTPS域名部署，调用HTTP协议的Keycloak服务时触发混合内容错误，本地部署无问题，根源是跨域+协议不一致导致浏览器阻止加载HTTP资源。技术栈：keycloak-js@^21.0.1，Keycloak为jboss/keycloak最新镜像。

错误信息 #

Mixed Content: The page at {https://frontend_page} was loaded over HTTPS, but requested an insecure frame {http:keycloak/auth/realms/master/protcol/openid-connect/3p-cookies/step1.html} This request has been blocked; the content must be served over HTTPS.

当前配置 #

Keycloak容器环境变量 #

PROXY_ADDRESS_FORWARDING=true
KC_PROXY=passthrough
KEYCLOAK_PROXY=true

NGINX配置 #

server {
    if ($host = {Frontend_domain}) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    location / {
            proxy_pass http://IP;
            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-Host   $host;
            proxy_set_header    X-Forwarded-Server $host;
            proxy_set_header    X-Forwarded-Port   $server_port;
            proxy_set_header    X-Forwarded-Proto  $scheme;
        }

        listen 80 ;
        listen [::]:80 ;
    server_name {Frontend_domain};
    return 404; # managed by Certbot

}

解决步骤 #

1. 给Keycloak加HTTPS反向代理（核心） #

浏览器禁止HTTPS页面加载HTTP资源，必须让前端通过HTTPS访问Keycloak。在现有NGINX配置里新增两个server块：

# Keycloak HTTPS代理
server {
    server_name {Keycloak_domain}; # 比如keycloak.yourdomain.com

    location / {
        proxy_pass http://{Keycloak_IP}:{Keycloak_Port}; # 指向你的Keycloak容器地址
        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-Forwarded-Port $server_port;
    }

    # 用Certbot配置SSL证书
    listen 443 ssl;
    listen [::]:443 ssl;
    ssl_certificate /etc/letsencrypt/live/{Keycloak_domain}/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/{Keycloak_domain}/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}

# Keycloak HTTP转HTTPS重定向
server {
    if ($host = {Keycloak_domain}) {
        return 301 https://$host$request_uri;
    }

    listen 80;
    listen [::]:80;
    server_name {Keycloak_domain};
    return 404;
}

改完NGINX后，把前端的Keycloak初始化地址改成https://{Keycloak_domain}/auth。

2. 调整Keycloak容器代理参数 #

当前KC_PROXY=passthrough不适合反向代理场景，换成edge模式，同时移除旧版本参数：

PROXY_ADDRESS_FORWARDING=true
KC_PROXY=edge
# 删除KEYCLOAK_PROXY=true，这个是旧版参数，新版用KC_PROXY

edge模式下，Keycloak会信任NGINX传递的X-Forwarded-Proto头部，生成HTTPS的资源链接和回调地址。

3. 修正前端Keycloak初始化配置 #

确保前端所有Keycloak相关URL都是HTTPS：

import Keycloak from 'keycloak-js';

const keycloak = new Keycloak({
  url: 'https://{Keycloak_domain}/auth',
  realm: 'master',
  clientId: '你的客户端ID'
});

别用HTTP地址或相对路径，避免Keycloak生成不安全的资源链接。

4. 检查Keycloak客户端配置（可选） #

登录Keycloak后台，确认对应客户端的Access Type是public（前端应用默认用这个），Valid Redirect URIs和Web Origins包含前端的HTTPS域名，比如https://{Frontend_domain}/*。

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