如何通过JavaScript修改浏览器属性实现伪造全屏模式?
实现原理
是可以实现的,和你提到的重写页面可见性属性的思路一致,本质是篡改浏览器全屏相关原生API的返回值,就能让网站的JS逻辑误以为当前处于全屏状态。
浏览器判断全屏状态主要依赖以下核心API:
document.fullscreenElement:正常全屏时返回当前处于全屏状态的DOM节点,非全屏时返回nulldocument.fullscreenEnabled:标识当前环境是否允许进入全屏document.hasFullscreen():直接返回布尔值标识是否处于全屏状态- 元素的
requestFullscreen()、document.exitFullscreen()方法,以及fullscreenchange等相关事件
示例实现代码
以下代码可以直接在控制台运行,完成全屏状态伪造:
// 重写核心全屏属性 Object.defineProperty(document, 'fullscreenElement', { get: () => document.documentElement, // 伪造根元素处于全屏状态 configurable: true }); Object.defineProperty(document, 'fullscreenEnabled', { get: () => true, configurable: true }); // 重写全屏状态查询方法 document.hasFullscreen = () => true; // 兼容旧版带前缀的API(如果目标站点使用了旧版全屏规则需要加这段) ['webkitFullscreenElement', 'mozFullScreenElement', 'msFullscreenElement'].forEach(prop => { if (prop in document) { Object.defineProperty(document, prop, { get: () => document.documentElement, configurable: true }); } }); ['webkitFullscreenEnabled', 'mozFullScreenEnabled', 'msFullscreenEnabled'].forEach(prop => { if (prop in document) { Object.defineProperty(document, prop, { get: () => true, configurable: true }); } }); // 可选:拦截全屏请求/退出请求,避免网站主动切换状态 Element.prototype.requestFullscreen = () => Promise.resolve(); document.exitFullscreen = () => Promise.resolve();
注意事项
- 该修改仅在当前页面上下文生效,刷新页面后就会重置
- 只能欺骗网站的JS逻辑,无法真的让浏览器进入全屏状态,如果网站有依赖浏览器原生全屏状态的逻辑(比如部分视频硬解码、特定输入事件限制),这部分无法模拟生效
- 火狐浏览器有独有的
window.fullScreen属性判断全屏,如果你要适配火狐需要额外重写这个属性的返回值 - 部分有反作弊机制的网站可能会检测原生API是否被篡改,该操作有可能触发站点的风险校验
内容的提问来源于stack exchange,提问作者billi
相关产品推荐
相关产品推荐

