如何将Notion页面嵌入HTML页面？解决iframe嵌入被限制问题

Notion默认对普通页面地址设置了X-Frame-Options: SAMEORIGIN响应头，会拦截非同源域名的iframe嵌入请求，你直接用普通页面地址作为iframe的src属性自然无法正常加载。

方案1：使用Notion官方生成的嵌入代码（推荐） #

• 第一步：打开需要嵌入的Notion页面，点击右上角「分享」按钮
• 第二步：开启页面的「公开访问」权限，确保访问权限设置为「所有人可以查看」
• 第三步：点击分享面板中的「嵌入」选项，复制官方生成的iframe代码即可直接使用，官方生成的地址会自动添加嵌入所需的鉴权参数，不会被跨域策略拦截

官方生成代码示例（注意路径中多了/embed/标识）：

<iframe src="https://dusty-agate-32f.notion.site/embed/b52eb9b2cf3845c4a59128b7ce1c2228?v=7a8a1bb42918428d8e4b7991214cf2b7" width="100%" height="800" frameborder="0"></iframe>

方案2：服务端代理转发 #

如果需要自定义嵌入逻辑、或者官方嵌入的功能满足不了需求，可以通过后端服务代理Notion页面请求，绕过浏览器跨域限制：

• 原理：跨域嵌入拦截是浏览器端的安全策略，由后端服务请求Notion页面内容后返回给前端，即可规避X-Frame-Options限制
• Node.js Express 简单代理示例代码：

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

app.get('/notion-proxy', (req, res) => {
  const notionPageUrl = 'https://dusty-agate-32f.notion.site/b52eb9b2cf3845c4a59128b7ce1c2228?v=7a8a1bb42918428d8e4b7991214cf2b7';
  request(notionPageUrl).pipe(res);
});

app.listen(3000);

• 前端iframe直接调用代理地址即可：

<iframe src="http://你的域名/notion-proxy" loading="lazy"></iframe>

方案3：静态导出嵌入 #

如果不需要页面内容实时更新，可以将Notion页面导出为静态HTML资源，直接部署到自己的服务器后嵌入：

• 打开目标Notion页面，点击右上角「...」更多选项，选择「导出」
• 导出格式选择「HTML」，下载导出的压缩包后解压，将静态资源部署到自己的服务器
• 直接用iframe嵌入部署后的静态HTML地址即可，无需担心跨域限制

注意事项 #

• 如果你使用的是企业版Notion工作区，需要先联系工作区管理员开启「允许公开页面嵌入到外部站点」的权限，否则即使生成官方嵌入代码也无法加载
• 代理方案和静态导出方案都会损失Notion的部分交互功能，比如评论、实时协同编辑等，如果需要完整交互优先使用官方嵌入方案

内容的提问来源于stack exchange，提问作者Ibraheem El Ansari