如何在Chrome中用<iframe>/<frame>加载服务器页面？需设置特定请求头吗？

嘿，我来帮你理清楚这个问题～

一、基础用法逻辑 #

其实在Chrome里用<iframe>或者<frame>加载服务器页面的基础操作很直接，就像你写的测试代码那样，通过src属性指定目标页面的URL就行——除非目标服务器有特殊的访问限制，否则不需要额外设置请求头。

不过你提供的测试代码加载Google和Yahoo页面会失败，这不是Chrome的问题，而是这些大厂网站都做了安全防护：它们会返回X-Frame-Options响应头，或者用更严格的Content-Security-Policy（CSP）的frame-ancestors指令，禁止自己的页面被嵌入到非同源的框架里，这是浏览器同源策略和网站安全机制的一部分。

二、你的测试代码为啥失效？ #

先看你给出的测试代码：

<HTML>
<HEAD>
<META CHARSET="UTF-8">
<TITLE>TEST</TITLE>
</HEAD>
<FRAMESET ROWS="3%, 97%">
<FRAME SRC="HTTPS://WWW.YAHOO.COM" BORDER="0" />
<FRAME SRC="HTTPS://WWW.GOOGLE.COM" BORDER="0" />
</FRAMESET>
</HTML>

运行后两个框架都是空白，核心原因是：

• Google和Yahoo的服务器返回的响应头里包含了X-Frame-Options: SAMEORIGIN或者X-Frame-Options: DENY，Chrome会严格遵守这个规则，拒绝把这些页面加载到非同源的框架中。
• 部分网站还会用CSP的frame-ancestors 'self'规则来限制，效果和X-Frame-Options类似。

三、正常加载服务器页面的前提 #

如果是你自己可控的服务器端页面，想要在Chrome框架里正常显示，需要满足这些条件：

1. 同源场景：如果主页面和目标页面是同源（协议、域名、端口完全一致），直接用src指定URL就行，啥额外配置都不用。
2. 跨域场景：
   • 目标服务器必须配置允许跨域嵌入的响应头：
     • 可以设置X-Frame-Options: ALLOW-FROM https://你的主页面域名.com（不过这个指令浏览器支持有限，更推荐用CSP）
     • 或者设置CSP头Content-Security-Policy: frame-ancestors https://你的主页面域名.com;，明确指定允许嵌入你的页面的域名。
3. 建议放弃<frameset>：<frameset>是HTML4的旧标签，已经被HTML5废弃了，推荐用<iframe>配合CSS布局实现类似效果，兼容性和可维护性都更好。

四、修改后的测试示例（用自己的页面测试） #

假设你有自己的服务器页面https://你的域名.com/page1.html和https://你的域名.com/page2.html，可以用下面的代码测试：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Frame Test</title>
    <style>
        body { margin: 0; }
        iframe { width: 100%; border: 0; }
        .top-frame { height: 3vh; }
        .main-frame { height: 97vh; }
    </style>
</head>
<body>
    <iframe class="top-frame" src="https://你的域名.com/page1.html"></iframe>
    <iframe class="main-frame" src="https://你的域名.com/page2.html"></iframe>
</body>
</html>

如果是跨域加载自己另一个域名的页面，记得在目标服务器添加对应的CSP或者X-Frame-Options头。

五、关于请求头的补充说明 #

一般情况下，浏览器加载框架页面时会自动发送标准请求头（比如User-Agent、Accept等），不需要你手动设置。除非目标服务器要求特定的自定义请求头，这时候可能需要用JavaScript的fetch或者XMLHttpRequest先获取页面内容，再注入到框架里，但这种方式比较复杂，而且同样受同源策略限制，需要服务器配合CORS配置。

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