语音识别转文字演示 - Web Speech API
利用浏览器语音识别 API,将说话内容实时转换为文字并显示,支持多语言。
UD5工具箱
检测当前页面 Feature Policy / Permissions Policy 状态,查看浏览器功能权限配置
正在检测功能权限...
尝试调整搜索条件或分类过滤
Feature Policy(现已演变为 Permissions Policy)是一个Web平台安全机制,允许开发者控制浏览器功能的可用性。通过它,网站可以限制或禁止特定API的使用,例如摄像头、麦克风、地理定位等。
它通过两种方式配置:
Permissions-Policy: camera=(), geolocation=(self)<iframe allow="camera 'none'; geolocation 'self'">这有助于增强安全性,防止第三方脚本或嵌入内容滥用敏感功能。
Feature Policy 是旧名称,Permissions Policy 是新规范名称。主要变化:
Feature-Policy 改为 Permissions-Policydocument.featurePolicy 演进为 document.permissionsPolicy现代浏览器同时支持两者,但建议使用新的Permissions Policy规范。
在服务器响应中添加HTTP头:
# 禁止所有源使用摄像头和麦克风
Permissions-Policy: camera=(), microphone=()
# 仅允许同源使用地理定位
Permissions-Policy: geolocation=(self)
# 允许同源和特定域名使用全屏
Permissions-Policy: fullscreen=(self "https://trusted.example.com")
# 禁止所有功能(严格模式)
Permissions-Policy: accelerometer=(), camera=(), geolocation=(), microphone=(), payment=()
在Nginx中:add_header Permissions-Policy "camera=(), microphone=()";
"需授权"(prompt)状态表示该功能在策略层面被允许,但尚未获得用户的明确授权。这是正常的安全行为:
即使Feature Policy允许使用摄像头,浏览器仍需要用户点击"允许"后才能实际访问。这种双层保护确保了用户隐私。
使用iframe的 allow 属性来精确控制嵌入内容的权限:
<!-- 禁止iframe使用摄像头和麦克风 -->
<iframe src="..." allow="camera 'none'; microphone 'none'"></iframe>
<!-- 允许iframe使用全屏和剪贴板 -->
<iframe src="..." allow="fullscreen 'self'; clipboard-read; clipboard-write"></iframe>
<!-- 使用通配符允许所有功能 -->
<iframe src="..." allow="*"></iframe>
注意:iframe的权限不能超过父页面的权限。如果父页面禁止了摄像头,iframe也无法使用。
绝大多数敏感功能必须在安全上下文(HTTPS或localhost)下才能使用:
在localhost开发环境中,浏览器通常将其视为安全上下文,方便本地调试。
两者都是Web安全机制,但关注点不同:
| 特性 | Feature Policy | CSP |
|---|---|---|
| 控制对象 | 浏览器功能API | 资源加载行为 |
| 示例 | 摄像头、麦克风、全屏 | 脚本、样式、图片来源 |
| HTTP头 | Permissions-Policy | Content-Security-Policy |
| 防护目标 | 防止功能滥用 | 防止XSS、数据注入 |
两者互补,建议同时配置以达到最佳安全效果。
在Chrome DevTools中可以通过以下方式调试:
Permissions-Policydocument.featurePolicy.features() 查看可用功能列表document.featurePolicy.allowsFeature('camera') 检测特定功能也可以在Console中查看被阻止的API调用警告信息。
利用浏览器语音识别 API,将说话内容实时转换为文字并显示,支持多语言。
比较两个JSON对象的深层差异,高亮新增、删除和修改的键值,辅助数据同步与调试。
提供HTML片段和CSS选择器,高亮匹配的元素并返回数量,快速验证选择器效果。
基于zxcvbn算法分析密码强度,估算破解时间并给出改进建议,颜色条直观显示强度等级。
通过分析字符的Unicode区块,推算文本最可能属于哪种语言/文字系统,无需网络即用。
粘贴HTML,检测所有<img>标签的alt属性,标记缺失或为空的项。
检测输入页面与声明Canonical的指向,识别不一致与循环引用,防止内容重复。
粘贴HTML或JSON-LD,工具检测并模拟Google搜索结果中的富文本摘要预览。
连接游戏手柄,实时显示摇杆、方向键、按钮的按下状态和力度,调试游戏输入。
输入自己与竞争对手页面内容,提取高频词并显示重叠与差异,发现内容机会。
检查输入的JSON-LD代码是否符合JSON语法及常见Schema.org类型规范,高亮错误。
编写即将到来的CSS原生嵌套语法,实时查看等效的传统CSS输出与匹配效果。
输入HTML或直接编写标题结构,检查h标签的层级是否跳跃,确保页面轮廓正确。
使用公共 DoH 服务解析域名,选择查询类型(A, AAAA, CNAME, MX 等)并显示结果。
粘贴两版GraphQL Schema,逐行比较类型、字段与参数的增减,识别向后不兼容改动。
粘贴多行数据,一次性生成对应多个条形码图片,可设置尺寸,适合打印标签批量。
输入卡号前几位,仅判断属于Visa、MasterCard等哪种卡组织,不检查有效性。
使用公共DNS-over-HTTPS服务,获取域名的A、AAAA、MX等记录并显示。
对页面进行两次堆快照(需手动操作),简单对比新增对象数量和大小。
随机出题,在句中填入正确的易混淆单词,巩固英语基础。
计算文章关键词及 N-gram 短语的密度,辅以 TF 可视化,帮助内容优化。
随机生成四/五/六环电阻图像,让用户输入阻值与误差,提升电子元器件识别能力。
评估网页Title标签的质量,检查长度、分隔符使用、关键词位置等给出建议。
输入 CSS 和自定义 PostCSS 插件代码,实时查看处理后的输出,用于插件开发。
通过一系列情景选择题,评估情绪感知、运用、理解与管理能力。
支持CRC8/16/32等多种多项式,计算文本或十六进制数据的循环冗余校验值,用于通信与存储校验。
打开摄像头,实时应用红绿色盲、蓝黄色盲等滤镜,沉浸式体验色觉障碍的世界。
统计文章中各个单词或自定义关键词的出现频率及密度,辅助SEO写作。
粘贴自己和竞品文章,分析关键词密度和重叠度,辅助内容优化。
输入一堆指向你的链接,分析各锚文本的分布和数量,辅助外链建设。