ソースを参照

安全优化:移除Cookies使用,增强前端安全性

刘博博 1 週間 前
コミット
242562cfdb

+ 3 - 11
.env.development

@@ -1,11 +1,3 @@
-# 页面标题
-VUE_APP_TITLE = 建科•小智权限管理系统
-
-# 开发环境配置
-ENV = 'development'
-
-# TK管理系统/开发环境
-VUE_APP_BASE_API = '/dev-api'
-
-# 路由懒加载
-VUE_CLI_BABEL_TRANSPILE_MODULES = true
+NODE_ENV=development
+VUE_APP_TITLE=建科•小智权限管理系统
+VUE_APP_BASE_API=/dev-api

+ 3 - 8
.env.production

@@ -1,8 +1,3 @@
-# 页面标题
-VUE_APP_TITLE = 建科•小智权限管理系统
-
-# 生产环境配置
-ENV = 'production'
-
-# TK管理系统/生产环境
-VUE_APP_BASE_API = '/prod-api'
+NODE_ENV=production
+VUE_APP_TITLE=建科•小智权限管理系统
+VUE_APP_BASE_API=/prod-api

+ 5 - 2
.gitignore

@@ -4,12 +4,17 @@ dist/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 **/*.log
 
 tests/**/coverage/
 tests/e2e/reports
 selenium-debug.log
 
+# ✅ 安全修复:本地环境变量文件不提交
+.env.local
+.env.*.local
+
 # Editor directories and files
 .idea
 .vscode
@@ -23,5 +28,3 @@ selenium-debug.log
 
 package-lock.json
 yarn.lock
-
-.history

+ 1 - 0
package.json

@@ -6,6 +6,7 @@
   "license": "MIT",
   "scripts": {
     "dev": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
+    "dev:win": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
     "build:prod": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",

+ 1 - 1
public/html/ie.html

@@ -43,4 +43,4 @@
 </ul>
 <hr>
 </body>
-</html>
+</html>

+ 1 - 0
public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="renderer" content="webkit">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https:; font-src 'self' data: https://at.alicdn.com; connect-src 'self' http: https:;">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>

+ 2 - 2
src/layout/components/Sidebar/SidebarItem.vue

@@ -13,8 +13,8 @@
         <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
       </template>
       <sidebar-item
-        v-for="child in item.children"
-        :key="child.path"
+        v-for="(child, index) in item.children"
+        :key="child.path + index"
         :is-nest="true"
         :item="child"
         :base-path="resolvePath(child.path)"

+ 3 - 2
src/main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 
-import Cookies from 'js-cookie'
+// ✅ 安全修复:不再需要 js-cookie
+// import Cookies from 'js-cookie'
 
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
@@ -73,7 +74,7 @@ DictData.install()
  */
 
 Vue.use(Element, {
-  size: Cookies.get('size') || 'medium' // set element-ui default size
+  size: localStorage.getItem('size') || 'medium' // set element-ui default size
 })
 
 Vue.config.productionTip = false

+ 7 - 8
src/store/modules/app.js

@@ -1,13 +1,12 @@
-import Cookies from 'js-cookie'
-
+// ✅ 安全修复:使用 localStorage 替代 Cookies
 const state = {
   sidebar: {
-    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
+    opened: localStorage.getItem('sidebarStatus') ? !!+localStorage.getItem('sidebarStatus') : true,
     withoutAnimation: false,
     hide: false
   },
   device: 'desktop',
-  size: Cookies.get('size') || 'medium'
+  size: localStorage.getItem('size') || 'medium'
 }
 
 const mutations = {
@@ -18,13 +17,13 @@ const mutations = {
     state.sidebar.opened = !state.sidebar.opened
     state.sidebar.withoutAnimation = false
     if (state.sidebar.opened) {
-      Cookies.set('sidebarStatus', 1)
+      localStorage.setItem('sidebarStatus', 1)
     } else {
-      Cookies.set('sidebarStatus', 0)
+      localStorage.setItem('sidebarStatus', 0)
     }
   },
   CLOSE_SIDEBAR: (state, withoutAnimation) => {
-    Cookies.set('sidebarStatus', 0)
+    localStorage.setItem('sidebarStatus', 0)
     state.sidebar.opened = false
     state.sidebar.withoutAnimation = withoutAnimation
   },
@@ -33,7 +32,7 @@ const mutations = {
   },
   SET_SIZE: (state, size) => {
     state.size = size
-    Cookies.set('size', size)
+    localStorage.setItem('size', size)
   },
   SET_SIDEBAR_HIDE: (state, status) => {
     state.sidebar.hide = status

+ 4 - 5
src/utils/auth.js

@@ -1,15 +1,14 @@
-import Cookies from 'js-cookie'
-
+// ✅ 安全修复:使用 localStorage 替代 Cookies 存储 Token
 const TokenKey = 'Admin-Token'
 
 export function getToken() {
-  return Cookies.get(TokenKey)
+  return localStorage.getItem(TokenKey)
 }
 
 export function setToken(token) {
-  return Cookies.set(TokenKey, token)
+  return localStorage.setItem(TokenKey, token)
 }
 
 export function removeToken() {
-  return Cookies.remove(TokenKey)
+  return localStorage.removeItem(TokenKey)
 }

+ 8 - 17
src/utils/jsencrypt.js

@@ -1,30 +1,21 @@
 import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'
 
 // 密钥对生成 http://web.chacuo.net/netrsakeypair
+// ✅ 安全修复:只保留公钥,用于密码传输加密
+// 私钥应该只存在于后端服务器,前端不应该有解密能力
 
 const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdH\n' +
   'nzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='
 
-const privateKey = 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAqhHyZfSsYourNxaY\n' +
-  '7Nt+PrgrxkiA50efORdI5U5lsW79MmFnusUA355oaSXcLhu5xxB38SMSyP2KvuKN\n' +
-  'PuH3owIDAQABAkAfoiLyL+Z4lf4Myxk6xUDgLaWGximj20CUf+5BKKnlrK+Ed8gA\n' +
-  'kM0HqoTt2UZwA5E2MzS4EI2gjfQhz5X28uqxAiEA3wNFxfrCZlSZHb0gn2zDpWow\n' +
-  'cSxQAgiCstxGUoOqlW8CIQDDOerGKH5OmCJ4Z21v+F25WaHYPxCFMvwxpcw99Ecv\n' +
-  'DQIgIdhDTIqD2jfYjPTY8Jj3EDGPbH2HHuffvflECt3Ek60CIQCFRlCkHpi7hthh\n' +
-  'YhovyloRYsM+IS9h/0BzlEAuO0ktMQIgSPT3aFAgJYwKpqRYKlLDVcflZFCKY7u3\n' +
-  'UP8iWi1Qw0Y='
+// ✅ 已删除私钥 - 私钥不应暴露在前端代码中
 
-// 加密
+// 加密函数 - 用于传输密码到后端
 export function encrypt(txt) {
   const encryptor = new JSEncrypt()
-  encryptor.setPublicKey(publicKey) // 设置公钥
-  return encryptor.encrypt(txt) // 对数据进行加密
+  encryptor.setPublicKey(publicKey)
+  return encryptor.encrypt(txt)
 }
 
-// 解密
-export function decrypt(txt) {
-  const encryptor = new JSEncrypt()
-  encryptor.setPrivateKey(privateKey) // 设置私钥
-  return encryptor.decrypt(txt) // 对数据进行解密
-}
+// ✅ 已删除解密函数 - 前端不应该有解密能力
+// 解密操作应该在后端完成
 

+ 30 - 21
src/views/login.vue

@@ -63,8 +63,10 @@
 
 <script>
 import { getCodeImg } from "@/api/login";
-import Cookies from "js-cookie";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
+// ✅ 安全修复:使用 localStorage 替代 Cookies
+// import Cookies from "js-cookie";
+// ✅ 安全修复:只导入encrypt,不导入decrypt(decrypt已被删除)
+import { encrypt } from '@/utils/jsencrypt'
 
 export default {
   name: "Login",
@@ -72,8 +74,9 @@ export default {
     return {
       codeUrl: "",
       loginForm: {
-        userName: "admin",
-        password: "admin123",
+        // ✅ 安全修复:移除默认账号密码
+        userName: "",
+        password: "",
         rememberMe: false,
         code: "",
         uuid: ""
@@ -105,12 +108,15 @@ export default {
   },
   created() {
     this.getCode();
-    this.getCookie();
+    this.loadRememberedUser();  // ✅ 改名,更准确
   },
   methods: {
     getCode() {
       getCodeImg().then(res => {
-        console.log(res, 'res');
+        // ✅ 安全修复:移除console.log或仅在开发环境使用
+        if (process.env.NODE_ENV === 'development') {
+          console.log('验证码获取成功');
+        }
         this.captchaEnabled = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled;
         if (this.captchaEnabled) {
           this.codeUrl = "data:image/gif;base64," + res.data.img;
@@ -118,29 +124,32 @@ export default {
         }
       });
     },
-    getCookie() {
-      const userName = Cookies.get("userName");
-      const password = Cookies.get("password");
-      const rememberMe = Cookies.get('rememberMe')
-      this.loginForm = {
-        userName: userName === undefined ? this.loginForm.userName : userName,
-        password: password === undefined ? this.loginForm.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
-      };
+
+    // ✅ 安全修复:只加载用户名,不加载密码(使用 localStorage)
+    loadRememberedUser() {
+      const rememberedUser = localStorage.getItem("rememberedUser");
+      if (rememberedUser) {
+        this.loginForm.userName = rememberedUser;
+        this.loginForm.rememberMe = true;
+      }
     },
+
     handleLogin() {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
           this.loading = true;
+
+          // ✅ 安全修复:只保存用户名,不保存密码(使用 localStorage)
           if (this.loginForm.rememberMe) {
-            Cookies.set("userName", this.loginForm.userName, { expires: 30 });
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+            localStorage.setItem("rememberedUser", this.loginForm.userName);
           } else {
-            Cookies.remove("userName");
-            Cookies.remove("password");
-            Cookies.remove('rememberMe');
+            localStorage.removeItem("rememberedUser");
+            // 清理旧的存储(如果存在)
+            localStorage.removeItem("userName");
+            localStorage.removeItem("password");
+            localStorage.removeItem("rememberMe");
           }
+
           this.$store.dispatch("Login", this.loginForm).then(() => {
             this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
           }).catch(() => {

+ 48 - 38
vue.config.js

@@ -19,34 +19,37 @@ module.exports = {
     // 让 Babel 处理 quill 模块
     'quill'
   ],
-  // 部署生产环境和开发环境下的URL。
-  // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
-  // 例如 https://www.jianke.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.jianke.vip/admin/,则设置 baseUrl 为 /admin/。
+  // 部署生产环境和开发环境下的URL
   publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
-  // 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)(默认dist)
+  // 在 npm run build 或 yarn build 时,生成文件的目录名称(要和baseUrl的生产环境路径一致,默认dist)
   outputDir: 'dist',
-  // 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
+  // 用于放置生成的静态资源(js、css、img、fonts)的目录(项目打包之后,静态资源会放在这个文件夹下)
   assetsDir: 'static',
-  // 是否开启eslint保存检测,有效值:ture | false | 'error'
   lintOnSave: process.env.NODE_ENV === 'development',
-  // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
   productionSourceMap: false,
   // webpack-dev-server 相关配置
   devServer: {
     host: '0.0.0.0',
     port: port,
     open: true,
+
+    // 安全修复:使用环境变量替代硬编码IP
     proxy: {
-      // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.3.3:8091`,
+        target: process.env.VUE_APP_PROXY_TARGET || 'http://localhost:8090',
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''
         }
       }
     },
-    disableHostCheck: true
+
+    allowedHosts: [
+      'localhost',
+      '127.0.0.1',
+      '.local'  // 允许 .local 域名
+      // 如需添加其他域名,请在此处添加
+    ]
   },
   css: {
     loaderOptions: {
@@ -63,21 +66,21 @@ module.exports = {
       }
     },
     plugins: [
-      // http://doc.jianke.vip/jianke-vue/other/faq.html#使用gzip解压缩静态文件
+      // 使用 gzip 解压缩静态文件
       new CompressionPlugin({
         cache: false,                   // 不启用文件缓存
         test: /\.(js|css|html)?$/i,     // 压缩文件格式
         filename: '[path].gz[query]',   // 压缩后的文件名
-        algorithm: 'gzip',              // 使用gzip压缩
-        minRatio: 0.8                   // 压缩率小于1才会压缩
+        algorithm: 'gzip',              // 使用 gzip 压缩
+        minRatio: 0.8                   // 压缩率小于 1 才会压缩
       })
     ],
   },
   chainWebpack(config) {
-    config.plugins.delete('preload') // TODO: need test
-    config.plugins.delete('prefetch') // TODO: need test
+    config.plugins.delete('preload')  // 删除预加载插件
+    config.plugins.delete('prefetch') // 删除预获取插件
 
-    // set svg-sprite-loader
+    // 设置 svg-sprite-loader
     config.module
       .rule('svg')
       .exclude.add(resolve('src/assets/icons'))
@@ -94,45 +97,52 @@ module.exports = {
       })
       .end()
 
-    config.when(process.env.NODE_ENV !== 'development', config => {
-          config
-            .plugin('ScriptExtHtmlWebpackPlugin')
-            .after('html')
-            .use('script-ext-html-webpack-plugin', [{
-            // `runtime` must same as runtimeChunk name. default is `runtime`
-              inline: /runtime\..*\.js$/
-            }])
-            .end()
+    // 安全修复:生产环境自动移除 console.log
+    config.when(process.env.NODE_ENV === 'production', config => {
+      // 移除 console 和 debugger
+      config.optimization.minimizer('terser').tap(args => {
+        Object.assign(args[0].terserOptions.compress, {
+          drop_console: true,      // 移除所有 console
+          drop_debugger: true,     // 移除 debugger
+          pure_funcs: ['console.log'] // 移除 console.log
+        })
+        return args
+      })
+
+      config
+        .plugin('ScriptExtHtmlWebpackPlugin')
+        .after('html')
+        .use('script-ext-html-webpack-plugin', [{
+          // runtime 必须与 runtimeChunk 名称相同,默认为 runtime
+          inline: /runtime\..*\.js$/
+        }])
+        .end()
 
-          config.optimization.splitChunks({
+      config.optimization.splitChunks({
             chunks: 'all',
             cacheGroups: {
               libs: {
                 name: 'chunk-libs',
                 test: /[\\/]node_modules[\\/]/,
                 priority: 10,
-                chunks: 'initial' // only package third parties that are initially dependent
+                chunks: 'initial' // 仅打包初始依赖的第三方库
               },
               elementUI: {
-                name: 'chunk-elementUI', // split elementUI into a single package
-                test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
-                priority: 20 // the weight needs to be larger than libs and app or it will be packaged into libs or app
+                name: 'chunk-elementUI', // 将 elementUI 拆分成单独的包
+                test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // 为了适配 cnpm
+                priority: 20 // 权重需要大于 libs 和 app,否则会被打包进 libs 或 app
               },
               commons: {
                 name: 'chunk-commons',
-                test: resolve('src/components'), // can customize your rules
-                minChunks: 3, //  minimum common number
+                test: resolve('src/components'), // 可以自定义规则
+                minChunks: 3, // 最小公共数量
                 priority: 5,
-                reuseExistingChunk: true
+                reuseExistingChunk: true // 重用已存在的块
               }
             }
           })
 
-          config.optimization.runtimeChunk('single'),
-          {
-             from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
-             to: './' //到根目录下
-          }
+      config.optimization.runtimeChunk('single')
     })
   }
 }