混合内容错误混合内容：{https://frontend_page} 上的页面通过 HTTPS 加载，但请求了不安全的框架 {http:keycloak}

Question

我已使用 React 将前端转移到使用 SSL 的域，并且我想在 HTTP 上使用 Keycloak。

之前当它们在本地主机上时都没关系，现在我面临混合内容的错误，我尝试了所有方法但不起作用，现在keycloak和前端有不同的域，并且它们在不同的协议上运行。

前端（HTTPs）、Keycloak（HTTP）。我在前端使用： keycloak-js": "^21.0.1

Keycloak 版本是从 jboss/keycloak 的 docker 镜像中提取的最新版本。

完整错误：

Mixed Content the error 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.

此外，当我使用这些环境变量运行容器时：

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

}

Answer 1

理想情况下，您需要将 Keycloak 配置为通过 HTTPS 提供服务。如果 Keycloak 在 Docker 容器中运行，并且您无法直接配置 SSL，则可以使用 NGINX 等反向代理通过 HTTPS 为 Keycloak 提供服务。

为您的 Keycloak 域获取 SSL 证书。您可以使用 Certbot (Let's Encrypt) 或任何其他证书颁发机构。然后配置 NGINX 通过 HTTPS 反向代理到 Keycloak：

server {
    listen 443 ssl;
    server_name keycloak_domain;

    ssl_certificate /etc/letsencrypt/live/keycloak_domain/fullchain.pem; # Path to your SSL certificate
    ssl_certificate_key /etc/letsencrypt/live/keycloak_domain/privkey.pem; # Path to your SSL private key

    location / {
        proxy_pass http://keycloak_internal:8080; # Keycloak internal URL and port
        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-Host $host;
        proxy_set_header X-Forwarded-Port $server_port;
    }
}

然后重新启动 NGINX 以应用更改 (

sudo systemctl restart nginx

)。

确保 Keycloak 知道它是通过代理提供服务的：

• PROXY_ADDRESS_FORWARDING

  ：设置为

  true

  以使 Keycloak 在代理环境中构建正确的 URL。
• KC_PROXY：根据您的 Keycloak 版本，如果您通过 SSL 终止的代理提供服务，请确保将其正确配置为

  edge

  。

从这个答案来看，对于 Keycloak 版本 18.x 及更高版本，不推荐使用 web-context 设置自定义基本 URL。您现在拥有

--http-relative-path

参数（或 Docker 中的

KC_HTTP_RELATIVE_PATH

环境变量）来指定相对于根 (

/

) 的路径。

所以你应该将（对于最新版本的 Keycloak）添加到你的

docker-compose.yml

environment:
  - KC_HTTP_RELATIVE_PATH=/keycloak

或添加到您的

docker run

命令

-e KC_HTTP_RELATIVE_PATH=/keycloak

这将确保 Keycloak 生成正确反映代理路径的 URL（用于重定向、服务调用等），有助于解决通过反向代理设置访问时与路径相关的问题。

最后，更新前端代码中的 Keycloak 初始化以指向 Keycloak 的 HTTPS URL。 如果您从不同的域提供 Keycloak 和前端，请确保在 Keycloak 中正确配置CORS设置以允许来自您的前端域的请求。