ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

学习通粘贴限制破解指南:前端事件拦截与绕过技术详解

学习通粘贴限制破解指南:前端事件拦截与绕过技术详解 1. 学习通粘贴限制的底层逻辑与破解思路1.1 为什么学习通要限制粘贴用过学习通的人都知道在网页版答题或者填写主观题的时候直接按 CtrlV 是没反应的右键菜单里的“粘贴”选项也经常是灰的。很多人第一反应是“我键盘坏了”或者“浏览器出bug了”其实都不是这是学习通前端故意做的限制。从产品设计的角度来说学习通这么做的理由很简单防止学生直接从题库或者文档里复制答案粘贴进去。尤其是考试场景下如果能随便粘贴那考试就失去了意义。所以他们在前端加了一层拦截监听paste事件然后调用preventDefault()把默认的粘贴行为干掉。同时还会禁用右键菜单防止你通过右键菜单绕过键盘快捷键。但这里有一个关键点这种限制是纯前端的只发生在浏览器层面。也就是说它并没有在服务器端做校验只是在你输入的那一刻拦截了粘贴动作。这就意味着只要你能绕过前端的这层拦截粘贴就能正常工作。1.2 前端限制的三种常见实现方式我拆过不少类似的学习平台前端代码粘贴限制的实现方式基本逃不出这三种第一种是监听paste事件。代码大概长这样document.addEventListener(paste, function(e) { e.preventDefault(); return false; });这种是最常见的直接在事件层面把粘贴行为掐断。第二种是监听keydown事件检测到 CtrlV 或者 CommandV 的时候直接拦截document.addEventListener(keydown, function(e) { if ((e.ctrlKey || e.metaKey) e.key v) { e.preventDefault(); return false; } });第三种是禁用右键菜单让你没法通过右键来粘贴document.addEventListener(contextmenu, function(e) { e.preventDefault(); return false; });很多时候这三种是组合使用的所以你会感觉“怎么都粘不进去”。但理解了原理之后破解思路就很清晰了要么阻止这些事件监听器生效要么直接绕过它们用其他方式把内容塞进输入框。1.3 破解的核心思路既然限制是在前端做的那破解也就在前端做。核心思路有三个方向第一个方向是移除事件监听器。如果能找到学习通绑定的那些拦截函数把它们解绑粘贴就恢复正常了。但问题是现代前端框架比如 Vue、React绑定事件的方式比较隐蔽直接removeEventListener不一定能找到对应的函数引用。第二个方向是在捕获阶段拦截事件。浏览器的事件流分为捕获阶段和冒泡阶段学习通的监听器大概率是绑在冒泡阶段的。如果我们能在捕获阶段就把事件截住并且阻止它继续传播那学习通的监听器就收不到这个事件了。第三个方向是直接操作输入框的值。不管前端怎么拦截粘贴输入框本身还是一个 DOM 元素我们可以直接用 JavaScript 修改它的value或者innerHTML然后手动触发input事件让框架知道内容变了。这种方式最暴力但也最有效。实际操作中我一般会组合使用第二和第三种方式成功率最高。2. 电脑网页版解除粘贴限制的完整操作2.1 准备工作浏览器选择与环境确认先说浏览器。我实测下来Chrome 和 Edge 的成功率最高Firefox 也可以但偶尔会有兼容性问题。不建议用那些小众浏览器开发者工具的界面和功能可能不一样照着教程操作容易卡住。打开学习通网页版登录进去找到你要答题的那个页面。先别急着打开开发者工具先在输入框里试着粘贴一下确认确实被限制了。这一步很重要因为有些页面其实没有限制你折腾半天发现本来就能粘那就白忙活了。确认被限制之后按 F12 打开开发者工具。如果你按 F12 没反应试试 CtrlShiftI或者右键页面空白处选“检查”。开发者工具打开后切换到 Console控制台标签页。注意第一次在 Console 里粘贴代码的时候Chrome 会弹出一个警告大意是“不要粘贴你不理解的代码”。这是浏览器的安全机制不是学习通搞的。你需要手动输入“允许粘贴”这四个字然后按回车才能继续粘贴。2.2 方法一通过 Console 移除粘贴拦截这是最直接的方法。在 Console 里输入以下代码然后按回车// 移除所有 paste 事件监听器 document.onpaste null; document.body.onpaste null; // 克隆并替换输入框清除所有绑定的事件 var inputs document.querySelectorAll(textarea, input[typetext]); inputs.forEach(function(el) { var clone el.cloneNode(true); el.parentNode.replaceChild(clone, el); });这段代码的逻辑是这样的先把document和body上的onpaste属性清空这两个属性对应的是通过 HTML 属性方式绑定的监听器。然后找到页面上所有的文本输入框和文本域把它们克隆一份再用克隆体替换原来的元素。克隆出来的新元素不会继承原元素上绑定的事件监听器所以粘贴限制自然就没了。实测下来这个方法对大部分页面有效。但有一个副作用如果输入框里已经有内容克隆之后内容会保留因为cloneNode(true)会复制子节点和值但如果有其他框架绑定的响应式逻辑可能会失效。所以建议在输入框还是空的时候操作。2.3 方法二用捕获阶段拦截事件如果方法一不管用说明学习通的监听器不是通过 HTML 属性绑定的而是用addEventListener绑的。这时候可以用捕获阶段拦截的方式// 在捕获阶段拦截 paste 事件阻止它传播到学习通的监听器 document.addEventListener(paste, function(e) { e.stopImmediatePropagation(); }, true); // 同样拦截 keydown 和 contextmenu document.addEventListener(keydown, function(e) { if ((e.ctrlKey || e.metaKey) e.key v) { e.stopImmediatePropagation(); } }, true); document.addEventListener(contextmenu, function(e) { e.stopImmediatePropagation(); }, true);这里的关键是第三个参数true它表示在捕获阶段触发。stopImmediatePropagation()会阻止事件继续传播包括阻止同一元素上的其他监听器执行。因为我们的监听器是在捕获阶段执行的而学习通的监听器大概率在冒泡阶段所以我们的代码会先执行然后把事件截住学习通那边就收不到了。这个方法的好处是不会破坏页面原有的结构输入框还是原来的输入框框架的响应式逻辑也不受影响。缺点是如果学习通也用了捕获阶段监听那就得看谁的代码先执行了。不过这种情况比较少见。2.4 方法三直接修改输入框的值如果前两种方法都不行那就只能用最暴力的方式了直接改输入框的值。// 找到当前聚焦的输入框或者手动指定选择器 var input document.activeElement; if (input.tagName ! TEXTAREA input.tagName ! INPUT) { // 如果当前焦点不在输入框上尝试找页面上的第一个文本域 input document.querySelector(textarea) || document.querySelector(input[typetext]); } // 把你要粘贴的内容赋值进去 var content 这里放你要粘贴的内容; if (input.tagName TEXTAREA) { input.value content; } else { input.value content; } // 手动触发 input 事件让框架知道内容变了 var event new Event(input, { bubbles: true }); input.dispatchEvent(event); // 再触发一次 change 事件保险起见 var changeEvent new Event(change, { bubbles: true }); input.dispatchEvent(changeEvent);这段代码的核心是最后两行手动触发input和change事件。因为很多前端框架比如 Vue是通过监听input事件来同步数据的如果你只改了value而不触发事件框架不知道内容变了提交的时候还是空的。这个方法几乎对所有网站都有效因为它绕过了所有事件层面的拦截直接操作 DOM。缺点是需要手动把内容放进代码里不能直接用 CtrlV。不过你可以先把内容复制到剪贴板然后用navigator.clipboard.readText()读出来navigator.clipboard.readText().then(function(text) { var input document.querySelector(textarea) || document.querySelector(input[typetext]); input.value text; input.dispatchEvent(new Event(input, { bubbles: true })); input.dispatchEvent(new Event(change, { bubbles: true })); });不过navigator.clipboard.readText()需要页面有剪贴板读取权限而且必须在用户交互比如点击之后才能调用。所以你可以先点一下页面然后在 Console 里执行这段代码。2.5 方法四用书签脚本一键解除如果你经常需要解除粘贴限制每次开 Console 太麻烦可以做一个书签脚本Bookmarklet。新建一个书签名称随便写地址栏填以下内容javascript:(function(){ document.addEventListener(paste, function(e){ e.stopImmediatePropagation(); }, true); document.addEventListener(keydown, function(e){ if ((e.ctrlKey || e.metaKey) e.key v) { e.stopImmediatePropagation(); } }, true); document.addEventListener(contextmenu, function(e){ e.stopImmediatePropagation(); }, true); alert(粘贴限制已解除); })();然后在学习通页面点一下这个书签就会自动执行解除代码。这个方法的好处是不需要打开开发者工具操作更快。缺点是每次刷新页面后需要重新点一次。提示有些浏览器可能会拦截javascript:开头的书签如果点了没反应检查一下浏览器设置里有没有禁用 JavaScript 书签。3. 手机版解除粘贴限制的实操方案3.1 手机端的限制逻辑有什么不同手机版学习通的情况比网页版复杂一些。如果你用的是学习通的 App那粘贴限制是在原生层面做的前端那套 JavaScript 注入的方法用不上。但如果你用的是手机浏览器打开学习通网页版那限制逻辑和电脑网页版是一样的只是操作方式不同。先说 App 的情况。学习通 App 里输入框的粘贴限制通常是通过原生代码实现的比如在 Android 上重写onPaste方法在 iOS 上禁用paste菜单。这种情况下你没法通过 JavaScript 来绕过因为根本没有 JavaScript 执行环境。但有一个例外如果 App 内部用的是 WebView 来加载答题页面那页面本身还是网页理论上可以通过一些方式注入代码。不过普通用户很难操作需要 root 或者越狱门槛太高不推荐。所以手机端我主要讲两种方案一种是用手机浏览器打开网页版另一种是用 App 但通过其他方式绕过。3.2 手机浏览器打开网页版的设置方法手机浏览器打开学习通网页版默认可能是移动端页面功能不全。你需要手动切换到桌面版模式。以 Chrome 手机版为例第一步打开 Chrome访问学习通的网址。第二步点击右上角的三个点找到“桌面版网站”选项勾选它。第三步页面会刷新成桌面版布局这时候就和电脑上看到的差不多了。但手机浏览器通常没有开发者工具没法直接开 Console。这时候有两个办法第一个办法是用支持开发者工具的浏览器比如 Kiwi Browser安卓平台。它基于 Chromium支持安装 Chrome 扩展也可以打开开发者工具。安装之后打开学习通网页版按同样的方式在 Console 里执行代码。第二个办法是用 Via 浏览器或者 X 浏览器这些浏览器支持脚本注入。你可以在设置里找到“脚本”或者“自定义脚本”选项把解除粘贴限制的代码加进去每次打开页面自动执行。3.3 用 Kiwi Browser 在手机上执行 Console 代码Kiwi Browser 是我在安卓上最常用的工具之一。安装好之后打开学习通网页版登录进去然后按以下步骤操作第一步点击地址栏输入chrome://inspect或者直接在菜单里找“开发者工具”。不同版本的 Kiwi 菜单位置可能不一样一般在设置或者更多选项里。第二步打开开发者工具后切换到 Console 标签。这时候你会看到和电脑上一样的界面。第三步输入以下代码并执行// 手机端同样适用 document.addEventListener(paste, function(e) { e.stopImmediatePropagation(); }, true); document.addEventListener(keydown, function(e) { if ((e.ctrlKey || e.metaKey) e.key v) { e.stopImmediatePropagation(); } }, true); // 手机上没有右键菜单但有些页面会拦截长按 document.addEventListener(contextmenu, function(e) { e.stopImmediatePropagation(); }, true); // 额外处理有些页面会监听 touchstart 来阻止长按 document.addEventListener(touchstart, function(e) { // 不阻止只是确保不被其他监听器拦截 }, true);执行完之后试着在输入框里长按看看粘贴选项有没有出来。如果出来了就说明成功了。3.4 用脚本注入实现自动解除如果你觉得每次开开发者工具太麻烦可以用脚本注入的方式。以 Via 浏览器为例第一步打开 Via 浏览器点击右下角的菜单按钮找到“设置”。第二步在设置里找到“脚本”或者“自定义脚本”选项。第三步新建一个脚本名称写“学习通解除粘贴”匹配网址填学习通的域名比如*://*.chaoxing.com/*。第四步在脚本内容里填入以下代码// UserScript // name 学习通解除粘贴限制 // namespace local // version 1.0 // description 解除学习通网页版的粘贴限制 // match *://*.chaoxing.com/* // grant none // /UserScript (function() { use strict; // 在捕获阶段拦截所有相关事件 var events [paste, keydown, contextmenu, copy, cut]; events.forEach(function(eventName) { document.addEventListener(eventName, function(e) { e.stopImmediatePropagation(); }, true); }); // 额外处理移除输入框上的 onpaste 属性 var observer new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { mutation.addedNodes.forEach(function(node) { if (node.nodeType 1) { var inputs node.querySelectorAll ? node.querySelectorAll(textarea, input) : []; inputs.forEach(function(input) { input.onpaste null; input.oncopy null; input.oncut null; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })();这段脚本比之前的代码多了两个功能一是用MutationObserver监听页面变化动态移除新出现的输入框上的onpaste属性二是同时拦截了copy和cut事件防止页面在其他地方也做限制。保存脚本后每次用 Via 浏览器打开学习通脚本会自动执行不需要手动操作。3.5 iOS 设备的替代方案iOS 上的限制更严格一些因为 Safari 和大多数浏览器都不支持开发者工具和脚本注入。但有几个办法可以试试第一个办法是用 Safari 的“请求桌面网站”功能。在 Safari 里打开学习通点击地址栏左边的“AA”图标选择“请求桌面网站”。然后长按输入框看看粘贴选项有没有出来。有时候桌面版页面的限制反而更少。第二个办法是用支持用户脚本的浏览器比如 Userscripts 或者 Stay。这些 App 可以安装用户脚本原理和安卓上的脚本注入类似。安装好之后把上面的脚本代码加进去匹配学习通的域名就能自动解除限制。第三个办法是用快捷指令Shortcuts。iOS 的快捷指令可以操作剪贴板你可以做一个快捷指令先复制内容然后打开学习通运行快捷指令把剪贴板内容写入输入框。不过这个需要学习通支持 URL Scheme 或者有对应的快捷指令动作操作起来比较绕。注意iOS 上的方案成功率不如安卓因为系统限制太多。如果实在搞不定建议直接用电脑操作或者用安卓设备。4. 常见问题排查与避坑指南4.1 代码执行了但没效果怎么办这是最常见的问题。你照着教程把代码粘贴进去按了回车结果发现还是粘不进去。别急按以下顺序排查第一确认代码真的执行了。在 Console 里执行代码后如果没有报错通常会返回undefined或者某个值。如果看到红色的报错信息说明代码有问题检查一下是不是复制的时候漏了括号或者分号。第二确认页面没有刷新。有些操作会导致页面重新加载比如提交表单或者切换题目。页面一刷新之前注入的代码就失效了需要重新执行。第三确认输入框是不是在 iframe 里。有些学习平台的答题页面是嵌套在 iframe 里的你在主页面执行代码影响不到 iframe 里面的内容。这时候需要在 Console 顶部的下拉菜单里切换到对应的 iframe 上下文然后再执行代码。第四确认学习通有没有用 Shadow DOM。Shadow DOM 里的元素和外部是隔离的外部的事件监听器影响不到里面。如果输入框在 Shadow DOM 里需要用shadowRoot.querySelector来定位然后单独处理。4.2 Console 提示“允许粘贴”怎么处理这是 Chrome 的安全机制不是学习通的问题。当你第一次在 Console 里粘贴代码时Chrome 会显示一段警告大意是“不要粘贴你不理解的代码这可能导致安全问题”。你需要手动输入“允许粘贴”这四个字中文然后按回车才能继续粘贴。如果你觉得每次都要输入太麻烦可以在 Chrome 设置里关掉这个警告。打开设置搜索“开发者工具”找到“在控制台中粘贴时显示警告”选项把它关掉。不过我不建议关因为这个警告确实能防止你误粘贴恶意代码。4.3 页面检测到开发者工具打开怎么办有些学习平台会检测开发者工具是否打开如果检测到了会弹窗提示“请关闭开发者工具后刷新页面”。这种检测通常是通过比较window.outerWidth和window.innerWidth的差值来实现的因为开发者工具打开后窗口的可视区域会变小。应对方法有几个第一个方法是把开发者工具停靠在独立窗口而不是嵌入在页面底部或侧边。这样窗口尺寸不会变化检测就失效了。在开发者工具的右上角有三个点点击后选择“停靠侧边”或者“独立窗口”。第二个方法是用debugger语句绕过。在 Console 里输入以下代码// 重写检测函数 Object.defineProperty(window, outerWidth, { get: function() { return window.innerWidth; } }); Object.defineProperty(window, outerHeight, { get: function() { return window.innerHeight; } });这样检测代码拿到的outerWidth和innerWidth永远相等就不会触发弹窗了。第三个方法是直接用书签脚本不需要打开开发者工具自然也不会被检测到。4.4 粘贴进去的内容提交后变空了这个问题通常是因为你只改了输入框的value但没有触发框架的响应式更新。Vue 和 React 这类框架不会实时监听 DOM 的value变化它们只监听自己绑定的事件。所以你需要手动触发input事件var input document.querySelector(textarea); input.value 你的内容; input.dispatchEvent(new Event(input, { bubbles: true }));如果还是不行试试同时触发change和blur事件input.dispatchEvent(new Event(change, { bubbles: true })); input.dispatchEvent(new Event(blur, { bubbles: true }));有些框架会在blur的时候才同步数据所以多触发几个事件总没错。4.5 常见问题速查表问题现象可能原因解决方法代码执行后无反应页面刷新了重新执行代码代码报错复制不完整检查括号和分号输入框在 iframe 里上下文不对切换 Console 的 iframe 上下文提示“允许粘贴”Chrome 安全机制手动输入“允许粘贴”检测到开发者工具窗口尺寸变化用独立窗口模式或书签脚本提交后内容为空未触发框架事件手动触发 input 和 change 事件手机浏览器无 Console浏览器不支持换 Kiwi Browser 或 ViaiOS 无法注入脚本系统限制用桌面版模式或换设备4.6 几个我踩过的坑第一个坑不要在学习通考试的时候用这些方法。虽然技术上可行但考试场景下平台可能会开启更严格的监控比如检测鼠标轨迹、键盘输入频率等。而且考试作弊本身是违规行为后果很严重。这些方法只适合日常作业和练习场景。第二个坑不要用网上下载的所谓“学习通脚本”。很多脚本来源不明可能包含恶意代码会窃取你的账号密码或者浏览器里的其他数据。我建议自己动手用上面给的代码至少你知道每一行在干什么。第三个坑不要频繁刷新页面。有些平台会记录你的操作频率如果短时间内频繁刷新或者执行异常操作可能会触发风控导致账号被临时限制。正常操作就行别太激进。第四个坑手机端用 Kiwi Browser 的时候记得把开发者工具关掉再提交。有些平台会检测开发者工具开着工具提交可能会被标记。5. 更稳妥的替代方案与长期建议5.1 用输入法自带的剪贴板功能如果你不想折腾代码其实有一个更简单的办法用输入法的剪贴板功能。搜狗输入法、百度输入法、讯飞输入法都有剪贴板历史功能你可以先把内容复制到剪贴板然后在输入框里通过输入法的剪贴板面板选择粘贴。这个方法的原理是输入法的剪贴板是系统层面的不经过浏览器的paste事件所以学习通的拦截对它无效。实测下来这个方法在手机端和电脑端都有效而且不需要任何技术操作。具体操作在电脑上安装搜狗输入法开启剪贴板功能复制内容后在输入框里按 CtrlShiftV 或者点击输入法的剪贴板图标选择要粘贴的内容。在手机上打开输入法的剪贴板面板选择内容即可。5.2 用系统自带的文本替换功能iOS 和 Android 都支持文本替换Text Replacement功能。你可以把常用的答案设置成快捷短语比如输入dz1自动替换成一大段答案。这样就不需要粘贴了直接输入快捷码就行。iOS 的设置路径设置 - 通用 - 键盘 - 文本替换。Android 各品牌不太一样一般在输入法设置里找“快捷短语”或者“文本替换”。这个方法的缺点是只能处理固定内容如果答案经常变就不太适用。但对于那些重复性高的题目比如简答题的通用模板还是很方便的。5.3 用 OCR 识别后手动输入如果粘贴被限制但你又不想手打可以用 OCR 工具把答案图片识别成文字然后通过输入法的剪贴板粘贴。或者直接用手机拍照用系统自带的 OCR 功能提取文字再复制到剪贴板。现在很多手机都自带 OCR 功能比如华为的“智慧视觉”、小米的“扫一扫”、iPhone 的“实况文本”。识别之后直接复制然后通过输入法剪贴板粘贴绕过了浏览器的限制。5.4 关于学习通脚本的风险提示网上有很多所谓的“学习通刷课脚本”、“学习通自动答题脚本”我强烈不建议使用。原因有三第一安全风险。这些脚本大多来源不明你无法确认里面有没有恶意代码。有些脚本会窃取你的账号密码有些会在你浏览器里注入广告有些甚至会控制你的电脑。第二账号风险。学习通有风控系统如果检测到异常操作比如短时间内完成大量课程、答题速度过快可能会封禁你的账号。到时候成绩没了还得重新修得不偿失。第三道德风险。刷课、作弊本身就是违规行为一旦被查到轻则取消成绩重则记过处分。这个后果比挂科严重多了。我分享的这些方法目的是帮你解决日常学习中遇到的“复制粘贴不方便”的问题比如写作业的时候需要引用资料或者整理笔记的时候需要批量输入。这些场景下解除粘贴限制是合理的需求。但如果是考试或者刷课我劝你还是老老实实自己来。5.5 长期来看提升自己的效率才是正道折腾这些技术手段本质上是在跟平台斗智斗勇。但平台也在不断升级今天能用的方法明天可能就失效了。与其把时间花在破解限制上不如想想怎么提升自己的学习效率。比如你可以把常用的知识点整理成自己的笔记用思维导图或者卡片工具管理起来。答题的时候直接看自己的笔记比复制粘贴更快。再比如你可以用语音输入代替键盘输入现在语音识别的准确率已经很高了说话比打字快多了。我在实际使用中发现最高效的方式其实是平时把该学的学好考试的时候自然不慌。那些需要靠粘贴来解决的题目往往是因为你根本没掌握。与其想办法绕过限制不如把那个知识点搞懂下次遇到类似的题目直接就能写出来。最后再分享一个小技巧如果你经常需要在学习通上填写大段文字可以先用记事本或者备忘录写好然后通过输入法的剪贴板功能粘贴进去。这个方法不需要任何技术操作而且稳定可靠不会因为平台升级而失效。我自己就是这么干的用了两年多从来没出过问题。
返回列表