文章目录

• • 一、框架如何实现JS的保护
  • • 1. 模块化和组件化
    • 2. 使用环境变量
    • 3. 代码混淆和最小化
    • • `vue.config.js`
    • 4. 使用请求库和拦截器
    • • `axios.js` 文件
      • 在组件中使用 Axios 拦截器
    • 5. 服务端处理敏感逻辑
    • 6. 安全最佳实践
    • • 使用 CSP
    • 7. 依赖前端框架的内置安全特性
    • 8. 数据验证和清理
  • 二、原生JS如何保护
  • • 1. 代码混淆和最小化
    • • 1.1、使用 Terser 进行代码混淆和最小化（不明显，只是压缩、格式和变量混淆）
      • • 安装 Terser
        • 使用 Terser 进行混淆和最小化
        • 集成到 Webpack
      • 1.2、 使用 JavaScript Obfuscator
      • 1.3、 使用 UglifyJS（不明显，只是压缩和变量混淆）
      • 1.4、 集成到构建工具中
      • • 使用 Webpack 和 UglifyJS 插件
      • 1.5、**Google Closure Compiler**(失败，把传递参数搞丢了)
      • • 安装和使用
        • 使用命令行混淆代码
      • 1.6、**Babel Minify (babel-minify)**
      • • 安装和使用
        • 使用命令行混淆代码
      • 1.7、 **JScrambler**
      • • 使用 JScrambler
    • 2. 服务器端处理敏感逻辑
    • • 示例
      • • 服务端代码（例如使用 Node.js）
        • 客户端代码
    • 3. 使用 WebAssembly
    • 4. Content Security Policy (CSP)
    • • 示例
    • 5. 严格的访问控制
    • 6. 使用 HTTPS

但是：使用原生JS处理API数据的时候，会发现在浏览器中，会看到所有代码及处理逻辑，如何保护我们代码不被泄露呢？

但是如果使用框架类，JS的泄露风险比较低，毕竟框架都进行底层封装和嵌套渲染，发布的时候都会webpack或npm打包一下，想摸清楚JS代码，还要摸清框架的逻辑，且在浏览器中也没法直接看到逻辑清晰的JS处理逻辑代码，反观原始就不要打包之类，暴漏风险100%~~

那么框架是如何保护JS代码的安全呢？

我们分两个角度分析，第一，框架如何实现JS的保护，第二，原生小应用的JS如何保护？

一、框架如何实现JS的保护

这里我们就用Vue框架为例配合讲解，其他框架React，Angular，都类似。

前端框架如 Vue.js 在保护从 API 获取数据处理的 JavaScript 安全性方面有一些策略和最佳实践。尽管在客户端运行的代码无法完全避免被访问和分析，Vue.js 以及其他现代前端框架提供了一些机制和方法来增强安全性。以下是一些主要的方法：

1. 模块化和组件化

Vue.js 通过模块化和组件化组织代码，使代码结构清晰，并能更好地隔离敏感逻辑。

2. 使用环境变量

通过环境变量管理敏感信息（如 API URL），在打包时不会直接暴露在代码中。

# .env VUE_APP_API_URL=https://api.example.com  const apiUrl = process.env.VUE_APP_API_URL; 

3. 代码混淆和最小化

在生产环境中，通过构建工具进行代码混淆和最小化，减少代码可读性，增加逆向工程难度。

vue.config.js

module.exports = {   productionSourceMap: false, // 禁用生产环境的 source map   configureWebpack: {     optimization: {       minimize: true,     },   }, }; 

4. 使用请求库和拦截器

使用 Axios 等请求库，通过拦截器添加身份验证和错误处理，提高请求安全性。

axios.js 文件

import axios from 'axios';  const apiClient = axios.create({   baseURL: process.env.VUE_APP_API_URL, });  apiClient.interceptors.request.use(   config => {     const token = localStorage.getItem('token');     if (token) {       config.headers.Authorization = `Bearer ${token}`;     }     return config;   },   error => Promise.reject(error) );  apiClient.interceptors.response.use(   response => response,   error => {     if (error.response && error.response.status === 401) {       window.location.href = '/login';     }     return Promise.reject(error);   } );  export default apiClient; 

在组件中使用 Axios 拦截器

5. 服务端处理敏感逻辑

将涉及敏感数据和业务逻辑的处理移到服务端，前端仅用于数据展示。

6. 安全最佳实践

• HTTPS：使用 HTTPS 加密通信，防止数据在传输过程中被拦截。
• 访问控制和身份验证：实施严格的访问控制和身份验证，确保只有授权用户可以访问敏感数据。
• 定期审查和更新依赖项：修复已知的安全漏洞。
• 内容安全策略 (CSP)：防止跨站脚本攻击 (XSS)。

使用 CSP

在 index.html 中添加 CSP 头：

7. 依赖前端框架的内置安全特性

Vue.js 自动对插值表达式和指令属性进行 HTML 转义，以防止 XSS 攻击。利用这些内置安全特性可以显著提高应用的安全性。

8. 数据验证和清理

对所有用户输入进行验证和清理，防止恶意数据进入系统。

通过以上方法，Vue.js 能在一定程度上增加从 API 获取数据的处理逻辑的安全性，但任何在客户端运行的代码都不能完全避免被访问和分析。因此，将敏感逻辑尽可能放在服务端处理是保护应用安全的最佳实践。

二、原生JS如何保护

众所周知，JavaScript 是一种在客户端执行的语言，代码不可避免地会暴露给用户。虽然你无法完全隐藏 JavaScript 代码，但可以采取一些措施来增加代码的难度，使其不易被阅读和修改。以下是一些常见的方法：

1. 代码混淆和最小化

列举了几种方法可以有效地混淆和压缩 JavaScript 代码，增加代码的安全性，使其难以阅读和逆向工程。不过，需要注意的是，代码混淆虽然增加了代码的复杂性，但并不能完全防止恶意攻击或逆向工程。将敏感逻辑和数据处理尽量放在后端服务器中，前后端协同工作，才能最大限度地保证系统的安全性。

1.1、使用 Terser 进行代码混淆和最小化（不明显，只是压缩、格式和变量混淆）

你可以使用 Terser 工具来混淆和最小化你的 JavaScript 代码。

Terser 是 UglifyJS 的一个分支，支持 ES6+ 语法。

安装 Terser

npm install terser -g 

使用 Terser 进行混淆和最小化

terser your-script.js -o your-script.min.js -c -m 

集成到 Webpack

npm install terser-webpack-plugin --save-dev 

在 webpack.config.js 中配置 Terser 插件：

const TerserPlugin = require('terser-webpack-plugin');  module.exports = {   mode: 'production',   entry: './src/index.js',   output: {     filename: 'bundle.js',     path: __dirname + '/dist'   },   optimization: {     minimize: true,     minimizer: [new TerserPlugin()],   }, }; 

1.2、 使用 JavaScript Obfuscator

JavaScript Obfuscator 是一个流行的工具，用于混淆 JavaScript 代码。可以通过 npm 安装：

npm install javascript-obfuscator -g 

然后，可以使用以下命令对 JavaScript 文件进行混淆：

javascript-obfuscator input.js --output output.js 

1.3、 使用 UglifyJS（不明显，只是压缩和变量混淆）

UglifyJS 是另一个用于混淆和压缩 JavaScript 代码的工具。可以通过 npm 安装：

npm install uglify-js -g 

然后，可以使用以下命令对 JavaScript 文件进行混淆和压缩：

uglifyjs input.js -o output.js -m 

1.4、 集成到构建工具中

如果使用构建工具如 Webpack，可以将代码混淆集成到构建过程中。

使用 Webpack 和 UglifyJS 插件

首先，安装 Webpack 和 UglifyJS 插件：

npm install --save-dev webpack webpack-cli uglifyjs-webpack-plugin 

然后，在 webpack.config.js 中配置 UglifyJS 插件：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');  module.exports = {   mode: 'production',   entry: './src/index.js',   output: {     filename: 'bundle.js',     path: __dirname + '/dist'   },   optimization: {     minimizer: [new UglifyJsPlugin()],   }, }; 

1.5、Google Closure Compiler(失败，把传递参数搞丢了)

Google Closure Compiler 是一个强大的 JavaScript 优化工具，可以混淆和压缩代码。

安装和使用

npm install google-closure-compiler --save-dev 

使用命令行混淆代码

npx google-closure-compiler --js input.js --js_output_file output.js --compilation_level ADVANCED_OPTIMIZATIONS 

1.6、Babel Minify (babel-minify)

Babel Minify 是 Babel 的一个插件，用于压缩和混淆 JavaScript 代码。

安装和使用

npm install @babel/core @babel/cli babel-minify --save-dev 

使用命令行混淆代码

npx babel-minify input.js -o output.js 

1.7、 JScrambler

JScrambler 是一个高级的 JavaScript 和 HTML5 代码保护工具，提供混淆、加密、以及代码完整性验证等功能。

使用 JScrambler

1. 注册并登录到 JScrambler 网站。

2. 创建一个项目并上传你的 JavaScript 文件。

3. 配置混淆和加密选项。

4. 下载混淆后的代码。

最后：有个想法，可以不同工具，合并使用，大家可以自行测试。

2. 服务器端处理敏感逻辑

将涉及敏感数据和逻辑的部分放在服务器端处理，而不是在客户端。这种方式确保关键逻辑不暴露在浏览器中。

示例

假设你有一个需要验证用户身份的逻辑。你可以将此逻辑移到服务器端，并通过 API 与客户端进行通信。

服务端代码（例如使用 Node.js）

const express = require('express'); const app = express(); const bodyParser = require('body-parser');  app.use(bodyParser.json());  app.post('/api/validate-user', (req, res) => {     const { username, password } = req.body;     // 在服务器端进行验证     if (username === 'admin' && password === 'password') {         res.json({ success: true });     } else {         res.json({ success: false });     } });  app.listen(3000, () => {     console.log('Server running on port 3000'); }); 

客户端代码

                                  Login     
         

3. 使用 WebAssembly

如果你需要保护性能关键的算法或非常敏感的逻辑，可以考虑使用 WebAssembly (Wasm)。WebAssembly 是一种较低级的二进制格式，可以编译许多语言（如 C、C++、Rust）的代码，并在浏览器中运行。虽然 WebAssembly 仍然可以被逆向工程，但它比纯 JavaScript 更难理解。

4. Content Security Policy (CSP)

通过设置 Content Security Policy (CSP) 头，可以限制 JavaScript 的来源，防止恶意代码的注入。

示例

5. 严格的访问控制

确保敏感 API 只有授权用户可以访问，并且所有敏感操作在服务器端处理。

6. 使用 HTTPS

通过 HTTPS 加密传输，防止数据在传输过程中被窃取或篡改。

这些方法可以帮助你在一定程度上保护 JavaScript 代码，使其更难被用户理解和修改。但请记住，任何在客户端运行的代码都无法完全避免被访问和分析。确保将所有敏感逻辑放在服务器端处理，是保护应用安全的最佳实践。