前台页面防护实操指南：防篡改反爬反调试全场景零门槛落地教程

前置准备

先完成基础环境和工具安装，所有命令可直接复制执行：

• Node.js 18+ 安装：Windows执行winget install OpenJS.NodeJS.LTS，Mac执行brew install node@18，Linux执行apt install nodejs npm
• JS混淆工具安装：执行npm install -g javascript-obfuscator

静态页面防篡改实操

1. 启用子资源完整性校验（SRI）

用于校验外部引入的CSS、JS资源是否被篡改，先执行以下Node脚本生成资源哈希值：

```js const crypto = require('crypto'); const fs = require('fs'); function generateSRI(filePath) { const content = fs.readFileSync(filePath); const hash = crypto.createHash('sha384').update(content).digest('base64'); return `sha384-${hash}`; } // 替换为实际的资源路径，批量生成可自行遍历目录 console.log(generateSRI('./dist/js/app.js')); ```

将生成的哈希值写入资源引入标签，完整示例：

```html ``` 重点：资源内容更新后必须重新生成哈希值，否则页面会加载失败。

2. 核心DOM内容校验

用于检测页面核心区域（如支付按钮、活动规则）是否被恶意篡改，前端校验代码：

```js window.addEventListener('load', async () => { // 替换为实际的核心DOM选择器 const coreDom = document.querySelector('.core-content'); const domHash = btoa(encodeURIComponent(coreDom.innerHTML)); const res = await fetch('/api/check-dom-hash', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({hash: domHash, pageId: '对应页面的唯一标识'}) }); const {pass} = await res.json(); if(!pass) location.href = '/error.html?code=tamper'; }) ```

服务端校验接口（基于Express）：

```js // 基准哈希提前在页面发布时生成并存入服务端配置 const domHashConfig = { 'activity_2024': '替换为页面发布时生成的基准哈希' } app.post('/api/check-dom-hash', (req, res) => { const {hash, pageId} = req.body; res.json({pass: domHashConfig[pageId] === hash}) }) ``` 重点：禁止将基准哈希存储在前端本地，必须由服务端返回校验结果。

接口反爬防护实操

1. 请求签名校验

所有接口请求添加签名校验，避免非法调用，前端签名生成代码：

```js import md5 from 'crypto-js/md5'; // 替换为自定义的16位以上随机字符串，不要泄露 const SECRET_KEY = 'a8d2f9s7h3j5k1l0p9o8i7u6y4t3r2e1'; function generateSign(params) { const sortedKeys = Object.keys(params).sort(); const str = sortedKeys.map(k => `${k}=${params[k]}`).join('&') + `&key=${SECRET_KEY}`; return md5(str).toString(); } // 请求时添加参数示例 const requestParams = { userId: 123, page: 1, timestamp: Date.now(), nonce: Math.random().toString(36).slice(2, 10) } requestParams.sign = generateSign(requestParams); ```

服务端签名校验中间件：

```js const md5 = require('crypto-js/md5'); const redis = require('./redis'); const SECRET_KEY = '和前端一致的随机字符串'; function generateSign(params) { const sortedKeys = Object.keys(params).sort(); const str = sortedKeys.map(k => `${k}=${params[k]}`).join('&') + `&key=${SECRET_KEY}`; return md5(str).toString(); } app.use('/api/', (req, res, next) => { const reqParams = req.method === 'GET' ? req.query : req.body; const {timestamp, nonce, sign, ...businessParams} = reqParams; // 校验请求有效期，5分钟外的请求直接拦截 if(Date.now() - timestamp > 5 60 1000) return res.status(403).json({msg: '请求过期'}); // 校验nonce，避免重放攻击，nonce有效期5分钟 redis.get(`nonce:${nonce}`, (err, data) => { if(data) return res.status(403).json({msg: '非法请求'}); redis.setex(`nonce:${nonce}`, 5 60, '1'); // 校验签名 const serverSign = generateSign({...businessParams, timestamp, nonce}); if(serverSign !== sign) return res.status(403).json({msg: '签名错误'}); next(); }) }) ```

2. 高频访问限流

直接在Nginx配置单IP限流，避免批量爬取，配置可直接复制：

```nginx http { 定义限流规则，单IP每秒最多10次请求，缓存区10M limit_req_zone $binary_remote_addr zone=api_limit:10m rate=10r/s; server { listen 80; server_name 你的域名; location /api/ { 允许突发20次请求，超出直接返回503 limit_req zone=api_limit burst=20 nodelay; proxy_pass http://你的后端服务地址; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } } ``` 重点：rate参数可根据业务场景调整，普通业务场景10r/s足够，活动页可适当调高。

代码反调试防护实操

1. 禁用调试入口

添加以下代码禁用F12、右键审查元素，同时触发无限debugger阻止断点调试：

```js // 禁用F12和Ctrl+Shift+I document.addEventListener('keydown', e => { if(e.key === 'F12' || (e.ctrlKey && e.shiftKey && e.key === 'I')) { e.preventDefault(); } }) // 禁用右键菜单 document.addEventListener('contextmenu', e => e.preventDefault()); // 无限debugger反调试 setInterval(() => { (function(){}).constructor('debugger')(); }, 1000); ```

2. JS代码混淆

前端打包完成后，执行以下命令混淆核心JS代码，避免反编译获取签名密钥等敏感信息：

```bash 替换为实际的JS文件目录，仅混淆核心业务代码即可 javascript-obfuscator ./dist/js --output ./dist/js --compact true --control-flow-flattening true --dead-code-injection true --debug-protection true --self-defending true ``` 重点：混淆后代码体积会增加30%-50%，不要对框架类公共JS文件执行混淆。

效果验证步骤

• 防篡改验证：用控制台修改核心DOM内容，刷新页面应自动跳转到错误页；手动修改JS文件内容，页面应触发SRI校验错误无法加载。
• 反爬验证：直接请求接口不传sign参数应返回403；单IP每秒发起20次以上请求应返回503限流错误。
• 反调试验证：按F12无反应，手动打开控制台后会持续触发debugger，无法正常断点调试代码。