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