谈谈前端如何防止数据泄漏
最近突然发现了一个好玩的事情，部分网站进去的时候几乎都是死的，那种死是区别于我们常见的网站的死：
- 不能选中文字
- 不能复制粘贴文字
- 不能鼠标右键显示选项
- 不能打开控制台
- ……
各种奇葩的操作应接不暇，像极了我最初接触的某库。shigen的好奇心直接拉满，好家伙，这是咋做的呀。一顿操作之后，发现这种是为了防止网站的数据泄露（高大上）。在我看来，不是为了装X就是为了割韭菜。
咱废话也不多说，就手动来一个，部分代码参考文章：如何防止网站信息泄露（复制/水印/控制台）。
那shigen实现的效果是这样的：
用魔法生成了一个页面，展示的是李白的《将进酒》。我需要的功能有尽可能的全面，禁止复制、选择、调试……
找了很多的方式，最后能自豪的展示出来的功能有：
- 禁止选择
- 禁止鼠标右键
- 禁止复制粘贴
- 禁止调试资源（刷新页面的方式）
- 常见的页面水印
那其实也没有特别的技术含量，我就在这里展示了，希望能作为工具类供大家使用。
页面部分
html5+css，没啥好讲的。
html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: "Microsoft YaHei", sans-serif;
line-height: 1.6;
padding: 20px;
text-align: center;
background-color: #f8f8f8;
}
.poem-container {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 1.5em;
margin-bottom: 20px;
}
p {
text-indent: 2em;
font-size: 1.2em;
}
style>
<title>李白《将进酒》title>
head>
<body>
<div class="poem-container">
<h1>将进酒h1>
<p>君不见，黄河之水天上来，奔流到海不复回。p>
<p>君不见，高堂明镜悲白发，朝如青丝暮成雪。p>
<p>人生得意须尽欢，莫使金樽空对月。p>
<p>天生我材必有用，千金散尽还复来。p>
<p>烹羊宰牛且为乐，会须一饮三百杯。p>
<p>岑夫子，丹丘生，将进酒，杯莫停。p>
<p>与君歌一曲，请君为我倾耳听。p>
<p>钟鼓馔玉不足贵，但愿长醉不复醒。p>
<p>古来圣贤皆寂寞，惟有饮者留其名。p>
<p>陈王昔时宴平乐，斗酒十千恣欢谑。p>
<p>主人何为言少钱，径须沽取对君酌。p>
<p>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。p>
div>
body>
js部分
禁止选中
// 防止用户选中
function disableSelect() {
// 方式：给body设置样式
document.body.style.userSelect = 'none';
// 禁用input的ctrl + a
document.keyDown = function(event) {
const { ctrlKey, metaKey, keyCode } = event;
if ((ctrlKey || metaKey) && keyCode === 65) {
return false;
}
}
};
禁止复制、粘贴、剪切
document.addEventListener('copy', function(e) {
e.preventDefault();
});
document.addEventListener('cut', function(e) {
e.preventDefault();
});
document.addEventListener('paste', function(e) {
e.preventDefault();
});
禁止鼠标右键
// 防止右键
window.oncontextmenu = function() {
event.preventDefault()
return false
}
禁止调试资源
这个我会重点分析。
let threshold = 160 // 打开控制台的宽或高阈值
window.setInterval(function() {
if (window.outerWidth - window.innerWidth > threshold ||
window.outerHeight - window.innerHeight > threshold) {
// 如果打开控制台，则刷新页面
window.location.reload()
}
}, 1000)
这个代码的意思很好理解，当我们F12的时候，页面的宽度肯定会变小的，我们这个时候和屏幕的宽度比较，大于我们设置的阈值，我们就算用户在调试页面了。这也是我目前找到的比较好的方式了。但是，但是，认真思考一下以下问题需要你考虑吗？
- 页面频繁加载，流量的损失大吗
- 页面刷新，后端接口频繁调用，接口压力、接口幂等性
所以，我觉得这种方式不优雅，极度的不优雅，但是有没有别的好的解决办法。
加水印
// 生成水印
function generateWatermark(keyword = 'shigen-demo') {
// 创建Canvas元素
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
// 设置Canvas尺寸和字体样式
canvas.width = 100;
canvas.height = 100;
context.font = '10px Arial';
context.fillStyle = 'rgba(0,0,0,0.1)';
// 绘制文字到Canvas上
context.fillText(keyword, 10, 50);
// 生成水印图像的URL
const watermarkUrl = canvas.toDataURL();
// 在页面上显示水印图像（或进行其他操作）
const divDom = document.createElement('div');
divDom.style.cssText = `
position: fixed;
z-index: 99999;
top: -10000px;
bottom: -10000px;
left: -10000px;
right: -10000px;
transform: rotate(-45deg);
pointer-events: none;
background-image: url(${watermarkUrl});
`;
document.body.appendChild(divDom);
}
代码不需要理解，部分的参数去调整一下，就可以拿来就用了。
我一想，我最初接触到这种页面水印的时候，是在很老的OA办公系统，到后来用到了某书，它的app页面充满了水印，包括浏览器端的页面。
所以，我也实现了这个。but，but，有一种技术叫做OCR，大白话讲就是文字识别。我把图片截个图，让某信、某书识别以下，速度和效果那叫一个nice，当然也可能把水印也识别出来了。聪敏的开发者会把水印的颜色和文字的颜色设置成一种，这个时候需要准确的文字那可得下一番功夫了。换句话说，不是定制化的OCR，准确的识别出信息，真的够呛。
还有的很多页面实现了js的数据加密、接口数据加密。但是道高一尺，魔高一丈，各种都是在一种相互进步的。就看实际的业务场景和系统的设计了。
来源：juejin.cn/post/7300102080903675915
