如何正确将GitHub Pages嵌入iframe？HTTPS页面内嵌iframe异常问题

我来帮你搞定这个问题！这种明明写了HTTPS却被当成HTTP请求的情况，我之前排查过好几次，大概率是重定向或者配置细节出了问题，咱们一步步来：

第一步：先确认GitHub Pages的HTTPS是否正常工作 #

首先直接在浏览器里打开 https://example.github.io/page，然后打开开发者工具的「Network」面板，看第一个请求的状态码和最终跳转后的URL协议。如果发现有从HTTPS跳到HTTP的情况，那问题出在GitHub的配置上：

• 打开你的GitHub仓库，进入「Settings > Pages」，找到「Enforce HTTPS」选项，确保它是开启状态（对于*.github.io域名，这个选项默认是开启的，但如果之前手动关闭过，一定要重新打开）。

第二步：修正iframe的路径细节 #

有时候缺少路径末尾的斜杠会触发GitHub Pages的自动重定向，比如访问https://example.github.io/page会被重定向到https://example.github.io/page/，如果这个重定向过程中协议被错误切换（虽然概率低，但确实可能发生），试试把iframe的src改成带斜杠的完整路径：

<iframe title="Page" src="https://example.github.io/page/"></iframe>

第三步：检查嵌入页面的内部资源 #

即使你的iframe用了HTTPS，如果嵌入的GitHub Pages页面本身包含HTTP协议的资源（比如图片、脚本、样式表），浏览器也会触发混合内容错误。你可以：

• 打开https://example.github.io/page的页面源码，搜索所有http://开头的链接，把它们改成https://或者相对路径；
• 如果是第三方资源，尽量替换成HTTPS版本的链接。

第四步：调整Content-Security-Policy配置 #

之前加的upgrade-insecure-requests可能没生效，或者被其他CSP规则覆盖了。试试这样调整：

方法1：用meta标签配置（适合快速测试） #

在React站点的<head>最顶部添加（确保没有其他CSP规则冲突）：

<meta http-equiv="Content-Security-Policy" content="
  upgrade-insecure-requests;
  frame-src https://example.github.io;
">

方法2：用Firebase托管头配置（更可靠） #

在你的firebase.json里添加CSP头配置，这样全站都会生效：

{
  "hosting": {
    "headers": [
      {
        "source": "**",
        "headers": [
          {
            "key": "Content-Security-Policy",
            "value": "upgrade-insecure-requests; frame-src https://example.github.io;"
          }
        ]
      }
    ]
  }
}

配置完成后，记得重新部署Firebase站点：

firebase deploy

第五步：清除浏览器缓存 #

有时候浏览器会缓存旧的重定向规则或者资源，导致错误一直存在。试试用隐私模式打开页面，或者手动清空浏览器的缓存和Cookie，再测试一次。

按照这些步骤排查下来，基本就能解决混合内容的问题了！

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