破解网页粘贴限制：超星学习通注入器的实现

发布: 7 Oct, 2025

字数:

1045

阅读时长：

5 分钟

一、背景

在使用超星学习通的时候，发现编辑器禁用了粘贴功能。这种限制通过拦截键盘事件和剪贴板事件实现，但本质上只是前端的把戏。既然是浏览器环境，我们就有办法绕过它。

这个项目的目标很简单：让粘贴功能恢复正常。

二、技术方案

1. 核心思路

超星学习通使用 UEditor 作为富文本编辑器。UEditor 运行在 iframe 中，通过监听键盘和粘贴事件来阻止用户操作。要破解这个限制，需要做三件事：

屏蔽掉页面的警告弹窗
拦截粘贴操作
直接操作 iframe 内的 DOM，把内容插进去

2. 代码架构

1
├─ script
2
│  └─ build-userjs.js   # 构建脚本
3
├─ src
4
│  └─ main.ts           # 源代码
5
├─ package.json         # 项目信息
6
└─ tsconfig.json        # ts 配置

main.ts 是主程序，编写了所有的代码逻辑。build-userjs.js 把编译后的 JS 包装成 TamperMonkey 脚本。

三、实现细节

1. 禁用弹窗

第一步是干掉那些烦人的警告：

1
function disablePopups() {
2
    window.alert = function () { };
3
    window.confirm = function () { return true; };
4
    window.prompt = function () { return null; };
5

6
    ['copy', 'cut', 'selectstart'].forEach(eventType => {
7
        document.addEventListener(eventType, function (e) {
8
            e.stopImmediatePropagation();
9
        }, true);
10
    });
11
}

直接覆盖 window.alert 等函数，让它们失效。同时拦截 copy 和 cut 事件，但注意保留 paste 和 contextmenu，因为这些是编辑器正常工作需要的。

这里用了 stopImmediatePropagation()，它比 stopPropagation() 更彻底，能阻止同一元素上其他监听器的执行。

2. 事件监听

关键在于找到 UEditor 的 iframe 并监听它的事件：

1
function setupUEditorListeners() {
2
    const iframes = document.querySelectorAll('iframe');
3
    iframes.forEach((iframe, index) => {
4
        try {
5
            const iframeDoc = iframe.contentDocument;
6
            if (iframeDoc) {
7
                iframe.contentWindow?.addEventListener('keydown', function (e) {
8
                    if (e.ctrlKey && (e.key === 'v' || e.key === 'V')) {
9
                        e.preventDefault();
10
                        injectContent();
11
                    }
12
                }, true);
13
                iframe.contentWindow?.addEventListener('paste', function (e) {
14
                    e.preventDefault();
15
                    // 处理粘贴
16
                }, true);
17
            }
18
        } catch (error) {
19
            // 跨域iframe会抛异常，忽略即可
20
        }
21
    }
22
}

遍历页面上所有 iframe，尝试访问它们的 contentDocument。如果能访问，就给它们加上键盘和粘贴事件监听。跨域的 iframe 会抛异常，直接捕获忽略。

监听器设置在第三个参数传入 true，表示捕获阶段就执行，这样能抢在编辑器自己的监听器之前拦截事件。

3. 内容注入

这是最核心的部分。有三种策略，按优先级降级：

策略一：Selection API

现代浏览器提供了 Selection API，可以精确控制光标位置：

1
function simulateTextInput(doc: Document, win: Window, content: string) {
2
    const selection = win.getSelection();
3
    if (selection && selection.rangeCount > 0) {
4
        const range = selection.getRangeAt(0);
5
        range.deleteContents();  // 删除选中内容
6
        const contentFragment = contentToNode(content);
7
        const contentNodes = Array.from(contentFragment.childNodes);
8
        contentNodes.forEach(node => {
9
            range.insertNode(node);
10
            range.setStartAfter(node);
11
            range.collapse(true);
12
        });
13
    }
14
}

先获取当前选区，删除选中的内容（如果有的话），然后逐个插入新节点。每插入一个节点，就把 range 移到它后面，保证下一个节点插在正确位置。

策略二：创建选区

如果没有现成的选区，就在可编辑元素末尾创建一个：

1
const editableElement = doc.querySelector('body.view') ||
2
    doc.querySelector('[contenteditable="true"]') ||
3
    doc.body;
4

5
if (editableElement) {
6
    const newRange = doc.createRange();
7
    newRange.selectNodeContents(editableElement);
8
    newRange.collapse(false);  // 折叠到末尾
9
    const newSelection = win.getSelection();
10
    newSelection?.addRange(newRange);
11
    // 递归调用，现在有选区了
12
    simulateTextInput(doc, win, content);
13
}

collapse(false) 把选区折叠到末尾，然后递归调用自己，这次就能走策略一的逻辑。

策略三：直接 DOM 操作

如果前两种都失败，就回退到最简单的方法：

1
const fallbackElement = doc.querySelector('body.view') || doc.body;
2
if (fallbackElement) {
3
    const newElement = contentToNode(content);
4
    fallbackElement.appendChild(newElement);
5
}

直接把内容追加到编辑器末尾。虽然不能在光标处插入，但至少能用。

4. 内容处理

contentToNode() 函数负责把纯文本转换成合适的 DOM 结构：

1
function contentToNode(content: string): DocumentFragment {
2
    const frag = document.createDocumentFragment();
3
    const normalized = content.replace(/\r\n?/g, '\n');
4
    // 两个连续换行视为段落分隔
5
    const paragraphs = normalized.split(/\n\s*\n/).map(p => p.trim()).filter(p => p.length > 0);
6
    paragraphs.forEach((paragraphText, pIndex) => {
7
        if (pIndex > 0) {
8
            frag.appendChild(document.createElement('br'));
9
            frag.appendChild(document.createElement('br'));
10
        }
11
        const lines = paragraphText.split('\n');
12
        lines.forEach((line, lIndex) => {
13
            // 处理特殊字符
14
            const processedLine = line
15
                .replace(/&/g, '&amp;')
16
                .replace(/</g, '&lt;')
17
                .replace(/>/g, '&gt;')
18
                .replace(/ /g, '&nbsp;')
19
                .replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;&ZeroWidthSpace;');
20
            if (processedLine !== line) {
21
                const span = document.createElement('span');
22
                span.innerHTML = processedLine;
23
                while (span.firstChild) {
24
                    frag.appendChild(span.firstChild);
25
                }
26
            } else {
27
                frag.appendChild(document.createTextNode(line));
28
            }
29
            if (lIndex < lines.length - 1) {
30
                frag.appendChild(document.createElement('br'));
31
            }
32
        });
33
    });
34
    return frag;
35
}

这个函数做了几件事：

统一换行符为 LF
识别段落（两个连续换行）和普通换行
转义 HTML 特殊字符，防止注入攻击
把空格和制表符转成  ，保留格式
用 <br> 表示换行

最后返回 DocumentFragment，它是轻量级的 DOM 容器，可以一次性插入多个节点。

5. 事件触发

插入内容后，需要通知编辑器内容已改变：

1
const inputEvent = new InputEvent('input', {
2
    bubbles: true,
3
    cancelable: true,
4
    inputType: 'insertText',
5
    data: content
6
});
7

8
editableElement.dispatchEvent(inputEvent);

手动触发 input 事件，让编辑器的状态同步。bubbles: true 表示事件会冒泡，这样编辑器在父元素上的监听器也能收到通知。

四、构建流程

项目使用 TypeScript 编写，构建分两步：

tsc 编译 TypeScript
build-userjs.js 包装成用户脚本

构建脚本很简单：

1
const banner = `// ==UserScript==
2
// @name         超星学习通粘贴注入器
3
// @namespace    https://keatsu.top/
4
// @version      ${packageVersion}
5
// @match        https://*.chaoxing.com/mooc-ans/*
6
// @run-at       document-start
7
// @grant        none
8
// ==/UserScript==`;
9

10
const js = fs.readFileSync(inputPath, 'utf-8');
11
fs.writeFileSync(outputPath, banner + js);