为何keycloak-angular无法处理内嵌iframe的认证请求？

核心原因：iframe发起的导航请求（从请求头Sec-Fetch-Mode: navigate可确认）不会经过Angular的HTTP拦截器，而keycloak-angular的Token拦截仅对HttpClient发起的请求生效，因此浏览器直接发起的iframe请求不会自动携带Bearer Token，导致后端返回401。

另外注意响应头中的X-Frame-Options: DENY，该字段会直接阻止页面嵌入iframe，需后端先调整配置（改为SAMEORIGIN或直接移除——你的CSP已配置frame-ancestors允许前端域名，CSP优先级更高）。

方案一：通过Angular HttpClient获取PDF Blob（推荐） #

用HttpClient请求PDF接口（该请求会被keycloak拦截器自动带上Token），拿到Blob后生成本地Object URL给iframe加载，完全规避iframe直接请求的问题。

组件代码： #

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { Component, OnDestroy, OnInit } from '@angular/core';

@Component({
  selector: 'app-pdf-viewer',
  templateUrl: './pdf-viewer.component.html'
})
export class PdfViewerComponent implements OnInit, OnDestroy {
  safeDocUrl: SafeResourceUrl | null = null;
  private docId = 1663; // 替换为实际文档ID

  constructor(
    private http: HttpClient,
    private sanitizer: DomSanitizer
  ) {}

  ngOnInit(): void {
    this.loadPdf();
  }

  ngOnDestroy(): void {
    // 清理生成的Object URL，避免内存泄漏
    if (this.safeDocUrl) {
      URL.revokeObjectURL(this.safeDocUrl.changingThisBreaksApplicationSecurity);
    }
  }

  private loadPdf(): void {
    const headers = new HttpHeaders({
      'Accept': 'application/pdf' // 明确请求PDF格式
    });

    this.http.get(`/rest-service/pdfDocuments/${this.docId}`, {
      headers,
      responseType: 'blob' // 指定响应类型为Blob
    }).subscribe({
      next: (blob) => {
        const objectUrl = URL.createObjectURL(blob);
        this.safeDocUrl = this.sanitizer.bypassSecurityTrustResourceUrl(objectUrl);
      },
      error: (err) => {
        console.error('加载PDF失败:', err);
        // 此处添加错误提示逻辑
      }
    });
  }
}

模板代码： #

<iframe *ngIf="safeDocUrl" [src]="safeDocUrl" width="100%" height="100%" frameborder="0"></iframe>

方案二：配置Keycloak通过Cookie传递Token #

如果后端支持Cookie认证，可让Keycloak把Access Token存储到Cookie中，浏览器发起的iframe请求会自动携带Cookie，后端通过Cookie验证Token。

Angular端配置： #

修改Keycloak初始化代码，调整存储策略：

import { KeycloakService } from 'keycloak-angular';

export function initializeKeycloak(keycloak: KeycloakService) {
  return () => keycloak.init({
    config: {
      url: 'https://your-keycloak-domain/auth',
      realm: 'your-realm-name',
      clientId: 'your-client-id'
    },
    initOptions: {
      onLoad: 'login-required',
      checkLoginIframe: false,
      flow: 'authorization_code', // 推荐授权码流配合PKCE
      pkceMethod: 'S256',
      useRefreshToken: true,
      enableCookieHandler: true // 开启Cookie处理
    },
    enableBearerInterceptor: true,
    bearerPrefix: 'Bearer'
  });
}

Keycloak客户端配置： #

1. 登录Keycloak管理后台，进入对应客户端
2. 切换到Settings标签，开启Access Token via Cookie
3. 同域/同站点场景设置Cookie SameSite为Lax；跨域场景设置为None并开启Secure（必须HTTPS）
4. 保存配置

方案三：URL参数携带Token（不推荐生产环境） #

临时把Token拼接到PDF接口URL上，让后端支持通过URL参数获取Token验证。该方式存在安全风险（Token会出现在URL日志、历史记录中），仅适合内部测试场景。

组件代码： #

import { KeycloakService } from 'keycloak-angular';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pdf-viewer',
  templateUrl: './pdf-viewer.component.html'
})
export class PdfViewerComponent implements OnInit {
  safeDocUrl: SafeResourceUrl | null = null;
  private docId = 1663;

  constructor(
    private keycloak: KeycloakService,
    private sanitizer: DomSanitizer
  ) {}

  ngOnInit(): void {
    const token = this.keycloak.getToken();
    const docUrl = `/rest-service/pdfDocuments/${this.docId}?access_token=${token}`;
    this.safeDocUrl = this.sanitizer.bypassSecurityTrustResourceUrl(docUrl);
  }
}

模板代码： #

<iframe [src]="safeDocUrl" width="100%" height="100%" frameborder="0"></iframe>

注意：需后端修改认证逻辑，支持从URL参数access_token中获取Token进行验证。

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