[每周一更]-(第108期)：如何保护你的JavaScript代码

在这里插入图片描述

文章目录

- 一、框架如何实现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

我们从最原始的html+css+JS（javascript，以下简称JS）的初学阶段走来，再到慢慢接触框架的使用，体验到框架的魅力，也会感受到使用框架的臃肿，有时候只需要一个简单的html，然后请求API获取数据就渲染到页面展示，这种需求使用框架就显得没必要了。

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

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

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

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

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

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

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

1. 模块化和组件化

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

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <div v-if="data">{{ data }}</div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('/api/data');
        this.data = response.data;
      } catch (error) {
        console.error('Error fetching data', error);
      }
    },
  },
};
</script>

<style scoped>
/* 样式代码 */
</style>

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 拦截器

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <div v-if="data">{{ data }}</div>
  </div>
</template>

<script>
import apiClient from './axios';

export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await apiClient.get('/data');
        this.data = response.data;
      } catch (error) {
        console.error('Error fetching data', error);
      }
    },
  },
};
</script>

<style scoped>
/* 样式代码 */
</style>

5. 服务端处理敏感逻辑

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

6. 安全最佳实践

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

使用 CSP

在 index.html 中添加 CSP 头：

<head>
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self';">
</head>

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

注册并登录到 JScrambler 网站。
创建一个项目并上传你的 JavaScript 文件。
配置混淆和加密选项。
下载混淆后的代码。

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

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');
});

客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Secure Example</title>
</head>
<body>
    <input type="text" id="username" placeholder="Username">
    <input type="password" id="password" placeholder="Password">
    <button onclick="validateUser()">Login</button>
    <div id="result"></div>

    <script>
        function validateUser() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            fetch('/api/validate-user', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username, password })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    document.getElementById('result').textContent = 'Login successful!';
                } else {
                    document.getElementById('result').textContent = 'Invalid credentials.';
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }
    </script>
</body>
</html>

3. 使用 WebAssembly

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

4. Content Security Policy (CSP)

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

示例

<head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self';">
</head>

5. 严格的访问控制

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

6. 使用 HTTPS

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

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