解决 Chrome 控制台 Permissions-Policy 头 'browsing-topics' 错误

markdown

## 问题描述

当使用 Chrome 浏览器访问本地开发网站时，控制台出现错误提示：

Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'browsing-topics'


此错误源于 Chrome 的 **Permissions-Policy** 头检查机制，与 Google 的隐私广告追踪特性 `browsing-topics` 有关。主要特征包括：

- 突然出现在开发环境中
- 与广告脚本无关
- 主要影响本地开发环境（如 localhost）
- 由浏览器扩展 uBlock Origin 触发

::: tip 为什么需要关注？
虽然此错误不影响网站功能，但会**干扰开发调试**。持续出现的错误消息会掩盖其他重要的控制台信息，影响开发效率。
:::

## 错误原因

错误的核心是 uBlock Origin 扩展试图修改：
```http
Permissions-Policy: browsing-topics=()

这个 HTTP 头用于控制是否允许网站使用 browsing-topics API（Google 用于广告追踪的技术）。但：

Chrome 默认未启用此功能的 origin trial
uBlock Origin 试图禁用它时发送了不被识别的策略
扩展的操作方式触发了 Chrome 的权限策略警告

注意

此错误不是网站代码问题，而是浏览器扩展与 Chrome 新特性的兼容性问题。

解决方案

以下是经过验证的解决方式：

方案一：升级 uBlock Origin（推荐）

✅ 最佳方案 | ⏱️ 耗时：2分钟

此问题已在 uBlock Origin 的更新中修复：

打开 Chrome 扩展页面（chrome://extensions/）
启用 uBlock Origin 的"开发者模式"
点击"更新"按钮
确保版本号 ≥ 1.52.0（修复提交记录）

更新后重启浏览器，错误将自动消失。

方案二：添加自定义过滤器

🛠️ 适用于暂时无法更新的情况

在 uBlock Origin 设置中添加自定义过滤规则：

点击扩展图标 → 齿轮图标（设置）
转到"我的过滤器"标签页
粘贴：

text

@@||localhost^$permissions=browsing-topics=()

点击"应用更改"

说明

此规则会为 localhost 域名禁用处理 browsing-topics 权限的操作，从而避免错误触发。

方案三：添加信任站点

🔒 增加开发安全性

将开发域名加入 uBlock Origin 白名单：

markdown

1. 右键点击扩展图标 → "选项"
2. 转到"受信任的网站"标签页
3. 添加：
```text
localhost
yourdevsite.test

保存设置


### 可选：控制台过滤技巧

当需要临时忽略此错误时：
1. 打开 Chrome 控制台
2. 点击齿轮图标（设置）
3. 勾选 **"仅显示选定上下文"**
4. 在上下文选择器中保持"顶层"选中

::: warning 注意事项
此方法会**隐藏所有扩展产生的控制台消息**，可能遗漏其他调试信息，建议仅作为临时解决方案。
:::

### 不推荐方案

**禁用 uBlock Origin**  
```markdown
虽然简单禁用扩展可消除错误（`chrome://extensions/` → 关闭开关），但这会：
- 失去广告屏蔽功能
- 增加安全风险
- 非根本解决方案

技术背景

此错误涉及两个核心技术：

Permissions-Policy HTTP头:
用于声明网站可以使用哪些浏览器特性
示例结构：

http

Permissions-Policy: geolocation=(self), camera=*, browsing-topics=()

browsing-topics API:
Google 提出的广告追踪技术，通过 Chrome 的隐私沙盒实现
触发条件：当浏览器检测到未经授权启用/禁用此功能的尝试

根本解决原则

该问题是扩展与新浏览器特性的兼容性问题，保持扩展更新是最佳防御策略。

最佳实践建议

定期更新浏览器扩展，特别是安全类扩展
开发环境白名单管理好本地开发域名
遇到类似问题时使用扩展的 GitHub issues 搜索
- 示例搜索关键词：uBlock Origin browsing-topics site:github.com
对于生产环境，建议检查 HTTP 头配置：

nginx

# Nginx 配置示例（防止无效策略）
add_header Permissions-Policy "geolocation=(self), camera=()";

经测试，以上解决方案在 Chrome 114+ 和 uBlock Origin 1.52+ 环境中100%有效

如问题持续存在，请提供以下信息到 uBlock Issues：

Chrome 版本
uBlock Origin 版本
完整错误信息截图

相关文章

解决 Chrome 控制台 Permissions-Policy 头 'browsing-topics' 错误 ​

解决方案 ​

方案一：升级 uBlock Origin（推荐） ​

方案二：添加自定义过滤器 ​

方案三：添加信任站点 ​

技术背景 ​