Angular14中用IFrame嵌入SharePoint Online PowerPoint遇CSP错误

在Angular 14应用的IFrame中嵌入SharePoint Online的PowerPoint查看器时，遇到内容安全策略（CSP）错误：
拒绝嵌入'https://{my}.sharepoint.com/'，因祖先页面违反frame-ancestors指令

使用DomSanitizer处理URL并赋值给trustedUrl作为IFrame的[src]时触发上述错误，但直接在[src]中硬编码完整URL可正常运行。

相关代码如下：
组件构造器代码：

constructor(
    private sanitizer: DomSanitizer
  ) {
    this.trustedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.externalUrl as string);
  }

使用trustedUrl的IFrame代码：

<iframe [src]="trustedUrl" width="100%" frameborder="0">This is an embedded <a target="_blank" href="https://office.com">Microsoft Office</a> presentation, powered by <a target="_blank" href="https://office.com/webapps">Office</a>.</iframe>

可正常运行的硬编码URL版本：

<iframe [src]="'https://{my}.sharepoint.com/personal/{myuser}/_layouts/15/Doc.aspx?sourcedoc={mypresentationid}&amp;action=embedview'" width="100%" frameborder="0">This is an embedded <a target="_blank" href="https://office.com">Microsoft Office</a> presentation, powered by <a target="_blank" href="https://office.com/webapps">Office</a>.</iframe>

1. 确保externalUrl包含必要的嵌入参数
   SharePoint Online的PowerPoint仅允许通过带action=embedview参数的Doc.aspx链接嵌入到IFrame中。如果this.externalUrl的值缺少该参数，即使通过DomSanitizer处理，也会触发CSP的frame-ancestors限制。

2. 校验externalUrl与硬编码URL的一致性
   打印this.externalUrl的实际值，对比硬编码的URL，检查是否存在以下差异：

• 参数缺失（如action=embedview）
• URL编码不一致（如&与&的转换问题）
• 域名或路径拼写错误

3. 使用自定义管道统一处理安全URL（可选）
   将DomSanitizer的处理逻辑封装为自定义管道，确保URL处理的一致性，避免在构造器中直接处理可能带来的上下文问题：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({ name: 'safeResourceUrl' })
export class SafeResourceUrlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url: string): SafeResourceUrl {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

在模板中使用该管道：

<iframe [src]="externalUrl | safeResourceUrl" width="100%" frameborder="0">This is an embedded <a target="_blank" href="https://office.com">Microsoft Office</a> presentation, powered by <a target="_blank" href="https://office.com/webapps">Office</a>.</iframe>

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