Angular-Express应用中X-Frame-Options与frame-ancestors无法阻止点击劫持

• 前端页面未获取有效防护头部：你的Angular部署在S3存储桶，后端Express配置的X-Frame-Options和CSP头部仅对API请求生效，而前端页面的响应头由S3直接返回。如果S3未配置这些防护头部，加载的前端页面就没有防点击劫持的限制，自然能被嵌入iframe。
• CSP配置范围错误：Helmet在后端设置的CSP只覆盖后端接口，而前端页面的frame-ancestors规则必须通过HTTP响应头配置（meta标签不支持该规则），S3未同步配置的话，前端页面就没有对应的防护。
• 客户端frame-buster存在漏洞：纯前端的frame-buster脚本可被攻击者绕过，比如通过iframe的sandbox属性、禁用JavaScript等方式，无法作为可靠的防护手段。

• 配置S3存储桶的响应头规则：
  针对存储桶内的HTML文件（或全部静态资源）添加以下响应头：
  • X-Frame-Options: DENY
  • Content-Security-Policy: frame-ancestors 'none';
    操作路径：在S3控制台「权限」模块下，通过「存储桶策略」或「静态网站托管」配置自定义响应头；若使用CloudFront分发，可在「行为」中通过「响应头策略」添加这些规则。
• 验证响应头生效状态：
  打开浏览器开发者工具的「网络」面板，加载前端页面后查看响应头，确认上述两个防护字段存在且配置正确。
• 优化CSP配置逻辑：
  明确frameSrc和frameAncestors的区别：frameSrc控制你的页面能嵌入哪些外部iframe，frameAncestors控制哪些页面能嵌入你的页面。确保frameAncestors设为'none'，这是防点击劫持的核心规则。
• 增强客户端辅助防护：
  使用更难绕过的frame-buster脚本作为补充：

  (function() {
    if (window.top !== window.self) {
      window.top.location.href = window.self.location.href;
    }
  })();
  

  同时添加CSS规则，若页面被嵌入则隐藏内容：

  html { display: none; }
  

  再通过脚本确认未被嵌入时恢复显示：

  if (window.top === window.self) { document.documentElement.style.display = 'block'; }
  

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