篡改猴脚本无法注入学习通页面怎么办？

Question

问题：在使用Tampermonkey脚本辅助学习通网课时，常出现脚本无法注入页面的问题。主要表现为脚本不运行、自动播放功能失效、章节未完成却显示已完成等。经排查，多因学习通前端采用Vue框架动态加载内容，配合CSP（内容安全策略）限制外部脚本执行所致。此外，浏览器跨域策略、页面iframe隔离及反外挂检测机制也会阻止脚本注入。如何绕过这些限制，确保篡改猴脚本正常注入并稳定运行？

Answer 1

一、脚本注入失败的常见现象与初步排查

在使用Tampermonkey辅助学习通网课时，用户常遇到脚本无法正常运行的问题。典型表现包括：

• 视频自动播放功能失效
• 章节进度显示“已完成”但实际未完成
• Tampermonkey图标显示已启用，但页面无响应
• 控制台（Console）无任何脚本输出或报错

初步排查应从以下方向入手：

1. 确认Tampermonkey插件是否为最新版本
2. 检查脚本匹配规则（@match / @include）是否正确覆盖目标URL
3. 查看浏览器扩展权限是否开启“允许访问文件网址”和“允许在私人窗口中运行”
4. 尝试禁用其他可能冲突的扩展（如广告拦截器）

二、深入分析：前端架构与CSP策略的限制机制

学习通采用Vue.js框架构建单页应用（SPA），其内容通过异步加载和虚拟DOM渲染，导致传统脚本注入时机过早。此外，服务端设置了严格的内容安全策略（CSP），例如：

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; object-src 'none';
    

该策略禁止执行外部脚本、内联脚本及eval类操作，直接阻断了用户脚本的执行环境。可通过浏览器开发者工具的“Network”选项卡查看响应头中的CSP字段。

CSP指令	含义	对脚本的影响
script-src 'self'	仅允许同源脚本	阻止CDN或本地注入脚本
object-src 'none'	禁止插件资源	增强安全性，间接影响DOM操作
frame-ancestors 'self'	限制iframe嵌套	防止XSS，但也限制跨域通信

三、绕过CSP与动态加载的关键技术路径

为确保脚本能成功注入并稳定运行，需结合多种技术手段：

1. 调整注入时机：使用@run-at document-idle或监听MutationObserver检测Vue组件挂载完成。
2. 利用事件循环延迟执行：

// 延迟执行以等待Vue初始化
setTimeout(() => {
    if (typeof Vue !== 'undefined') {
        console.log('Vue已加载，开始注入逻辑');
        startAutoPlay();
    }
}, 3000);
    

此外，可借助webpack打包模式模拟合法模块加载，规避CSP检测。

四、应对iframe隔离与跨域策略的解决方案

学习通部分视频嵌套在独立域名的iframe中（如video.chaoxing.com），形成跨域隔离。此时主页面脚本无法访问子帧内容。

解决思路如下：

• 在Tampermonkey脚本中添加对iframe源的@match规则
• 使用window.postMessage实现跨域通信
• 通过contentWindow注入桥接脚本（需目标页面无X-Frame-Options限制）

// 检测iframe并注入控制逻辑
const iframe = document.querySelector('#videoIframe');
if (iframe && iframe.contentWindow) {
    iframe.onload = () => {
        const video = iframe.contentWindow.document.querySelector('video');
        if (video) video.playbackRate = 2.0;
    };
}
    

五、反外挂检测机制识别与规避策略

学习通前端可能部署JavaScript钩子，监控异常行为如：

• 频繁调用play()方法
• 修改currentTime跳过关键时间节点
• 伪造XMLHttpRequest上报完成状态

反制措施包括：

1. 模拟真实用户行为间隔（如随机延时1~3秒）
2. 重写原生方法代理调用痕迹
3. 使用Proxy拦截属性访问

const originalPlay = HTMLMediaElement.prototype.play;
HTMLMediaElement.prototype.play = function() {
    console.warn('Play called:', this.currentSrc);
    return originalPlay.apply(this, arguments);
};
    

六、综合优化方案与流程图

为实现稳定注入，建议采用以下综合策略：

graph TD A[启动Tampermonkey脚本] --> B{页面是否为Vue SPA?} B -->|是| C[监听DOM变化/MutationObserver] B -->|否| D[立即执行核心逻辑] C --> E[检测Vue实例是否存在] E -->|存在| F[注入播放控制模块] E -->|不存在| G[延迟重试] F --> H{是否包含iframe视频?} H -->|是| I[向iframe注入桥接脚本] H -->|否| J[直接控制主页面元素] I --> K[通过postMessage同步状态] J --> L[模拟用户交互防检测] K --> L L --> M[定期上报学习进度]

该流程整合了动态加载识别、跨域通信、反检测等关键技术环节，提升脚本鲁棒性。