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

于 2024-08-02 10:26:20 发布
阅读量707 收藏 16
点赞数 9
分类专栏： 每周一更 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hmx224_2014/article/details/140865858
版权

在这里插入图片描述

文章目录


我们从最原始的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

  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');
});
客户端代码
<!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 代码，使其更难被用户理解和修改。但请记住，任何在客户端运行的代码都无法完全避免被访问和分析。确保将所有敏感逻辑放在服务器端处理，是保护应用安全的最佳实践。

ifanatic
关注
专栏目录
StackOverflow 2022年开发者调查报告
AI天才研究院
03-25 2万+
Stack Overflow 2022年开发者调查报告现已于6月下旬出炉。其年度开发者调查是面向全球开发者进行的规模最大、最全面的调查，调查涵盖了从开发者喜爱的技术到工作偏好等内容。2022 年是 Stack Overflow 发布年度开发者调查报告的第十二年，有来自 180 个国家/地区的 73000 多名开发人员参与了这个调查。其中，依旧是来自美国和印度的受访者数量最多，其次是德国和 UKI英国和爱尔兰；仅有 632 份调查反馈来自中国开发者，占比为 0.88%。
最常见JS加密保护代码的方法
mxd01848的博客
05-29 2439
当谈到JavaScript（简称JS）代码的保护时，加密是一种常见的策略。加密可以帮助保护你的JS代码，防止未经授权的访问、修改和复制。在本文中，我将向你介绍一些常用的保护方法，并提供一些通俗易懂的示例代码，帮助你入门。总结： 本文介绍了一些常见的JS代码加密保护方法，包括压缩和混淆、字符串加密以及使用加密算法。这些方法可以帮助你保护JS代码的安全性，防止未经授权的访问和修改。通过示例代码的演示，你可以更好地理解这些方法的实现方式。希望这篇科普文章对你入门JS代码加密保护有所帮助！
SecJSON:使用加密方法保护JSON消息的有效负载的其他安全机制
05-08
node.js的安全JSON实现。 SecJSON允许加密/解密消息或JSON对象的特定值。 用法 npm install secjson 加密 var secjson = require ( 'secjson' ) ; var options = { rsa_pub : fs . readFileSync ( __dirname + '/test-auth0_rsa.pub' ) , pem : fs . readFileSync ( __dirname + '/test-auth0.pem' ) , encryptionAlgorithm : 'http://tiagomistral.github.io/SecJSON#aes128-cbc' , keyEncryptionAlgorighm : 'http://tiagomistral.github.io/SecJSON#rs
js代码保护思路有哪些,js代码保护思路是什么
chatgpt001的博客
11-14 187
（1）数据、接口整合思维，能合并成一个数组或者接口的尽量合并，代码尽量使用高级一点的写法，不要让代码冗余；（13）有表单验证错误信息展示的需求，但是错误信息默认不展示，当出现错误时展示，可以在表单的下方设置一个空的div，让div先占位着，当错误时显示div的信息，这是一种编程思维，经常能用的到。（空值合并运算符），es10新增语法，与||类似，都是判断符号左边为false时，直接取符号右边的值，但是?（19.1）将一个数组1中的对象2中的数组3的对象4提取出来放到一维结构中，也就是放到数组1中。
如何保护javascript代码
Boffi
01-09 4890
HTML5应用采用的仍然是Javascript、HTML、CSS 等Web语言，因而其代码保护就是这些Web代码的保护，而HTML5应用主要功能一般采用JS实现，因此JS代码就成了保护重点。然而，似乎Web语言的设计者们根本没考虑过保护代码，或许因为他们认为互联网的核心价值不是代码，而是业务数据、是流量，这样更有利于互联网Web服务的发展。但开发者似乎不这么认为。我和开发者交流BAE/Widget
前端代码保护大揭秘：JScrambler、JSFack、IpaGuard等五大JavaScript加密混淆工具详解
最新发布
2301_79527140的博客
04-01 548
本篇技术博客将介绍五款常用且好用的在线JavaScript加密混淆工具，包括 jscrambler、JShaman、jsfack、freejsobfuscator 和 jjencode。通过对这些工具的功能及使用方法进行详细解析，帮助开发人员更好地保护和加密其 JavaScript 代码，提升网站的安全性和保密性。通过本文介绍的五款常用 JavaScript 加密混淆工具，开发人员可以选择适合自己项目需求的工具，加固 JavaScript 代码的安全性，防止恶意攻击和信息泄露。
利用Javascript进行密码保护
学习笔记
07-08 1515
方法是依耐于用户而不知道目标文件名，代码如下：function go() {window.location.href = "http://www.somewhere.com/" +document.formName.passwordName.value + .html;return false;}//-->在网页中使用这段JavaScript脚本的方法为：Enter Password: VAL
jenkins操作手册——巨详细，一篇足矣
锅锅聊软测
07-04 1687
随着软件开发复杂度的不断提高,团队开发成员间如何更好的协同工作以确保软件开发的质量已经成为开发过程中不可回避的问题。尤其是近年来敏捷开发在软件领域越来越火，如何能在不间断变化的需求中快速适应和保证软件的质量显得尤其重要。持续集成正是针对这一问题的一种软件开发实践。它倡导团队开发成员必须经常集成他们的工作，甚至每天都可能发生多次集成。而每次集成都是通过自动化的构建来验证，包括自动编译、发布和测试，从而尽快地发现集成错误，让团队能更快的开发内聚的软件。Jenkins是一个开源项目，提供了一种易于使用的持续集成系
使用html+css实现-静态开源案例-品优购
SHoadgnaw的博客
03-01 7117
使用html+css实现-静态开源案例-品优购设计目标css制作图标规范seo优化网页标题 titledescription 网站说明 显示在搜索引擎后方的解释Keywords关键词字体图标引入方法注意搭建整个页面时的路径问题html代码首页(index.html)商品列表页(list.html)商品详情页(detail.html)注册页面(register.html)CSS代码通用css(base.css)公用css(common.css)首页css(index.css)商品列表页css(list.css
204道高频Java面试题❤️五万字❤️全路线十八个模块❤️面试10多家中大厂后的总结（建议收藏）
热门推荐
公号：一条coding
09-13 1万+
整理了两周
node总结
m0_55832273的博客
12-15 2130
node介绍 官方：Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境。 私人：一个“软件”，能运行js代码 说白了Node.js存在意义就是让JavaScript可以和其他的后端语言一样能够在服务器上运行,它的存在对于JavaScript有了质的飞跃,可以让前端语言JavaScript在写完之后交给Node.js进行编译和解释 现在已经有很多公司在使用node作为服务器语言了，国外的：linkedin/paypal/twitter 国内的： 知乎的主站推送、网易（部
利用js加密保护核心功能代码
mxd01848的博客
11-07 1351
利用js加密保护核心功能代码
保护您的数据：JavaScript加密的12个小技巧，让您的应用更安全
mxd01848的博客
08-17 607
当涉及JavaScript加密时，有一些小技巧可以帮助您增加安全性和保护数据的机密性。请注意，虽然这些技巧可以提高安全性，但没有绝对的安全解决方案。总之，JavaScript加密是一个复杂的主题，需要综合考虑多个因素。维护安全的应用程序需要全面的安全策略，从前端到后端以及服务器端的配置和保护措施。
【安全策略】前端 JS 安全对抗&浏览器调试方法
一位前行者的博客
01-15 2044
如今这个时代，数据已经变得越来越重要，网页和APP是主流的数据载体。而如果获取数据的接口没有设置任何的保护措施，那么数据的安全性将面临极大的威胁。不仅可能造成数据的轻易窃取和篡改，还可能导致一些重要功能的接口被恶意调用，引发DDoS、条件竞争等攻击效果。这是我们绝对不能忽视的问题！😱 数据泄露风险：未经保护的数据接口很容易遭到黑客的攻击，从而导致数据泄露。一旦敏感信息落入错误的手中，后果将不堪设想。为了避免这种情况发生，我们需要采取一系列的安全措施，确保数据在传输和存储过程中始终得到有效的保护。
以变制变 - 前端动态化代码保护方案探索
qq_53058639的博客
02-19 507
浏览器作为当今互联网的一大流量入口，正在变得越来越强大。为了有更好的Web体验，各类新的标准被制定并实施。PWA的出现，更是把移动端H5的体验推向了另一个极致。越来越多业务使用H5作为主要入口的同时，也带来了另一个问题：机器行为泛滥。只要有利益的地方就会有恶意，登录注册、投票领券等页面很容易成为机器刷量的重灾区，如今写一个普通刷投票脚本的难度基本就跟写一个“Hello World!”的难度差不多。在与机器对抗的历程中，Web前端一直是非常薄弱的一环。
JS常用
Hello World
03-06 303
1，定时器：   1.1、setInterval 和setTimeout 的使用区别前者是隔间循环，后者只执行一次 var num = 0; var max = 10; var intervalId = null; function incrementNumber(){     num++;     if(num == max){       clearInterval(interv...
【Node.js从基础到高级运用】十八、Node.js的安全性加固
Vip_wk的博客
03-26 716
通过上述的措施，我们可以显著提高Node.js应用的安全性，从而更好地保护用户数据和服务的稳定性。当然，这些只是安全性加固的一部分，实际应用中还需要根据具体情况采取更多的安全措施。
JS逆向---补环境方法详解（案例一分析-今日头条）
m0_52336378的博客
09-19 3467
该文章主要进行讲解遇到JSVMP情况下怎样进行补环境方法对JS部分进行逆向声明本文章中所有内容仅供学习交流使用，不用于其他任何目的，不提供完整代码，抓包内容、敏感网址、数据接口等均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关。本文章未经许可禁止转载，禁止任何修改后二次传播，擅自使用本文讲解的技术而导致的任何意外，作者均不负责，若有侵权，请联系作者立即删除，请各位自觉遵守相关法律法规。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ifanatic

觉得对您有用，可以友情打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值