一、前端做水印的目的
版权保护：通过在前端展示的内容上添加水印，可以明确标识内容的版权信息，如作者、公司名或版权声明。这有助于防止内容被未经授权地复制、分发或篡改，并增强对原创内容的保护。
防止滥用：对于某些需要限制访问或使用的资源，如预览图片、试用软件等，前端水印可以作为一种简单的防止滥用的手段。通过添加水印，可以提醒用户不要将受限内容用于非法或未经授权的目的。
追踪来源：在前端添加的水印可以包含一些特定的信息，如用户ID、时间戳等，以便在后续追踪时能够确定内容的来源或使用情况。这对于分析内容传播路径、监测盗版行为或评估营销效果等方面非常有用。
品牌宣传：对于一些品牌或产品来说，前端水印可以作为一种低成本的宣传方式。通过在展示的内容上添加品牌标识或标语，可以提高品牌的知名度和曝光率，增强用户对品牌的认知和记忆。
防止恶意篡改：在某些场景下，前端水印还可以用于防止内容被恶意篡改。通过在关键信息或重要区域添加水印，可以提醒用户注意内容的真实性和完整性，并降低被篡改的风险。
需要注意的是，前端水印虽然具有一定的作用，但其效果相对有限。因为前端代码运行在用户的浏览器中，用户可以通过各种方式绕过或修改这些水印。因此，前端水印通常被视为一种辅助手段，而不是唯一的保护措施。在需要更高级别的保护时，还需要结合后端验证、加密技术、法律手段等多种方法来实现。
二、实现方式
1、禁用右键菜单
HTML方法：
<body oncontextmenu="return false;">
<!-- 页面内容 -->
</body>JavaScript方法：
// 右键菜单
document.oncontextmenu = function(e) {
e.preventDefault();
return false;
};
// 针对特定的元素进行设置
const element = document.getElementById('yourElementId');
element.oncontextmenu = function(e) {
e.preventDefault();
return false;
};2、禁用复制粘贴
禁用复制粘贴通常涉及到监听copy和paste事件，并阻止其默认行为。但请注意，这并不能完全阻止用户通过其他方式（如拖拽、截图等）复制内容。
JavaScript方法：
document.addEventListener('copy', function(e) {
e.preventDefault();
});
document.addEventListener('paste', function(e) {
e.preventDefault();
});
// 针对特定的元素进行设置
const element = document.getElementById('yourElementId');
element.addEventListener('copy', function(e) {
e.preventDefault();
});
element.addEventListener('paste', function(e) {
e.preventDefault();
});3、禁止打开控制台
const event = window.event as any
document.addEventListener('contextmenu', e => {
if (window.location.origin.includes(webUrl)) {
e.preventDefault()
}
})
window.onkeydown = function () {
if (window.location.origin.includes(webUrl)) {
if (event && event.keyCode == 123) {
event.returnValue = false
return false
}
if (event && event.keyCode == 73 && event.ctrlKey && event.shiftKey) {
event.returnValue = false
return false
}
}
}
setInterval(function () {
if (window.location.origin.includes(webUrl)) check()
}, 5000)
const check = function () {
function doCheck(a: any) {
if (('' + a / a)['length'] !== 1 || a % 20 === 0) {
;(function () {})['constructor']('debugger')()
} else {
;(function () {})['constructor']('debugger')()
}
doCheck(++a)
}
try {
doCheck(0)
} catch (err: any) {
throw new Error(err)
}
}
if (window.location.origin.includes(webUrl)) check()4、通过MutationObserver重置重置水印
之前文章有介绍到：
vue自定义指令---添加水印
https://blog.csdn.net/qq_15557073/article/details/136163500?spm=1001.2014.3001.5501
注意事项
- 禁用右键菜单和复制粘贴可能会降低用户体验，因为用户可能习惯于使用这些功能。因此，在决定使用这些方法之前，请仔细考虑其潜在的影响。
- 这些方法并不能完全防止用户获取或修改内容。用户仍然可以通过其他方式（如查看页面源代码、使用开发者工具等）来绕过这些限制。因此，它们应该被视为一种额外的安全措施，而不是唯一的保护手段。
- 在某些情况下，禁用这些功能可能违反用户协议或法律法规。因此，在实施这些措施之前，请确保你已经充分了解并遵守了相关的规定。