项目背景
被安全测试针对了，总是调试我这不太安全的代码。前端代码深度混淆转成十六进制还不行，仍然找到加密方法，对后端数据进行解密。这次就修改了思路换种方法:
我承认阁下很强，但假如, 我是说假如打开控制台是空白页面，阁下又该如何应对呢？
解决办法
前端代码防止被调试，无非就是打开控制台，卡住页面不让他往下走。有以下几种办法
1、打开控制台，无限debugger
2、打开控制台，无限加载
3、打开控制台，重定向到新的页面
网上有类似的插件可以使用，推荐两个 disable-devtool、console-ban,我这就是用console-ban内部的js文件做的。
console-ban.min.js
将这个文件放到public文件夹下，然后再index.html文件里引用
/*! * console-ban v5.0.0 * (c) 2020-2023 fz6m * Released under the MIT License. */!(function (e, t) { typeof exports == 'object' && typeof module != 'undefined' ? t(exports) : typeof define == 'function' && define.amd ? define(['exports'], t) : t(((e = typeof globalThis != 'undefined' ? globalThis : e || self).ConsoleBan = {}))})(this, function (e) { 'use strict' var t = function () { return ( (t = Object.assign || function (e) { for (var t, n = 1, i = arguments.length; n < i; n++) { for (var o in (t = arguments[n])) { Object.prototype.hasOwnProperty.call(t, o) && (e[o] = t[o]) } } return e }), t.apply(this, arguments) ) } var n = { clear: !0, debug: !0, debugTime: 3e3, bfcache: !0 } var i = 2 var o = function (e) { return ~navigator.userAgent.toLowerCase().indexOf(e) } var r = function (e, t) { t !== i ? (location.href = e) : location.replace(e) } var c = 0 var a = 0 var f = function (e) { var t = 0 var n = 1 << c++ return function () { ;(!a || a & n) && ++t === 2 && ((a |= n), e(), (t = 1)) } } var s = function (e) { var t = /./ t.toString = f(e) var n = function () { return t } n.toString = f(e) var i = new Date() ;(i.toString = f(e)), console.log('%c', n, n(), i) var o var r var c = f(e) ;(o = c), (r = new Error()), Object.defineProperty(r, 'message', { get: function () { o() } }), console.log(r) } var u = (function () { function e(e) { var i = t(t({}, n), e) var o = i.clear var r = i.debug var c = i.debugTime var a = i.callback var f = i.redirect var s = i.write var u = i.bfcache ;(this._debug = r), (this._debugTime = c), (this._clear = o), (this._bfcache = u), (this._callback = a), (this._redirect = f), (this._write = s) } return ( (e.prototype.clear = function () { this._clear && (console.clear = function () {}) }), (e.prototype.bfcache = function () { this._bfcache && (window.addEventListener('unload', function () {}), window.addEventListener('beforeunload', function () {})) }), (e.prototype.debug = function () { if (this._debug) { var e = new Function('debugger') setInterval(e, this._debugTime) } }), (e.prototype.redirect = function (e) { var t = this._redirect if (t) { if (t.indexOf('http') !== 0) { var n var i = location.pathname + location.search if (((n = t) ? (n[0] !== '/' ? '/'.concat(n) : n) : '/') !== i) r(t, e) } else location.href !== t && r(t, e) } }), (e.prototype.callback = function () { if ((this._callback || this._redirect || this._write) && window) { var e var t = this.fire.bind(this) var n = window.chrome || o('chrome') var r = o('firefox') if (!n) { return r ? (((e = /./).toString = t), void console.log(e)) : void (function (e) { var t = new Image() Object.defineProperty(t, 'id', { get: function () { e(i) } }), console.log(t) })(t) } s(t) } }), (e.prototype.write = function () { var e = this._write e && (document.body.innerHTML = typeof e == 'string' ? e : e.innerHTML) }), (e.prototype.fire = function (e) { this._callback ? this._callback.call(null) : (this.redirect(e), this._redirect || this.write()) }), (e.prototype.prepare = function () { this.clear(), this.bfcache(), this.debug() }), (e.prototype.ban = function () { this.prepare(), this.callback() }), e ) })() e.init = function (e) { new u(e).ban() }})Vue2.6、vue-cli5.0、webpack5
index.html
在index.html内部引入console-ban.min.js
index.html和console-ban.min.js都是同一个public文件夹下
<script src="console-ban.min.js"></script><% if (process.env.NODE_ENV === 'production' ) { %> <script> ConsoleBan.init({ redirect: 'about:blank' }) </script><% } %>Vue3.2、vite.4.4.8
vite不能使用process.env,如果要使用的话，需要引入外部插件 vite-plugin-html-env
.env.development
VITE_APP_NODE_ENV=development.env.production
VITE_APP_NODE_ENV=production.env.sit
VITE_APP_NODE_ENV=sitvite-plugin-html-env
pnpm add vite-plugin-html-env -Dvite.config.js
import VitePluginHtmlEnv from 'vite-plugin-html-env'plugins: [ VitePluginHtmlEnv(), VitePluginHtmlEnv({ compiler: true }),]index.html
这个时候index.html已经移到根目录下去了，所以需要稍微改一下
<script src="/console-ban.min.js"></script><script type="text/javascript" vite-if="<{ VITE_APP_NODE_ENV }> === development"> ConsoleBan.init({ redirect: 'about:blank' }) </script>效果
