怎么使用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 嵌入推荐模块

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

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

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

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

推荐服务端注册兴趣组：基于用户历史行为（本地处理，不上传原始数据），浏览器自动将用户归类到若干匿名兴趣主题（如 "sports"、"electronics"），存储在本地，有效期 3 周；
主站通过 joinAdInterestGroup() 加入分组，推荐模块作为“出价方”，在 FLEDGE 的受控环境中运行渲染逻辑；
使用 <iframe></iframe> + 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=() 显式开启或默认允许）；

主站页面中不直接写 <iframe src="https://rec.example.com/widget"></iframe>，而是用 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实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！