怎么使用HTML5中FencedFrames在保证隐私前提下嵌入个性化推荐模块-H5教程-PHP中文网

Fenced Frames 已被弃用，应改用 Protected Audience API 实现隐私优先的推荐嵌入；其通过兴趣组本地建模、document-Fenced-Frame-HTML 响应头和 interest-cohort 权限策略，在隔离环境中支持轻量级个性化推荐。

怎么使用html5中fencedframes在保证隐私前提下嵌入个性化推荐模块

Fenced Frames 是 HTML5 中一项仍在实验阶段的隐私保护机制，用于在隔离环境中嵌入第三方内容（如广告、推荐模块），限制其对主页面上下文的访问能力，从而防止跨站跟踪。但需注意：截至 2024 年底，Fenced Frames 已被 W3C 正式弃用，由更成熟、更安全的 Topics API 和 Protected Audience API（FLEDGE）取代。Chrome 自 116 版起已移除 Fenced Frames 支持，其他主流浏览器也未实现。

为什么不能继续用 Fenced Frames 嵌入推荐模块

• 它依赖标签，但该标签从未进入正式 HTML 标准，仅作为 Chrome 的临时实验特性存在；
• 不支持 DOM 访问、JavaScript 执行、Cookie 共享和 window 引用，导致个性化推荐所需的数据协同（如用户兴趣建模、实时反馈）无法实现；
• 无法与 Privacy Sandbox 的核心机制（如 interest groups、bidding logic）集成，实际无法支撑“个性化”这一关键需求。

替代方案：用 Protected Audience API 实现隐私优先的推荐嵌入

这是目前唯一被 Chrome、Edge 等支持且面向生产环境的方案，适用于推荐模块的隐私合规集成：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

推荐服务端注册兴趣组：基于用户历史行为（本地处理，不上传原始数据），浏览器自动将用户归类到若干匿名兴趣主题（如 "sports"、"electronics"），存储在本地，有效期 3 周；
主站通过 joinAdInterestGroup() 加入分组，推荐模块作为“出价方”，在 FLEDGE 的受控环境中运行渲染逻辑；
使用 + document-Fenced-Frame-HTML 响应头 加载推荐内容：服务端返回 HTML 时设置 Content-Type: document-Fenced-Frame-HTML，浏览器自动启用隔离执行环境；
推荐内容无法读取主站 Cookie 或 localStorage，也无法调用 navigator.userAgent 等指纹信息，但可通过 document.interestCohort() 获取模糊化兴趣（如 {topic: "fitness", domain: "example.com"}）做轻量级匹配。

前端嵌入推荐模块的实际步骤

假设你有一个推荐模块托管在 https://rec.example.com/widget：

确保该域名已声明参与 Privacy Sandbox（通过 Permissions-Policy: interest-cohort=() 显式开启或默认允许）；

主站页面中不直接写，而是用 JavaScript 动态创建并设置 sandbox 属性：

const iframe = document.createElement('iframe');<br>iframe.sandbox = 'allow-scripts allow-downloads';<br>iframe.src = 'https://rec.example.com/widget';<br>document.body.appendChild(iframe);

推荐服务端响应必须包含两个关键 header：
Content-Type: document-Fenced-Frame-HTML
Permissions-Policy: interest-cohort=()；
推荐模块内脚本只能调用 Privacy Sandbox API（如 document.interestCohort()），不可使用 fetch 向主站域发请求，也不可读取 document.referrer。

注意事项与兼容性提醒

• Safari 和 Firefox 当前不支持 Protected Audience API，需为这些浏览器提供降级方案（如基于第一方上下文的简单协同过滤，不依赖跨站信号）；
• 所有逻辑必须默认关闭跨站追踪：禁用第三方 Cookie、避免 URL 参数透传用户 ID；
• 推荐效果会比传统方式略低（因信号受限），但符合 GDPR、CCPA 及 Chrome 未来方向；
• 开发调试需启用 Chrome 的 chrome://flags/#privacy-sandbox-ads-apis 并使用真实 HTTPS 环境（localhost 除外）。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！