本文详解如何在 html5 页面中通过侧边栏点击动态加载外部 url 到右侧 iframe，并重点说明因 `x-frame-options` 或 `content-security-policy` 响应头导致加载失败的典型原因及解决方案。
在使用
? 根本原因：服务端帧防护头（Frame Options）
现代 Web 安全策略要求第三方站点自主决定是否允许被嵌入 iframe。关键响应头包括：
- X-Frame-Options: DENY 或 X-Frame-Options: SAMEORIGIN
- Content-Security-Policy: frame-ancestors ‘none’ 或 frame-ancestors ‘self’
⚠️ 注意：这些头由目标服务器返回（即 mysite.domain.com 的 HTTP 响应中），前端无法绕过或覆盖。你的 CSP 设置（）仅约束当前页面自身行为，对目标站点无任何影响。
✅ 验证与诊断方法
- 打开浏览器开发者工具 → Network 标签页
- 点击侧边栏条目，触发 iframe src 变更
- 找到对应 iframe 请求（通常为 Document 类型），点击查看 Response Headers
- 检查是否存在以下任一头：
X-Frame-Options: DENY Content-Security-Policy: frame-ancestors 'none'
若存在，即确认是目标站点主动阻止嵌入。
