[每周一更]-(第108期)：怎样掩护你的JavaScript代码

涛声依旧在  论坛元老 | 2024-8-4 05:05:10 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1632|帖子 1632|积分 4896



  
我们从最原始的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 通过模块化和组件化组织代码，使代码结构清晰，并能更好地隔离敏感逻辑。
  1. <template>
  2.   <div>
  3.     <button @click="fetchData">Fetch Data</button>
  4.     <div v-if="data">{{ data }}</div>
  5.   </div>
  6. </template>
  8. <script>
  9. import axios from 'axios';
  11. export default {
  12.   data() {
  13.     return {
  14.       data: null,
  15.     };
  16.   },
  17.   methods: {
  18.     async fetchData() {
  19.       try {
  20.         const response = await axios.get('/api/data');
  21.         this.data = response.data;
  22.       } catch (error) {
  23.         console.error('Error fetching data', error);
  24.       }
  25.     },
  26.   },
  27. };
  28. </script>
  30. <style scoped>
  31. /* 样式代码 */
  32. </style>
复制代码
2. 利用情况变量

通过情况变量管理敏感信息（如 API URL），在打包时不会直接袒露在代码中。
  1. # .env
  2. VUE_APP_API_URL=https://api.example.com
  4. const apiUrl = process.env.VUE_APP_API_URL;
复制代码
3. 代码肴杂和最小化

在生产情况中，通过构建工具举行代码肴杂和最小化，减少代码可读性，增长逆向工程难度。
vue.config.js

  1. module.exports = {
  2.   productionSourceMap: false, // 禁用生产环境的 source map
  3.   configureWebpack: {
  4.     optimization: {
  5.       minimize: true,
  6.     },
  7.   },
  8. };
复制代码
4. 利用请求库和拦截器

利用 Axios 等请求库，通过拦截器添加身份验证和错误处理惩罚，提高请求安全性。
axios.js 文件

  1. import axios from 'axios';
  3. const apiClient = axios.create({
  4.   baseURL: process.env.VUE_APP_API_URL,
  5. });
  7. apiClient.interceptors.request.use(
  8.   config => {
  9.     const token = localStorage.getItem('token');
  10.     if (token) {
  11.       config.headers.Authorization = `Bearer ${token}`;
  12.     }
  13.     return config;
  14.   },
  15.   error => Promise.reject(error)
  16. );
  18. apiClient.interceptors.response.use(
  19.   response => response,
  20.   error => {
  21.     if (error.response && error.response.status === 401) {
  22.       window.location.href = '/login';
  23.     }
  24.     return Promise.reject(error);
  25.   }
  26. );
  28. export default apiClient;
复制代码
在组件中利用 Axios 拦截器

  1. <template>
  2.   <div>
  3.     <button @click="fetchData">Fetch Data</button>
  4.     <div v-if="data">{{ data }}</div>
  5.   </div>
  6. </template>
  8. <script>
  9. import apiClient from './axios';
  11. export default {
  12.   data() {
  13.     return {
  14.       data: null,
  15.     };
  16.   },
  17.   methods: {
  18.     async fetchData() {
  19.       try {
  20.         const response = await apiClient.get('/data');
  21.         this.data = response.data;
  22.       } catch (error) {
  23.         console.error('Error fetching data', error);
  24.       }
  25.     },
  26.   },
  27. };
  28. </script>
  30. <style scoped>
  31. /* 样式代码 */
  32. </style>
复制代码
5. 服务端处理惩罚敏感逻辑

将涉及敏感数据和业务逻辑的处理惩罚移到服务端，前端仅用于数据展示。
6. 安全最佳实践



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

在 index.html 中添加 CSP 头：
  1. <head>
  2.   <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self';">
  3. </head>
复制代码
7. 依靠前端框架的内置安全特性

Vue.js 自动对插值表达式和指令属性举行 HTML 转义，以防止 XSS 攻击。利用这些内置安全特性可以显着提高应用的安全性。
8. 数据验证和清算

对所有效户输入举行验证和清算，防止恶意数据进入系统。
通过以上方法，Vue.js 能在一定程度上增长从 API 获取数据的处理惩罚逻辑的安全性，但任安在客户端运行的代码都不能完全避免被访问和分析。因此，将敏感逻辑尽大概放在服务端处理惩罚是掩护应用安全的最佳实践。
二、原生JS怎样掩护

众所周知，JavaScript 是一种在客户端实验的语言，代码不可避免地会袒露给用户。固然你无法完全隐藏 JavaScript 代码，但可以采取一些措施来增长代码的难度，使其不易被阅读和修改。以下是一些常见的方法：
1. 代码肴杂和最小化

   枚举了几种方法可以有效地肴杂和压缩 JavaScript 代码，增长代码的安全性，使其难以阅读和逆向工程。不过，需要留意的是，代码肴杂固然增长了代码的复杂性，但并不能完全防止恶意攻击或逆向工程。将敏感逻辑和数据处理惩罚只管放在后端服务器中，前后端协同工作，才能最大限度地包管系统的安全性。
  1.1、利用 Terser 举行代码肴杂和最小化（不显着，只是压缩、格式和变量肴杂）

你可以利用 Terser 工具来肴杂和最小化你的 JavaScript 代码。
Terser 是 UglifyJS 的一个分支，支持 ES6+ 语法。
安装 Terser

  1. npm install terser -g
复制代码
利用 Terser 举行肴杂和最小化

  1. terser your-script.js -o your-script.min.js -c -m
复制代码
集成到 Webpack

  1. npm install terser-webpack-plugin --save-dev
复制代码
在 webpack.config.js 中配置 Terser 插件：
  1. const TerserPlugin = require('terser-webpack-plugin');
  3. module.exports = {
  4.   mode: 'production',
  5.   entry: './src/index.js',
  6.   output: {
  7.     filename: 'bundle.js',
  8.     path: __dirname + '/dist'
  9.   },
  10.   optimization: {
  11.     minimize: true,
  12.     minimizer: [new TerserPlugin()],
  13.   },
  14. };
复制代码
1.2、 利用 JavaScript Obfuscator

JavaScript Obfuscator 是一个流行的工具，用于肴杂 JavaScript 代码。可以通过 npm 安装：
  1. npm install javascript-obfuscator -g
复制代码
然后，可以利用以下命令对 JavaScript 文件举行肴杂：
  1. javascript-obfuscator input.js --output output.js
复制代码
1.3、 利用 UglifyJS（不显着，只是压缩和变量肴杂）

UglifyJS 是另一个用于肴杂和压缩 JavaScript 代码的工具。可以通过 npm 安装：
  1. npm install uglify-js -g
复制代码
然后，可以利用以下命令对 JavaScript 文件举行肴杂和压缩：
  1. uglifyjs input.js -o output.js -m
复制代码
1.4、 集成到构建工具中

假如利用构建工具如 Webpack，可以将代码肴杂集成到构建过程中。
利用 Webpack 和 UglifyJS 插件

首先，安装 Webpack 和 UglifyJS 插件：
  1. npm install --save-dev webpack webpack-cli uglifyjs-webpack-plugin
复制代码
然后，在 webpack.config.js 中配置 UglifyJS 插件：
  1. const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  3. module.exports = {
  4.   mode: 'production',
  5.   entry: './src/index.js',
  6.   output: {
  7.     filename: 'bundle.js',
  8.     path: __dirname + '/dist'
  9.   },
  10.   optimization: {
  11.     minimizer: [new UglifyJsPlugin()],
  12.   },
  13. };
复制代码
1.5、Google Closure Compiler(失败，把通报参数搞丢了)

Google Closure Compiler 是一个强大的 JavaScript 优化工具，可以肴杂和压缩代码。
安装和利用

  1. npm install google-closure-compiler --save-dev
复制代码
利用命令行肴杂代码

  1. 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 代码。
安装和利用

  1. npm install @babel/core @babel/cli babel-minify --save-dev
复制代码
利用命令行肴杂代码

  1. npx babel-minify input.js -o output.js
复制代码
1.7、 JScrambler

JScrambler 是一个高级的 JavaScript 和 HTML5 代码掩护工具，提供肴杂、加密、以及代码完备性验证等功能。
利用 JScrambler


  • 注册并登录到 JScrambler 网站。
  • 创建一个项目并上传你的 JavaScript 文件。
  • 配置肴杂和加密选项。
  • 下载肴杂后的代码。
末了：有个想法，可以不同工具，合并利用，各人可以自行测试。
2. 服务器端处理惩罚敏感逻辑

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

假设你有一个需要验证用户身份的逻辑。你可以将此逻辑移到服务器端，并通过 API 与客户端举行通信。
服务端代码（例如利用 Node.js）

  1. const express = require('express');
  2. const app = express();
  3. const bodyParser = require('body-parser');
  5. app.use(bodyParser.json());
  7. app.post('/api/validate-user', (req, res) => {
  8.     const { username, password } = req.body;
  9.     // 在服务器端进行验证
  10.     if (username === 'admin' && password === 'password') {
  11.         res.json({ success: true });
  12.     } else {
  13.         res.json({ success: false });
  14.     }
  15. });
  17. app.listen(3000, () => {
  18.     console.log('Server running on port 3000');
  19. });
复制代码
客户端代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Secure Example</title>
  7. </head>
  8. <body>
  9.     <input type="text" id="username" placeholder="Username">
  10.     <input type="password" id="password" placeholder="Password">
  11.     <button onclick="validateUser()">Login</button>
  12.     <div id="result"></div>
  14.     <script>
  15.         function validateUser() {
  16.             const username = document.getElementById('username').value;
  17.             const password = document.getElementById('password').value;
  19.             fetch('/api/validate-user', {
  20.                 method: 'POST',
  21.                 headers: {
  22.                     'Content-Type': 'application/json'
  23.                 },
  24.                 body: JSON.stringify({ username, password })
  25.             })
  26.             .then(response => response.json())
  27.             .then(data => {
  28.                 if (data.success) {
  29.                     document.getElementById('result').textContent = 'Login successful!';
  30.                 } else {
  31.                     document.getElementById('result').textContent = 'Invalid credentials.';
  32.                 }
  33.             })
  34.             .catch(error => {
  35.                 console.error('Error:', error);
  36.             });
  37.         }
  38.     </script>
  39. </body>
  40. </html>
复制代码
3. 利用 WebAssembly

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

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

  1. <head>
  2.     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self';">
  3. </head>
复制代码
5. 严格的访问控制

确保敏感 API 只有授权用户可以访问，并且所有敏感操纵在服务器端处理惩罚。
6. 利用 HTTPS

通过 HTTPS 加密传输，防止数据在传输过程中被盗取或窜改。
这些方法可以帮助你在一定程度上掩护 JavaScript 代码，使其更难被用户理解和修改。但请记着，任安在客户端运行的代码都无法完全避免被访问和分析。确保将所有敏感逻辑放在服务器端处理惩罚，是掩护应用安全的最佳实践。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

涛声依旧在

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表