前端数据安全防护(控制台)

ops/2024/12/13 21:36:57/

目录

前言        

禁用右键菜单

禁用快捷键

监控控制台

完整逻辑


前言        

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

禁用右键菜单

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

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();}});},[])


http://www.ppmy.cn/ops/141638.html

相关文章

【C语言】程序设计--算法

文章目录 1. 判断两个数的大小并交换2. 计算三角形面积3. 根据x的值计算y4. 字符大小写转换5. 百钱百鸡问题6. 计算公式y的值7. 输出所有的水仙花数8. 计算n的阶乘9. 下三角数据10. 斐波那契数列11. 学生成绩统计12. 数组的平均值1. 判断两个数的大小并交换 介绍: 从键盘输入…

Qt-chart 画折线图(文字x轴)

图 代码 QLineSeries *seriesReality new QLineSeries();seriesReality->setColor(Qt::green);QLineSeries *seriesTar new QLineSeries();seriesTar->setColor(Qt::yellow);// 创建并配置X轴(文字标签)QStringList categories;for (int i 0; …

全面了解 Node.js、npm、yarn、node-gyp、Python、Visual Studio 和 Electron 的关联性

好的,以下是一个全面且深入的详细解析,针对 Electron 桌面开发工具链 及其相关依赖,包含每个关键模块(Node.js、npm、yarn、Python、node-gyp、Visual Studio、Electron)及其实现原理、功能、关联性和使用示例,确保您能完整理解这些工具的用途和关联性。 📜 一、基础工…

vue3 使用 konva

1&#xff1a;安装 npm install vue-konva konva --save 在main.ts 里面引入 import VueKonva from vue-konva; app.use(VueKonva); 2&#xff1a;效果图 3&#xff1a;直接粘贴复制就能用你 &#xff08;重要的地方做了备注&#xff09; <template><div st…

调度系统:使用 Apache Airflow 管理和调度 Couchbase SQL 脚本的实际例子

假设场景如下&#xff1a; 每天定时执行一组 Couchbase SQL 脚本&#xff0c;用于数据同步、聚合和清洗。 脚本包括&#xff1a; 同步数据到 Couchbase 集群。 执行数据聚合查询。 清理过期数据。 要求&#xff1a; 支持任务依赖管理。 提供任务失败后的重试机制。 支…

Python+OpenCV系列:图像的几何变换

Python OpenCV 系列&#xff1a;图像的几何变换 引言 在图像处理领域&#xff0c;几何变换是一个非常重要的操作&#xff0c;它可以改变图像的位置、大小、方向或形状。在计算机视觉中&#xff0c;这些操作对于图像预处理、特征提取和图像增强至关重要。本文将介绍如何利用 …

HTML简单贪吃蛇游戏

1.功能说明&#xff1a; 游戏网格&#xff1a;一个20x20的网格&#xff0c;每个格子的大小为20x20像素。 蛇的移动&#xff1a;玩家可以通过方向键&#xff08;左、上、右、下&#xff09;控制蛇的移动。 食物生成&#xff1a;食物会在随机位置生成&#xff0c;当蛇吃到食物时…

CentOS8或docker镜像centos8更换镜像源

因为 CentOS 8 已经结束生命周期&#xff0c;原来的镜像源不可用了。我们需要将镜像源改为 CentOS 8 的替代源。 在容器中运行以下命令&#xff1a; 首先备份原有的源 cd /etc/yum.repos.d/ mkdir backup mv *.repo backup/ 创建新的源文件 cat > /etc/yum.repos.d/Cent…