Angular 11应用首次加载AWS S3存储桶PDF触发CSP frame-src错误求助

问题根因 #

1. 组件初始化阶段，从API拉取PDF数据的请求尚未返回，_pdf为空，此时pdfUrl getter返回空字符串，<object>标签首次渲染时data属性为空，浏览器将空路径解析为当前站点路径，触发CSP的frame-src 'none'规则拦截
2. 本地开发环境默认未开启严格CSP校验，因此无报错；生产环境刷新页面时，API请求已被缓存，组件初始化时_pdf已有有效值，<object>首次渲染就加载合法S3链接，因此不会触发报错

解决方案 #

1. 新增条件渲染（推荐，可快速解决问题） #

仅当PDF链接存在时才渲染<object>标签，避免初始空值触发CSP校验，修改模板代码如下：

<ng-container *ngIf="_pdf?.url">
  <object [data]="pdfUrl | safeResource: 'resourceUrl'" class="pdf-preview" type="application/pdf">
      <p>This browser does not support PDFs.</p>
      <param name="wmode" value="transparent">
  </object>
</ng-container>

2. 校验CSP配置有效性 #

确认两处配置没有冲突：

• 检查Angular项目index.html中是否硬编码了<meta http-equiv="Content-Security-Policy">标签，如果存在需要在frame-src规则中添加S3桶域名，示例：

  <meta http-equiv="Content-Security-Policy" content="frame-src 'self' https://你的S3桶域名;">
  

• 确认服务器返回的CSP响应头中frame-src规则已添加S3桶域名，没有被其他规则覆盖

3. 替换PDF加载方式 #

如果上述方案不生效，可改用pdf.js直接解析S3返回的PDF二进制流渲染，不通过<object>/<iframe>标签加载，绕开frame-src的CSP校验规则。

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