Github Pages站点如何设置X-Frame-Options响应头及iframe替代方案

前置说明 #

X-Frame-Options属于HTTP安全响应头，只能由服务端在返回文档时通过响应头携带，HTML的<meta>标签不支持配置该头，因此你之前的配置会触发控制台报错，这是浏览器的标准限制。
同时Github Pages官方不支持用户自定义HTTP响应头，因此无法通过原生服务端配置实现X-Frame-Options: DENY的效果，可通过前端JS逻辑实现同效的防嵌入功能。 #

检测iframe嵌入并替换为图片的实现方案 #

实现逻辑 #

通过判断当前窗口是否为顶级窗口（window.top === window.self）即可识别页面是否被嵌入在iframe中，识别后替换页面内容为指定图片即可。

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>你的页面标题</title>
  <style>
    /* 统一占位图容器样式 */
    #embed-block-placeholder {
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
    }
    /* 正常内容默认隐藏，避免加载时内容闪烁 */
    #page-content {
      display: none;
    }
  </style>
</head>
<body>
  <!-- 嵌入时展示的占位图区域 -->
  <div id="embed-block-placeholder">
    <img src="./你的占位图路径.png" alt="当前页面禁止嵌入访问">
  </div>
  <!-- 正常访问时展示的页面内容 -->
  <div id="page-content">
    <!-- 这里放你站点的所有正常内容 -->
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 检测是否为顶级窗口访问
      if (window.top === window.self) {
        // 正常访问：显示内容、隐藏占位图
        document.getElementById('page-content').style.display = 'block';
        document.getElementById('embed-block-placeholder').style.display = 'none';
      }
    })
  </script>
</body>
</html>

可选增强配置 #

如果需要完全阻断嵌入访问，可在检测到嵌入时直接跳转至原页面，实现类似X-Frame-Options的完全拦截效果：

if (window.top !== window.self) {
  // 强制顶级窗口跳转到当前页面地址
  window.top.location.replace(window.self.location.href);
}

提示：前端实现的防嵌入逻辑仅在用户浏览器开启JS时生效，覆盖绝大多数普通访问场景。

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