项目背景
被安全测试针对了，总是调试我这不太安全的代码。前端代码深度混淆转成十六进制还不行，仍然找到加密方法，对后端数据进行解密。这次就修改了思路换种方法:
我承认阁下很强，但假如, 我是说假如打开控制台是空白页面，阁下又该如何应对呢？
解决办法
前端代码防止被调试，无非就是打开控制台，卡住页面不让他往下走。有以下几种办法
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已经移到根目录下去了，所以需要稍微改一下文章来源：https://www.toymoban.com/news/detail-823279.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>
效果
文章来源地址https://www.toymoban.com/news/detail-823279.html
到了这里，关于Vue项目前端代码防止被调试的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
