如何强制页面仅在自有域名的iframe中加载？

这个需求在在线代码编辑器、组件预览平台里很常见，像你提到的Codepen就是典型案例。下面给你几个可靠的实现方向，建议组合使用来提升安全性：

1. 服务端检查Referer请求头 #

这是最基础的服务端验证方式，通过检查请求的Referer头来判断请求是否来自你的自有域名：

• 原理：当页面被嵌入iframe时，浏览器会自动发送Referer头，值为嵌入页面的URL（即你的自有域名页面）。
• 实现示例（Node.js/Express）：

app.get('/iframe-only-content', (req, res) => {
  const allowedDomain = 'your-domain.com';
  const referer = req.get('Referer');
  
  // 检查Referer是否存在且包含允许的域名
  if (!referer || !referer.includes(allowedDomain)) {
    return res.send(''); // 返回空白页面
  }
  
  // 验证通过，返回正常内容
  res.sendFile('path/to/your-content.html');
});

• 注意事项：部分浏览器的隐私设置会屏蔽Referer头，所以不能单独依赖这个方案，需要配合其他验证手段。另外要处理好域名匹配逻辑（比如区分HTTP/HTTPS、子域名等）。

2. 前端检查window.top域名 #

在iframe页面的前端代码里，通过判断window.top的域名是否属于你的自有域名，来决定是否显示内容：

• 原理：同域下的iframe可以访问window.top的location属性；跨域情况下访问会抛出安全错误，此时即可判定为非法嵌入。
• 实现示例：

window.addEventListener('DOMContentLoaded', () => {
  const allowedHost = 'your-domain.com';
  
  try {
    // 检查顶层窗口的域名是否符合要求
    if (window.top.location.host !== allowedHost) {
      document.body.innerHTML = ''; // 清空页面内容
    }
  } catch (error) {
    // 跨域访问抛出错误，直接清空内容
    document.body.innerHTML = '';
  }
});

• 注意事项：如果你的iframe设置了sandbox属性，要确保没有禁用allow-same-origin（否则同域下也无法访问window.top.location）。

3. 使用CSP的frame-ancestors指令 #

这是浏览器层面的强制限制，通过设置HTTP响应头Content-Security-Policy来指定允许嵌入当前页面的域名：

• 原理：浏览器会直接拒绝非允许域名的嵌入请求，不会渲染页面内容。
• 实现示例（设置响应头）：

Content-Security-Policy: frame-ancestors 'self' https://your-domain.com;

• 说明：'self'表示允许当前域名嵌入，你也可以指定具体的子域名或完整URL；如果要禁止所有外部嵌入，可设置为frame-ancestors 'none';（但这样你的自有域名也无法嵌入，所以要根据需求调整）。
• 优势：这是最安全的防护手段，因为是浏览器层面的限制，无法通过前端篡改绕过。

推荐方案组合 #

为了最大化安全性，建议同时使用以上三种方案：

• 用frame-ancestors做浏览器层面的第一道防线；
• 服务端检查Referer过滤非法请求；
• 前端检查window.top作为最后兜底，防止特殊情况下的绕过。

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