尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

浏览器反跳转实战:屏蔽百度等网站强制打开APP的三种技术方案

浏览器反跳转实战:屏蔽百度等网站强制打开APP的三种技术方案 1. 项目概述当搜索变成一场“绑架”如果你最近在电脑上用百度搜索点开一个结果大概率会遇到这样的场景页面加载后顶部或底部会弹出一个硕大的横幅写着“我在百度APP发现了不错的内容分享给你”或者直接出现一个全屏的“打开APP”卡片。你手滑点错或者稍不留神浏览器就会试图唤起你手机上的百度APP甚至直接跳转到一个about:blank或chrome-error://chromewebdata/这样的空白错误页让你原本顺畅的搜索体验瞬间中断。这不仅仅是百度一家的问题。小红书、淘宝、知乎等众多网站在移动端浏览时也热衷于用各种“打开APP”的卡片、弹窗来“挽留”用户。对于只想在电脑浏览器里安静查资料、快速解决问题的我们来说这种行为无异于一种“流量绑架”。它打断了工作流浪费了时间更侵犯了用户选择浏览方式的基本权利。这个项目的核心就是通过一系列技术与非技术手段从根源上阻止这类强制跳转或诱导跳转行为让你在桌面浏览器上重获干净、纯粹的搜索与浏览体验。我们将主要针对百度搜索但其原理和方法具有普适性可以举一反三应用到其他有类似行为的网站上。2. 强制跳转的原理与我们的对抗思路要解决问题得先明白问题是怎么产生的。网站诱导或强制跳转APP通常通过以下几种技术手段实现2.1 前端脚本检测与跳转这是最常见的方式。网站通过嵌入的JavaScript代码检测用户访问的设备和环境。User-Agent检测脚本读取浏览器的User-Agent字符串如果发现来自移动设备如包含Mobile、iPhone、Android等关键词就会触发后续逻辑。APP协议链接URL Scheme网页中会嵌入类似baiduboxapp://、zhihu://、tbopen://这样的链接。这是移动操作系统中用于唤起特定APP的协议。当脚本判断为移动端时会尝试通过window.location.href或创建一个隐藏的iframe来导航到这个协议链接。智能判断与降级如果唤起APP失败用户未安装脚本会执行“降级”操作可能跳转回原网页也可能跳转到一个引导下载APP的页面或者像我们常看到的跳转到about:blank导致白屏。2.2 服务端重定向有些网站在服务端Server Side就进行了判断。当服务器接收到一个来自移动端浏览器的请求时直接返回一个302 Found或301 Moved Permanently的重定向响应将用户引导至APP下载页或特定的移动端页面。这种情况下前端的干预手段可能效果有限。2.3 混合式攻击现代网站往往采用混合策略服务端返回一个基础页面这个页面里的JavaScript脚本再进行更精细的环境检测和跳转决策。这增加了拦截的复杂性。我们的对抗思路也因此分为几个层次浏览器层修改浏览器标识User-Agent伪装成桌面端绕过最基础的检测。网络请求层使用浏览器扩展或本地代理拦截并移除页面中用于跳转的脚本或元素。脚本执行层使用用户脚本管理器如Tampermonkey俗称“油猴”注入自定义脚本在网站脚本执行前或执行后删除弹窗、屏蔽跳转逻辑。注意我们的所有操作都仅限于改变本地浏览器的行为以提升个人体验不涉及对目标网站服务器的任何攻击或篡改符合常规的客户端自定义范畴。3. 实战方案一使用浏览器扩展“暴力”屏蔽对于大多数用户来说安装一个浏览器扩展是最简单、最快捷的解决方案。这里推荐两款经过实测有效的扩展。3.1 方案ARedirector重定向管理器Redirector 是一个功能强大且灵活的重定向工具。它的原理是定义一系列规则当浏览器访问的URL匹配规则时就将其重定向到另一个URL或者直接阻止请求。操作步骤在 Chrome Web Store 或 Firefox Add-ons 中搜索并安装 “Redirector”。点击扩展图标进入“选项”或“管理规则”页面。添加一条新规则用于拦截百度APP的协议链接描述阻止百度APP跳转示例URLhttps://www.baidu.com/link?url...(这里可以填任意一个百度搜索结果链接)包含模式^baiduboxapp://.*重定向至javascript:alert(百度APP跳转已被阻止)或者直接留空代表阻止请求。模式类型选择“正则表达式”。保存规则。原理与效果这条正则规则^baiduboxapp://.*会匹配所有以baiduboxapp://开头的链接请求。当网页试图通过window.location或iframe导航到这个地址时Redirector 会截获这个请求并按照规则将其“重定向”到一个无害的JavaScript提示或直接丢弃从而阻止了APP的唤起。实操心得优势规则一旦设置全局生效无需每次访问都操作。可以轻松添加其他网站的APP协议如^zhihu://^tbopen://。劣势对于复杂的、通过JavaScript动态生成跳转逻辑的情况可能无法完全覆盖。它主要拦截的是“导航”行为对于页面内动态生成的弹窗HTML元素无效。3.2 方案BUser-Agent Switcher用户代理切换器这个方案直击“设备检测”这个源头。通过将浏览器的User-Agent永久或针对特定网站修改为桌面端例如Windows Chrome的UA可以骗过很多网站的初级检测脚本。操作步骤安装如 “User-Agent Switcher and Manager” 这类扩展。添加一条针对*.baidu.com的规则。选择一个预设的桌面端User-Agent例如Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36保存并启用规则。原理与效果百度服务器和前端脚本收到的请求头中设备信息变成了桌面电脑因此可能根本不会返回移动端特有的、包含跳转代码的页面版本从源头上避免了问题。注意事项副作用有些网站的移动版和桌面版界面差异巨大。强制使用桌面版UA访问可能导致在手机或平板浏览器上页面布局错乱、操作不便。此方案更适合在桌面浏览器上使用。不完全可靠一些网站会使用更先进的检测方法如检测屏幕分辨率、触摸事件等作为辅助判断仅修改UA可能被识破。4. 实战方案二使用油猴脚本进行精准手术对于追求完美解决方案、喜欢折腾的用户Tampermonkey油猴配合自定义脚本是终极武器。它可以让我们在网页加载的特定阶段执行自定义的JavaScript代码对页面内容进行“外科手术”式的修改。4.1 脚本核心逻辑解析一个有效的反跳转脚本通常包含以下关键逻辑时机选择使用window.addEventListener(load, ...)或DOMContentLoaded事件确保在页面主体加载完成后执行我们的清理代码。更高级的会用MutationObserver监听DOM变化以应对动态加载的弹窗。元素清除通过document.querySelector、document.querySelectorAll或document.getElementsByClassName等方法定位到跳转提示栏、蒙层、卡片的HTML元素然后使用.remove()方法将其从DOM树中物理删除。事件监听阻断找到可能触发跳转的按钮如“打开APP”、“立即打开”移除其click事件监听器或将其href属性置空。脚本禁用尝试定位并禁用网站用于跳转的JS文件或代码段。但这通常比较困难因为脚本可能被混淆、压缩或动态加载。4.2 一个实战脚本示例与逐行解读下面是一个针对百度搜索跳转的简化版油猴脚本示例并附上详细注释// UserScript // name 百度搜索-去APP强制跳转 // namespace http://tampermonkey.net/ // version 1.2 // description 去除百度搜索结果页的APP打开提示栏和跳转行为还你干净搜索。 // author YourName // match *://www.baidu.com/* // match *://m.baidu.com/* // grant none // run-at document-end // /UserScript (function() { use strict; // 主清理函数 function cleanBaiduAPPJump() { console.log([反跳转脚本] 开始清理...); // 1. 移除顶部或底部的固定提示栏 // 通过CSS类名、ID或数据属性来定位元素这些需要通过观察页面HTML结构获得 const selectorsToRemove [ .app-guide-wrapper, // 示例类名实际需更新 [data-attr*app], // 包含app字样的数据属性 .bds-app-guide, .open-app, // 可以添加更多观察到的选择器 ]; selectorsToRemove.forEach(selector { document.querySelectorAll(selector).forEach(el { el.remove(); console.log(已移除元素: ${selector}); }); }); // 2. 移除全屏蒙层/卡片 const overlay document.querySelector(.app-guide-overlay); // 示例 if (overlay) { overlay.remove(); console.log(已移除全屏蒙层); } // 3. 阻止通过a标签的跳转 // 找到所有可能是APP协议链接的a标签将其href替换为#或移除 document.querySelectorAll(a[href^baiduboxapp://]).forEach(link { link.href javascript:void(0); // 替换为一个空操作 link.onclick null; // 移除可能绑定的点击事件 console.log(已禁用APP协议链接:, link); }); // 4. 监听DOM变化应对异步加载的弹窗高级技巧 const observer new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.addedNodes.length) { // 对新加入的节点再次执行清理 // 这里可以调用一个简化的检查函数避免重复全量清理 quickCheckNewNodes(mutation.addedNodes); } }); }); // 开始观察整个body的子节点变化 observer.observe(document.body, { childList: true, subtree: true }); console.log(已启动DOM变化监听); } // 简化版的新节点检查函数 function quickCheckNewNodes(nodes) { nodes.forEach(node { if (node.nodeType 1) { // 元素节点 if (node.matches (node.matches(.app-guide-wrapper) || node.querySelector(.app-guide-wrapper))) { node.remove(); console.log(动态移除新增的跳转元素); } } }); } // 执行清理页面加载完成后执行一次并设置一个延迟执行以应对特殊情况 if (document.readyState loading) { document.addEventListener(DOMContentLoaded, cleanBaiduAPPJump); } else { cleanBaiduAPPJump(); } // 3秒后再执行一次确保万无一失有些元素加载很慢 setTimeout(cleanBaiduAPPJump, 3000); })();脚本关键点解读match指定脚本生效的网址这里涵盖了百度的桌面版和移动版域名。run-atdocument-end表示在DOM加载完成后立即执行是处理页面内容的理想时机。选择器Selectors脚本的核心。你需要通过浏览器的开发者工具F12在出现跳转提示的页面上右键点击那个讨厌的横幅或卡片选择“检查”来找到它独一无二的类名class、ID或属性。上面示例中的.app-guide-wrapper是假设的你必须替换成实际观察到的值。百度经常更新前端代码选择器可能会变。MutationObserver这是一个强大的API用于监听页面DOM树的变化。因为跳转提示可能是由后续的AJAX请求或JS动态插入的仅靠初始清理不够。这个观察者能确保即使弹窗是“后来者”也能被及时清除。javascript:void(0)这是一个经典的“空链接”写法将其赋值给href属性后点击链接将不会发生任何导航。4.3 如何安装与维护脚本安装Tampermonkey在浏览器扩展商店搜索并安装。创建新脚本点击油猴图标 - “添加新脚本”。编写与调试将上面的示例代码复制进去关键是要修改selectorsToRemove数组里的选择器。保存后CtrlS刷新百度搜索页面进行测试。观察与更新如果某天脚本失效了大概率是百度的前端代码更新HTML结构变了。重复“检查元素”的步骤找到新的选择器更新你的脚本即可。实操心得优势最灵活、最彻底的解决方案。可以精确控制要删除什么、保留什么不影响页面其他功能。劣势需要一定的技术门槛且需要随着网站改版而手动维护。寻找正确的CSS选择器是成功的关键。进阶技巧除了删除元素还可以尝试覆盖网站的关键JavaScript函数。例如如果发现网站通过一个名为openApp()的函数来跳转可以在你的油猴脚本里重新定义这个函数为空函数window.openApp function() {};。这需要一定的逆向分析能力。5. 常见问题与排查技巧实录即使使用了上述方法你可能还是会遇到一些棘手的情况。下面是我在长期对抗跳转中积累的一些问题和解决方案。5.1 问题速查表问题现象可能原因排查与解决思路扩展/脚本安装后跳转弹窗依然出现。1. 选择器失效网站更新。2. 脚本执行时机过早或过晚。3. 跳转由服务端重定向控制。1.F12打开开发者工具检查弹窗元素更新脚本选择器。2. 调整油猴脚本的run-at为document-idle空闲时试试。3. 尝试修改User-Agent为桌面版这通常能解决服务端重定向。页面出现白屏地址栏显示about:blank或chrome-error://...。浏览器尝试打开APP协议链接失败陷入了错误状态。1.优先使用Redirector扩展直接拦截baiduboxapp://等协议请求。2. 在油猴脚本中更早地阻止链接生成难度较高。只在点击搜索结果链接后的新页面出现跳转。跳转逻辑存在于目标网站而非百度搜索页。1. 需要为目标网站如知乎、CSDN单独编写或寻找对应的去广告/去跳转脚本。2. 使用Redirector为这些网站的APP协议添加拦截规则。修改User-Agent后网站排版错乱或功能异常。网站为移动端和桌面端提供了完全不同的前端代码。1. 在User-Agent切换器中将规则设置为仅对特定域名生效不要全局修改。2. 尝试其他解决方案如油猴脚本只删除弹窗而不改变UA。油猴脚本的MutationObserver导致页面卡顿。监听的DOM子树太大或变化太频繁。优化观察配置{ childList: true, subtree: false }只观察直接子节点变化或者缩小观察范围到某个特定容器而非整个document.body。5.2 高级排查技巧使用浏览器开发者工具当脚本失效时开发者工具是你的最佳伙伴。元素检查Elements面板右键点击弹窗 - “检查”精准定位其HTML结构和选择器。注意查看它的父级元素有时删除父级容器更有效。网络请求Network面板刷新页面查看是否有加载特别的JS文件如app-guide.js,open-app.min.js。你可以尝试在油猴脚本中通过require引入库或者用document.createElement(script)的方式去覆盖或拦截这些JS文件的执行此操作较复杂。控制台Console面板查看是否有与跳转相关的错误或日志信息。你也可以在这里直接输入JavaScript代码进行实时测试例如document.querySelector(‘.弹窗类名’).remove()来验证你的选择器是否正确。5.3 针对其他网站的通用化思路掌握了对付百度的办法其他网站大同小异。小红书其跳转卡片通常有比较固定的类名如.note-app-guide。同样使用油猴脚本定位删除即可。知乎知乎的跳转逻辑比较复杂可能涉及多层蒙版。需要仔细分析其DOM结构。一个常见的选择器是.Modal-wrapper但需要判断哪个是APP引导弹窗。通用拦截对于任何网站最粗暴有效的方法是使用uBlock Origin这类广告屏蔽器。它不是用来屏蔽广告的其“元素选择器模式”点击扩展图标 - 点击画笔图标可以让你直接点击页面上的任意元素并将其加入屏蔽规则。你可以直接用这个功能点掉那些“打开APP”的按钮uBlock Origin会为你生成对应的CSS选择器规则并永久屏蔽。6. 方案总结与个人建议经过多种方案的尝试和长期使用我的个人体会是没有一劳永逸的银弹但“油猴脚本 基础规则拦截”的组合拳最为可靠。对于纯小白用户我建议首先尝试“Redirector”扩展。只需添加几条针对baiduboxapp://、zhihu://等协议的正则规则就能解决大部分直接的APP唤起问题设置简单效果立竿见影。对于愿意稍作学习的用户安装Tampermonkey并去知名的用户脚本网站如Greasy Fork搜索“百度 去APP”、“知乎 去APP”等关键词。通常会有社区维护的现成脚本你只需要安装即可。虽然它们也可能因网站改版而暂时失效但维护者通常更新较快。对于喜欢掌控一切的进阶用户自己编写和维护油猴脚本。这不仅能解决百度的问题更能让你具备处理任何网站类似问题的能力。从模仿现有脚本开始学习使用querySelector和MutationObserver你会打开一扇新的大门。最后再分享一个小技巧浏览器的“阅读模式”或“打印预览”功能有时可以奇迹般地剥离掉页面上所有的广告、弹窗和跳转提示只留下纯净的文字和图片内容。当所有技术手段都暂时失效时不妨试试这个“物理外挂”。毕竟我们的目的始终是高效地获取信息而不是与这些干扰手段无止境地缠斗。保持工具为你所用而非被其束缚这才是最重要的。
返回列表