本文详解如何在 html5 页面中通过侧边栏点击动态加载外部 url 到右侧 iframe，并重点解决因 `x-frame-options` 或 `content-security-policy` 导致的跨域嵌入失败问题。
在使用
? 根本原因：服务端响应头限制
最常见且易被忽略的原因是目标页面返回了以下任一 HTTP 响应头：
X-Frame-Options: DENY X-Frame-Options: SAMEORIGIN Content-Security-Policy: frame-ancestors 'none'; Content-Security-Policy: frame-ancestors 'self';
这些头由目标网站（如 https://mysite.domain.com）的服务器设置，浏览器严格遵守，前端无法绕过。你修改自己的 CSP（如 frame-src）仅控制 自己允许加载哪些源，但不改变 对方是否允许被你加载。
✅ 正确诊断方式：
打开浏览器开发者工具 → Network 标签页 → 点击侧边栏触发 iframe 加载 → 找到对应请求 → 查看 Response Headers → 检查是否存在上述禁止嵌入的头部。
✅ 解决方案与替代策略
1. 联系目标网站管理员（推荐）
若你拥有或可协调该站点，需在其服务器配置中放宽嵌入策略：
立即学习“前端免费学习笔记（深入）”；
- 将 X-Frame-Options: DENY 改为 ALLOW-FROM https://yourdomain.com（已废弃，兼容旧浏览器）
- 或更现代的做法：添加 CSP 头
Content-Security-Policy: frame-ancestors https://yourdomain.com;
⚠️ 注意：frame-ancestors 不支持 ‘self’ 通配符写法，必须明确指定你的主站域名（支持空格分隔多个域名）。
2. 服务端代理中转（适用于自有后端）
若目标站点不可控，且你有后端能力，可创建一个代理接口（如 /proxy?url=https://…），由后端发起请求并移除 X-Frame-Options 响应头（注意：仅限合法合规场景，遵守目标站 robots.txt 及服务条款）。
