Vue project code prevents debugging – open the console and jump directly to a blank page
After the front-end code is online, the code will be exposed, or the interface will be exposed, and interested people will study the code logic and find project bugs and loopholes!
Project background
I was targeted by the security test and was always debugging my less secure code. Deep obfuscation of the front-end code into hexadecimal is not enough. We still find an encryption method to decrypt the back-end data. This time I changed my thinking and tried another method:
I admit that you are very strong, but if, I mean, if you open the console and it is a blank page, how should you deal with it?
Effect:
Solution
To prevent the front-end code from being debugged, it is nothing more than opening the console and blocking the page to prevent it from going down. There are several ways
1. Open the console and unlimited debugger
2. Open the console and load infinitely.
3. Open the console and redirect to the new page
There are similar plug-ins available on the Internet. Two recommended ones are disable-devtool and console-ban. I used the js file inside console-ban to do this.
console-ban.min.js Put this file in the public folder, and then reference it in the index.html file
/*!
* console-ban v5.0.0
* (c) 2020-2023 fz6m
* Released under the MIT License.
*/
!(function (e, t) {<!-- -->
typeof exports == 'object' & amp; & amp; typeof module != 'undefined'
?t(exports)
: typeof define == 'function' & amp; & amp; 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) & amp; & amp; (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) {<!-- -->
vart=0
var n = 1 << c++
return function () {<!-- -->
;(!a || a & amp; n) & amp; & amp; + + t === 2 & amp; & amp; ((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 & amp; & amp; (console.clear = function () {<!-- -->})
}),
(e.prototype.bfcache = function () {<!-- -->
this._bfcache & amp; & amp;
(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 & amp; & amp; r(t, e)
}
}),
(e.prototype.callback = function () {<!-- -->
if ((this._callback || this._redirect || this._write) & amp; & amp; 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 & amp; & amp; (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()
}
})
index.html introduces console-ban.min.js inside index.html
index.html and console-ban.min.js are both in the same public folder
<script src="console-ban.min.js"></script>
<% if (process.env.NODE_ENV === 'production' ) {<!-- --> %>
<script>
ConsoleBan.init({<!-- -->
redirect: 'about:blank'
})
</script>
<% } %>
Copyright statement: The content of this article comes from CSDN blogger “Mr_Debugger”
Original link: https://blog.csdn.net/chenacxz/article/details/133138162