嵌入第三方平台

概述

在 Baklib 上创建的应用（Wiki、帮助中心、文档站等）可嵌入到 其他网站、APP WebView、客服聊天窗口 中。Baklib 默认启用较严格的 内容安全策略（CSP）；被 iframe 嵌入时，须在 应用设置 → 域名管理 → 配置 中放行宿主域，否则浏览器会拦截跨域嵌套。

本篇说明 CSP 配置、iframe 嵌入示例，以及统计代码等 head 注入场景。单页 FAQ 短答见如何将站点嵌入第三方平台？。

操作步骤

步骤一：确认被嵌入的站点地址

在 应用库 打开目标应用 前台访问，复制对外 URL（试用子域名或自定义域名）。
确认宿主页面使用 HTTPS（混合内容可能导致 iframe 被浏览器阻止）。
若需登录态在嵌入场景可用，同步查阅域名配置中的 Cookie SameSite 说明，见域名管理。

预期结果：明确「被嵌站点域名」与「宿主站点域名」两个主体。

步骤二：配置 CSP 允许被嵌入

进入应用 后台管理 → 应用设置 → 域名管理。
在域名列表中点击目标域名右侧配置，打开域名配置弹窗。
在 内容安全策略（CSP） 区域点击 新增配置。
添加 frame-ancestors 指令，列出允许嵌入本站的父页面来源。

示例（允许 www.example.com 及其子路径嵌入）：

frame-ancestors: www.example.com self

self：允许同源页面嵌套。
宿主域名：填写实际父页面域名，多个来源空格分隔。
其他指令（script-src、img-src 等）按站点实际外链资源按需添加；完整指令说明见 MDN Content-Security-Policy。

保存配置；必要时点击模块旁刷新使策略生效。

预期结果：宿主站 iframe 加载 Baklib 页面时不再出现「拒绝被嵌入」类 CSP 报错。

步骤三：在宿主页面添加 iframe

在宿主网站 HTML 或模板中插入 iframe，将 src 指向 Baklib 前台地址：

<iframe
  src="https://help.example.com/docs/getting-started"
  title="帮助中心"
  frameborder="0"
  class="w-full h-screen"
  allow="fullscreen"
></iframe>

实践建议

为 iframe 设置明确宽高或响应式容器，Baklib 主题多为自适应布局，一般无需额外改版。
若仅嵌入部分路径，可直接指向栏目或文章 URL。
需要懒加载时，可结合宿主框架的 lazy-load（如旧站示例中的 turbo-frame + loading="lazy"）。

预期结果：宿主页内嵌区域正常展示 Baklib 内容，滚动与链接跳转符合预期。

步骤四：注入统计与验证代码（可选）

若需在 Baklib 页面 <head> 注入百度统计、站点验证 meta 等，而非整站 iframe：

进入 应用设置 → 界面展示。
展开 嵌入代码，在 head 区域粘贴可信第三方片段。
保存后通过浏览器「查看源代码」或开发者工具确认已注入。

注意：仅粘贴来源可信的脚本；错误片段可能导致全站白屏。这与「整站 iframe 嵌入」是不同场景。

预期结果：统计或验证代码在 Baklib 前台生效，不影响 CSP 嵌套策略。

步骤五：客服窗口等场景（可选）

在在线客服、钉钉/企微侧边栏等场景嵌入知识库：

同样先完成 frame-ancestors 放行客服控制台域名。
在客服产品后台配置「知识库链接」或「自定义页面 URL」为 Baklib 帮助中心地址。
若客服内嵌 WebView 有额外域名，逐一加入 CSP 白名单并联调。

预期结果：客服坐席或访客在不离开聊天窗口的情况下浏览 Baklib 文档。

常见问题

Q：iframe 空白或提示被 CSP 拒绝？
A：检查 frame-ancestors 是否包含宿主页 实际域名（含 www 与非 www 差异）；保存后刷新 CSP 并清浏览器缓存重试。

Q：嵌入后无法保持登录？
A：跨站 iframe 下 Cookie 受浏览器 SameSite 策略影响，在域名配置中调整 Cookie 设置，见域名管理。

Q：小程序如何嵌入？
A：使用小程序 web-view 组件加载 Baklib H5 地址；小程序业务域名须完成备案与平台校验，CSP 需放行小程序 WebView 来源（按平台文档配置）。

Q：嵌入代码与 iframe 选哪个？
A：iframe 用于在宿主站展示整页 Baklib 内容；嵌入代码 用于在 Baklib 自己页面 head 里加统计/验证，二者互补。

第三方大语言模型接入（AI 搜索 / 翻译）

若需在 Baklib 管理端配置外部大模型（如 Monica 等兼容 OpenAI 接口的服务）供 AI 搜索、翻译等能力使用：

在模型服务商平台注册并购买接口额度，创建 API Key。
获取服务商提供的 API Base URL（兼容 OpenAI 格式的端点）。
在 Baklib 组织管理后台 对应 AI 配置页填入 API Key、Base URL 与模型名称（具体入口以当前后台「AI 搜索」或组织设置为准）。
保存后在知识库或应用中测试 AI 搜索、翻译是否可用。

组织级 AI 能力与 MCP、Skills 等进阶用法见与 AI 一起工作与 MCP 教程。

概述