使用Iframe嵌入网页遇X-Frame-Options限制，求替代方案与绕过方法

一、替代iframe的嵌入方式 #

以下方法部分仍会受X-Frame-Options限制，适合你能控制目标网站配置的场景，或作为静态展示方案：

1. <object>标签 #

和iframe功能类似，可用于嵌入网页，但同样会被X-Frame-Options拦截，仅当目标站允许嵌入时生效：

<object data="https://your-target-site.com" width="100%" height="800px"></object>

2. <embed>标签 #

功能与<object>接近，同样受同源限制约束：

<embed src="https://your-target-site.com" width="100%" height="800px">

3. 服务器端代理渲染 #

自己搭建后端服务，请求目标网页的HTML内容，再将内容返回给作品集页面，相当于做一个中转。这种方式不受浏览器端的X-Frame-Options限制（因为请求来自你的服务器）。

示例（Node.js + Express）：

const express = require('express');
const axios = require('axios');
const app = express();

app.get('/proxy', async (req, res) => {
  try {
    const targetUrl = req.query.url;
    const response = await axios.get(targetUrl);
    res.send(response.data);
  } catch (err) {
    res.status(500).send('Failed to fetch content');
  }
});

app.listen(3000);

在作品集页面中通过后端代理加载内容：

<div id="embedded-content"></div>
<script>
fetch('/proxy?url=https://your-target-site.com')
  .then(res => res.text())
  .then(html => {
    document.getElementById('embedded-content').innerHTML = html;
  });
</script>

注意：需处理样式、脚本的相对路径问题，避免资源加载失败。

4. 静态截图+交互引导 #

如果只需要展示网页效果，不需要实时交互，可以用工具（如Puppeteer、Selenium）生成网页高清截图，嵌入到作品集页面后添加跳转链接：

<a href="https://your-target-site.com" target="_blank">
  <img src="your-site-screenshot.png" alt="你的网页展示" width="100%">
</a>
<p>点击图片打开完整网页</p>

5. Web Components封装（需控制目标站代码） #

如果能修改目标网站的代码，可将页面核心内容封装为Web Component，然后在作品集页面中引入组件脚本直接使用：

<!-- 目标站定义组件 -->
<script>
class MyWebComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<!-- 你的网页核心内容 -->`;
  }
}
customElements.define('my-web-component', MyWebComponent);
</script>

<!-- 作品集页面引入并使用 -->
<script src="https://your-target-site.com/component.js"></script>
<my-web-component></my-web-component>

二、关于绕过X-Frame-Options限制 #

没有合法的前端绕过方案——X-Frame-Options是浏览器强制执行的安全机制，目的是防止点击劫持攻击。如果目标网站是你自己的，最直接有效的方法是修改服务器配置：

1. 修改X-Frame-Options：将其设置为allow-from https://your-portfolio-domain.com，允许你的作品集域名嵌入。注意部分旧浏览器对allow-from支持有限。
2. 改用Content-Security-Policy的frame-ancestors指令（推荐）：这是更现代、灵活的替代方案，可指定多个允许的嵌入域名：
   • Nginx配置示例：add_header Content-Security-Policy "frame-ancestors 'self' https://your-portfolio-site.com;"
   • Apache配置示例：Header set Content-Security-Policy "frame-ancestors 'self' https://your-portfolio-site.com;"

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