前端数据安全防护（控制台）

目录

前言        

禁用右键菜单

禁用快捷键

监控控制台

完整逻辑

---

前言        

        前端的数据在浏览器中一直处于一个裸奔的状态，只要是稍微懂一点计算机的人，都可以在浏览器的控制台中拿到前端页面的所有数据，包括和后端的交互数据。为了让前端的数据更安全，我们可以禁止用户打开控制台，不允许用户查看日志和接口数据。

禁用右键菜单

浏览器允许用户通过右键点击网页并选择“检查”来打开控制台，我们在项目中禁用用户的禁用右键菜单，以防止用户打开控制台的操作

document.addEventListener('contextmenu', function(event) {event.preventDefault(); // 禁用右键菜单
});

禁用快捷键

 浏览器不止可以通过右键点击网页并选择“检查”来打开控制台，用户还可以通过快捷键的方式打开控制台。所以我们也要禁用用户以快捷键的方式打开开发者工具。

document.addEventListener('keydown', function(event) {// 阻止F12键if (event.keyCode === 123) {event.preventDefault();}// 阻止Ctrl + Shift + Iif (event.ctrlKey && event.shiftKey && event.keyCode === 73) {event.preventDefault();}// 阻止Ctrl + U（查看页面源代码）if (event.ctrlKey && event.keyCode === 85) {event.preventDefault();}
});

监控控制台

除了以上的特殊情况外，用户还可能通过其他途径打开控制台，所以我们可以定义一个计数器监空控制台的日志打印，如果控制台打印了日志就进行页面重定向。

// 创建一个新的错误对象 new Error()
// 打开控制台的时候，会访问对象里面的属性，触发get()方法，进而实现页面重定义
setInterval(() => {console.log(Object.defineProperties(new Error(), {message: {// eslint-disable-next-line getter-returnget() {window.location.href = 'about:blank';}},}));}, 2000);

完整逻辑

useEffect(() => {setInterval(() => {console.log(Object.defineProperties(new Error(), {message: {// eslint-disable-next-line getter-returnget() {window.location.href = 'about:blank';}},toString: {value() {new Error().stack?.includes('toString@') && alert('Safari');}}}));}, 2000);document.addEventListener('contextmenu', function(event) {event.preventDefault(); // 禁用右键菜单});document.addEventListener('keydown', function(event) {// 阻止F12键if (event.keyCode === 123) {event.preventDefault();}// 阻止Ctrl + Shift + Iif (event.ctrlKey && event.shiftKey && event.keyCode === 73) {event.preventDefault();}// 阻止Ctrl + U（查看页面源代码）if (event.ctrlKey && event.keyCode === 85) {event.preventDefault();}});},[])