记录--如何防止网站信息泄露（复制/水印/控制台）
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
一、前言
中午休息的时候，闲逛公司内网，看到一个url，就想复制一下url，看看url对应的内容是啥，习惯性使用ctrl+c，然后ctrl+v，最后得到是 禁止复制，哦，原来是禁用了复制。这能难倒一个前端开发吗？当然不能。于是打开了控制台，这时，发现页面自动执行了一段立即执行函数，函数体里面是debugger代码，然后手动跳过debugger后，页面已经变成一个空白页面了。
本文将简单讲解禁止复制、水印和禁止打开控制台三个功能点的实现。
前面几节是分功能讲解，最后一节将会写出完整的代码，如何防止网站信息泄露。
二、禁止复制
现在有的复制网页（常规网页用户，不开控制台的情况）的内容方式有：
- 选择 -> ctrl+c（command + c）
- 选择 -> 鼠标右键 -> 复制
js拦截
相比user-select无法做到某一些内容可以被选中
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
}, false);
document.addEventListener('selectstart', function(e) {
e.preventDefault();
}, false);
user-select
不难发现，当我们复制内容的时候，首选是选择目标内容，那我们可以禁用用户的选择目标内容。
css属性user-select用于控制用户是否能够选择（即复制）文本和其他页面元素。它的作用是指定用户在浏览网页时是否能够选择和复制页面上的文本和其他元素。
<h3>user-select: none;</h3> <div style="user-select: none;">我是捌玖，欢迎关注我哟，这儿是利用css样式，测试能否禁用复制</div> <div style="user-select: none;">哈哈哈，当然，这种方式是无效的，我只是玩下</div>
那user-select和pointer-event的区别是啥？ pointer-events 指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target (en-US)。通俗一点讲，例如我们给某个元素设置了pointer-events: none，当我们点击这个元素的时候，是不会触发click事件，包括我们即使通过鼠标也无法选中该元素。
user-select 用于控制用户是否可以选择文本。这不会对作为浏览器用户界面（即 chrome）的一部分的内容加载产生任何影响，除非是在文本框中。
注意：user-select是无法拦截input中的选中（鼠标/ctrl+a）
拦截ctrl + a
每个人（系统）使用使用组合键进行复制，可能键是存在差异的，就拿我电脑是mac，默认是command + a为复制，当然是可以修改的，看个人使用习惯，所以我们要同时拦截掉ctrl + a 和 command + a。
document.keyDown = function(event) {
const {ctrlKey, metaKey, keyCode} = event;
if((ctrlKey || metaKey) && keyCode === 65) {
return false;
}
}
拦截ctrl+c（command + c）
每个人（系统）使用使用组合键进行复制，可能键是存在差异的，就拿我电脑是mac，默认是command + c为复制，当然是可以修改的，看个人使用习惯，所以我们要同时拦截掉ctrl + c 和 command + c的。不可以直接拦截c键的输入，会影响到input框的输入
document.keyDown = function(event) {
const {ctrlKey, metaKey, keyCode} = event;
if((ctrlKey || metaKey) && keyCode === 67) {
return false;
}
}
直接拦截鼠标右键
该方法直接拦截了右键菜单的打开，主要用于拦截图片的复制，菜单中的复制图片的方法有多种（复制图片、复制图片地址等），暂时没找到合适的方法拦截菜单中具体的某一项。
document.oncontextmenu = function(event){
if(event.srcElement.tagName=="IMG"){
alert('图片直接右键');
return false;
}
};
三、水印
网站水印的主要作用是版权保护和网站标识展示。具体来说，它可以在图片上加上作者的信息或标识，防止他人未经授权使用，有助于保护图片的版权安全。同时，它也可以在网页中展示特定的标识或信息，如网站的名称、网址、版权信息等，有助于提高网站的知名度和品牌形象。
此外，网站水印还可以用于追踪网站的非法使用和侵权行为。当发现某个网站上出现了未经授权的水印，就可以通过水印的信息追踪到该网站的使用者，从而采取相应的法律措施。
// 创建Canvas元素
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
// 设置Canvas尺寸和字体样式
canvas.width = 100;
canvas.height = 100;
context.font = '30px Arial';
context.fillStyle = 'rgba(0,0,0,0.1)';
// 绘制文字到Canvas上
context.fillText('捌玖', 10, 50);
// 生成水印图像的URL
const watermarkUrl = canvas.toDataURL();
// 在页面上显示水印图像（或进行其他操作）
const divDom = document.createElement('div');
divDom.style.position = 'fixed';
divDom.style.zIndex = '99999';
divDom.style.top = '-10000px';
divDom.style.bottom = '-10000px';
divDom.style.left = '-10000px';
divDom.style.right = '-10000px';
divDom.style.transform = 'rotate(-45deg)';
// 避免对用户的交互产生影响
divDom.style.pointerEvents = 'none';
divDom.style.backgroundImage = `url(${watermarkUrl})`;
document.body.appendChild(divDom);
四、禁止打开控制台
禁止用户打开控制台
- 防止代码被窃取：在控制台中，用户可以查看和修改网页的源代码，这可能会导致恶意用户窃取您的代码或敏感信息。通过禁止打开控制台，可以保护您的代码和数据不被未经授权的用户访问或篡改。
- 提高安全性：控制台是网页与用户之间进行交互的主要渠道之一，但也是潜在的安全风险之一。恶意用户可以利用控制台执行恶意代码、进行钓鱼攻击等。禁止用户打开控制台可以减少这些潜在的安全风险。
- 保护系统资源：在控制台中，用户可以执行各种操作，例如创建新文件、删除文件等，这可能会对系统资源造成不必要的占用和破坏。禁止打开控制台可以限制用户的操作范围，保护系统资源不被滥用。
- 防止误操作：控制台允许用户进行各种操作，但这也增加了误操作的风险。禁止打开控制台可以减少用户误操作的可能性，避免不必要的损失和风险。
let firstTime;
let lastTime;
setInterval(() => {
firstTime = Date.now()
debugger
lastTime = Date.now()
if (lastTime - firstTime > 10) {
window.location.href = "about:blank";
}
}, 100)
五、总结
// 防止用户选中
function disableSelect() {
// 方式一，js拦截
// 缺点： 无法做到某一些内容可以选中
document.onselectstart = function(event){
e.preventDefault();
};
// 方式：给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;
}
}
};
// 禁用键盘的复制
function disableCopy() {
const {ctrlKey, metaKey, keyCode} = event;
if((ctrlKey || metaKey) && keyCode === 67) {
return false;
}
}
// 禁止复制图片
function disableCopyImg() {
document.oncontextmenu = function(event){
if(event.srcElement.tagName=="IMG"){
alert('图片直接右键');
return false;
}
};
};
// 生成水印
function generateWatermark(keyword = '捌玖') {
// 创建Canvas元素
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
// 设置Canvas尺寸和字体样式
canvas.width = 100;
canvas.height = 100;
context.font = '30px 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.position = 'fixed';
divDom.style.zIndex = '99999';
// 因为div旋转了45度，所以div需要足够的大
divDom.style.top = '-10000px';
divDom.style.bottom = '-10000px';
divDom.style.left = '-10000px';
divDom.style.right = '-10000px';
divDom.style.transform = 'rotate(-45deg)';
// 防止对用户的交互产生影响
divDom.style.pointerEvents = 'none';
divDom.style.backgroundImage = `url(${watermarkUrl})`;
document.body.appendChild(divDom);
}
// 禁止打开控制台
function disbaleConsole() {
let firstTime
let lastTime
setInterval(() => {
firstTime = Date.now()
debugger
lastTime = Date.now()
if (lastTime - firstTime > 10) {
window.location.href = "about:blank";
}
}, 100);
}
disableSelect();
disableCopy();
disableCopyImg();
generateWatermark();
disbaleConsole();
本文转载于:
https://juejin.cn/post/7292416512333332534
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
