目录
前言
禁用右键菜单
禁用快捷键
监控控制台
完整逻辑
前言
前端的数据在浏览器中一直处于一个裸奔的状态,只要是稍微懂一点计算机的人,都可以在浏览器的控制台中拿到前端页面的所有数据,包括和后端的交互数据。为了让前端的数据更安全,我们可以禁止用户打开控制台,不允许用户查看日志和接口数据。
禁用右键菜单
浏览器允许用户通过右键点击网页并选择“检查”来打开控制台,我们在项目中禁用用户的禁用右键菜单,以防止用户打开控制台的操作
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();}});},[])