当前位置：首页 > news >正文

前端代码安全防护完整指南

news 2025/10/1 15:07:05

随着前端应用复杂度不断提升，保护JavaScript源代码和核心业务逻辑变得越来越重要。本文将介绍多种前端代码安全防护策略，构建多层次的安全防护体系。

🔒 前端安全威胁分析

常见安全风险

源代码泄露：核心算法和业务逻辑暴露
API接口滥用：恶意调用后端接口
数据爬取：自动化工具批量获取数据
逆向工程：分析代码逻辑进行攻击

🛡️ 多层防护策略

1. 代码混淆保护

JavaScript代码混淆是最基础也是最重要的防护手段。通过变量重命名、控制流平展、字符串加密等技术，让代码难以阅读和分析。

详细的混淆配置和使用方法请参考：
浏览器中使用obfuscator混淆js完整教程

2. 反调试技术

// 检测开发者工具
function detectDevTools() {const threshold = 160;setInterval(() => {if (window.outerHeight - window.innerHeight > threshold ||window.outerWidth - window.innerWidth > threshold) {// 检测到开发者工具打开document.body.innerHTML = '检测到调试工具，页面已停止运行';}}, 500);
}// 禁用右键菜单
document.addEventListener('contextmenu', e => e.preventDefault());// 禁用F12等快捷键
document.addEventListener('keydown', e => {if (e.key === 'F12' ||(e.ctrlKey && e.shiftKey && e.key === 'I') ||(e.ctrlKey && e.shiftKey && e.key === 'C')) {e.preventDefault();}
});

3. 域名锁定和环境检测

// 域名白名单检查
function checkDomain() {const allowedDomains = ['yourdomain.com', 'www.yourdomain.com'];const currentDomain = window.location.hostname;if (!allowedDomains.includes(currentDomain)) {window.location.href = 'https://yourdomain.com';}
}// 检测运行环境
function detectEnvironment() {// 检测是否在iframe中运行if (window.self !== window.top) {throw new Error('不允许在iframe中运行');}// 检测User-Agentconst ua = navigator.userAgent;if (ua.includes('HeadlessChrome') || ua.includes('PhantomJS')) {throw new Error('检测到自动化工具');}
}

4. API接口保护

// 请求签名验证
function generateSignature(params, timestamp, nonce) {const sortedParams = Object.keys(params).sort().map(key => `${key}=${params[key]}`).join('&');const signString = `${sortedParams}&timestamp=${timestamp}&nonce=${nonce}`;return CryptoJS.SHA256(signString + SECRET_KEY).toString();
}// 请求频率限制
class RateLimiter {constructor(maxRequests = 100, timeWindow = 60000) {this.requests = [];this.maxRequests = maxRequests;this.timeWindow = timeWindow;}canMakeRequest() {const now = Date.now();this.requests = this.requests.filter(time => now - time < this.timeWindow);if (this.requests.length >= this.maxRequests) {return false;}this.requests.push(now);return true;}
}

5. 资源完整性校验

<!-- 使用SRI确保资源完整性 -->
<script src="app.js"integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"crossorigin="anonymous"></script><!-- CSP内容安全策略 -->
<meta http-equiv="Content-Security-Policy"content="default-src 'self'; script-src 'self' 'unsafe-inline';">

🔧 构建时安全配置

Webpack配置示例

const JavaScriptObfuscator = require('webpack-obfuscator');module.exports = {// 生产环境配置mode: 'production',plugins: [// 代码混淆插件new JavaScriptObfuscator({rotateStringArray: true,stringArray: true,stringArrayThreshold: 0.8,transformObjectKeys: true,unicodeEscapeSequence: false}, ['excluded_bundle.js'])],optimization: {// 移除console语句minimizer: [new TerserPlugin({terserOptions: {compress: {drop_console: true,drop_debugger: true}}})]}
};