【HTML】iframe 标签 allow 权限汇总(例如添加复制粘贴权限)

文章目录

常见用法

  • 添加剪贴板复制粘贴权限
html 复制代码
<!-- 同时启用读和写权限 -->
<iframe src="your-content.html" allow="clipboard-read;clipboard-write"></iframe>

属性扩展

  • allow 属性汇总
权限值 说明 & 应用场景
clipboard-write / clipboard-read 允许 iframe 中的脚本写入(复制)或读取(粘贴)系统剪贴板。注意:clipboard-read 因涉及用户隐私,通常限制更严格。
fullscreen 允许 iframe 中的内容通过 requestFullscreen() 方法全屏显示。
payment 允许跨域的 iframe 使用 Payment Request API(支付请求接口)。
camera 允许 iframe 访问用户的摄像头。
microphone 允许 iframe 访问用户的麦克风。
geolocation 允许 iframe 使用 Geolocation API 获取用户的地理位置。
display-capture 允许 iframe 使用 Screen Capture API 捕获屏幕内容(如共享屏幕)。
autoplay / playback 控制 iframe 内媒体内容的自动播放和播放行为。

1、基本用法:在 <iframe> 标签中直接设置 allow 属性。

html 复制代码
<!-- 允许 iframe 使用摄像头和麦克风 -->
<iframe src="https://example.com" allow="camera; microphone"></iframe>
html 复制代码
<!-- 允许 iframe 进入全屏模式 -->
<iframe src="https://example.com" allow="fullscreen"></iframe>

2、精细控制来源:你可以指定哪些来源可以拥有该权限。权限值后可以跟上允许的来源列表。

*:允许所有来源。

'self':仅允许同源(相同协议、域名和端口)的请求。

'src':仅允许来自 iframe src 属性所指 URL 的内容。

html 复制代码
<!-- 仅允许同源的内容使用地理位置功能 -->
<iframe src="https://example.com" allow="geolocation 'self'"></iframe>

3、组合多个策略:你可以同时启用多个特性,只需用分号 ; 分隔。

html 复制代码
<!-- 允许支付、自动播放,但禁止全屏 -->
<iframe src="https://example.com" allow="payment; autoplay; fullscreen 'none'"></iframe>
相关推荐
jktantan2 小时前
Vue keep-alive 切标签后滚动位置回顶?因为 onDeactivated 里读到的 scrollTop 是 0
前端·javascript·vue.js
总要学点什么2 小时前
第89篇:三维特效-螺旋圆效果——让螺旋臂卷起一圈圈外扩的涟漪
开发语言·javascript·ecmascript·webgl·cesium·空间分析·1024程序员节
2601_962885723 小时前
quotes 字段全解:涨跌幅、振幅、换手率的口径与单位
java·前端·spring
excel3 小时前
encodeURI 和 encodeURIComponent 有什么区别?
前端
前端精髓3 小时前
调用openrouter的免费API模型
java·前端·javascript
赛博守夜人3 小时前
AI安全攻防与治理之十四:AI 安全测试不能脱离传统安全,Web、API、移动端与模型攻击面的组合拳
前端·人工智能·安全
开开心心_Every3 小时前
快速隐藏程序工具自定义快捷键一键切换
java·开发语言·前端·spring·智能手机·word·intellij-idea
networknomad4 小时前
OpenReplay:自己搭的会话回放工具,给前端排错用的
前端·其他
缓慢更新5 小时前
AI 辅助生成单测:从接口定义到用例的流水线
java·服务器·前端·网络·数据库·人工智能
陈随易5 小时前
AI 运维服务器,安全又可靠的方法
前端·后端·程序员