如何在前端实现X-Frame-Options？全站防iframe嵌入方法咨询

一、前端检测并阻止页面被iframe嵌入的方法 #

可以通过JavaScript判断当前页面是否处于iframe环境中，一旦检测到就执行拦截操作：

// 检测当前页面是否在iframe内
if (window.top !== window.self) {
  // 方案1：跳出iframe，直接在顶层窗口打开当前页面
  window.top.location.href = window.self.location.href;
  
  // 方案2：清空页面内容并展示禁止嵌入提示
  // document.body.innerHTML = '<h2>本网站禁止被嵌入iframe中访问</h2>';
  
  // 方案3：直接关闭当前窗口（部分浏览器可能存在权限限制）
  // window.top.close();
}

二、全站配置方式 #

要让整个网站都生效，只需要把上述脚本放到全站通用的公共JavaScript文件里（比如所有页面都会引入的common.js），或者直接嵌入到网站的公共模板头部/尾部（比如HTML的</body>标签前），确保每个页面加载时都会自动执行这段检测逻辑。

注意事项 #

这种前端方案不是绝对安全的，用户可以通过禁用JavaScript绕过检测。如果要达到最可靠的防御效果，还是建议配合后端设置X-Frame-Options响应头（比如设为DENY或SAMEORIGIN），前端方案可作为补充手段。

内容的提问来源于stack exchange，提问作者Learn-code